cps-ui-kit 0.55.0 → 0.56.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/README.md +1 -0
- package/esm2020/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +6 -3
- package/esm2020/lib/components/cps-datepicker/cps-datepicker.component.mjs +6 -3
- package/esm2020/lib/components/cps-input/cps-input.component.mjs +6 -3
- package/esm2020/lib/components/cps-menu/cps-menu.component.mjs +48 -8
- package/esm2020/lib/components/cps-paginator/cps-paginator.component.mjs +1 -1
- package/esm2020/lib/components/cps-select/cps-select.component.mjs +6 -3
- package/esm2020/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.mjs +60 -0
- package/esm2020/lib/components/cps-table/cps-table.component.mjs +3 -3
- package/esm2020/lib/components/cps-table/table-column-filter/table-column-filter-constraint/table-column-filter-constraint.component.mjs +2 -2
- package/esm2020/lib/components/cps-table/table-column-filter/table-column-filter.component.mjs +2 -2
- package/esm2020/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.mjs +6 -3
- package/esm2020/lib/components/cps-tree-select/cps-tree-select.component.mjs +8 -5
- package/esm2020/lib/utils/internal/size-utils.mjs +3 -1
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/cps-ui-kit.mjs +141 -27
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +140 -27
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-autocomplete/cps-autocomplete.component.d.ts +3 -1
- package/lib/components/cps-datepicker/cps-datepicker.component.d.ts +3 -1
- package/lib/components/cps-input/cps-input.component.d.ts +3 -1
- package/lib/components/cps-menu/cps-menu.component.d.ts +7 -2
- package/lib/components/cps-select/cps-select.component.d.ts +3 -1
- package/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.d.ts +27 -0
- package/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.d.ts +3 -1
- package/lib/components/cps-tree-select/cps-tree-select.component.d.ts +3 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding, Host, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
|
|
4
|
+
import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding, Host, ContentChild, ViewChildren, TemplateRef, ContentChildren } from '@angular/core';
|
|
5
5
|
import { Subscription, fromEvent, debounceTime, distinctUntilChanged } from 'rxjs';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
@@ -21,12 +21,16 @@ import * as i2$1 from 'primeng/calendar';
|
|
|
21
21
|
import { CalendarModule } from 'primeng/calendar';
|
|
22
22
|
import * as i1$3 from 'primeng/paginator';
|
|
23
23
|
import { PaginatorModule } from 'primeng/paginator';
|
|
24
|
+
import * as i1$4 from '@angular/router';
|
|
25
|
+
import { RouterModule } from '@angular/router';
|
|
24
26
|
|
|
25
27
|
const convertSize = (size) => {
|
|
26
28
|
const res = String(size).trim();
|
|
27
29
|
if (!res) {
|
|
28
30
|
return '';
|
|
29
31
|
}
|
|
32
|
+
if (res.startsWith('calc(') && res.endsWith(')'))
|
|
33
|
+
return res;
|
|
30
34
|
if (/^\d+(\.\d+)?$/i.test(res)) {
|
|
31
35
|
return res + 'px';
|
|
32
36
|
}
|
|
@@ -580,6 +584,7 @@ class CpsInputComponent {
|
|
|
580
584
|
this.infoTooltipMaxWidth = '100%';
|
|
581
585
|
this.infoTooltipPersistent = false;
|
|
582
586
|
this.infoTooltipPosition = 'top';
|
|
587
|
+
this.appearance = 'outlined';
|
|
583
588
|
this.valueChanged = new EventEmitter();
|
|
584
589
|
this.focused = new EventEmitter();
|
|
585
590
|
this.prefixIconClicked = new EventEmitter();
|
|
@@ -703,7 +708,7 @@ class CpsInputComponent {
|
|
|
703
708
|
}
|
|
704
709
|
}
|
|
705
710
|
CpsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
-
CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <div\n class=\"cps-input-label\"\n [ngClass]=\"{ 'cps-input-label-disabled': disabled }\"\n *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-input-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n class=\"cps-input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'cps-input-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear\n }\">\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (keydown.enter)=\"onInputEnterKeyDown()\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:#c33!important}:host .cps-input-container .cps-input-wrap input{font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
|
|
711
|
+
CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <div\n class=\"cps-input-label\"\n [ngClass]=\"{ 'cps-input-label-disabled': disabled }\"\n *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-input-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n class=\"cps-input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'cps-input-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (keydown.enter)=\"onInputEnterKeyDown()\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:#c33!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-text-lightest)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
|
|
707
712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
|
|
708
713
|
type: Component,
|
|
709
714
|
args: [{ standalone: true, imports: [
|
|
@@ -711,7 +716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
711
716
|
CpsIconComponent,
|
|
712
717
|
CpsInfoCircleComponent,
|
|
713
718
|
CpsProgressLinearComponent
|
|
714
|
-
], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <div\n class=\"cps-input-label\"\n [ngClass]=\"{ 'cps-input-label-disabled': disabled }\"\n *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-input-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n class=\"cps-input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'cps-input-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear\n }\">\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (keydown.enter)=\"onInputEnterKeyDown()\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:#c33!important}:host .cps-input-container .cps-input-wrap input{font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
|
|
719
|
+
], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <div\n class=\"cps-input-label\"\n [ngClass]=\"{ 'cps-input-label-disabled': disabled }\"\n *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-input-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n\n <div\n class=\"cps-input-wrap\"\n [ngClass]=\"{\n password: type === 'password',\n 'cps-input-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (keydown.enter)=\"onInputEnterKeyDown()\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:#c33!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-text-lightest)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
|
|
715
720
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
716
721
|
type: Self
|
|
717
722
|
}, {
|
|
@@ -756,6 +761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
756
761
|
type: Input
|
|
757
762
|
}], infoTooltipPosition: [{
|
|
758
763
|
type: Input
|
|
764
|
+
}], appearance: [{
|
|
765
|
+
type: Input
|
|
759
766
|
}], value: [{
|
|
760
767
|
type: Input
|
|
761
768
|
}], valueChanged: [{
|
|
@@ -915,6 +922,7 @@ class CpsMenuComponent {
|
|
|
915
922
|
this.render = false;
|
|
916
923
|
this.isOverlayAnimationInProgress = false;
|
|
917
924
|
this.selfClick = false;
|
|
925
|
+
this.position = 'default';
|
|
918
926
|
this.targetResizeObserver = new ResizeObserver((entries) => {
|
|
919
927
|
entries.forEach((entry) => {
|
|
920
928
|
if (this.target && entry)
|
|
@@ -925,23 +933,23 @@ class CpsMenuComponent {
|
|
|
925
933
|
ngAfterViewInit() {
|
|
926
934
|
this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
|
|
927
935
|
}
|
|
928
|
-
toggle(event, target) {
|
|
936
|
+
toggle(event, target, pos) {
|
|
929
937
|
if (this.isOverlayAnimationInProgress) {
|
|
930
938
|
return;
|
|
931
939
|
}
|
|
932
940
|
if (this.overlayVisible) {
|
|
933
941
|
if (this.hasTargetChanged(event, target)) {
|
|
934
942
|
this.destroyCallback = () => {
|
|
935
|
-
this.show(null, target || event?.currentTarget || event?.target);
|
|
943
|
+
this.show(null, target || event?.currentTarget || event?.target, pos);
|
|
936
944
|
};
|
|
937
945
|
}
|
|
938
946
|
this.hide();
|
|
939
947
|
}
|
|
940
948
|
else {
|
|
941
|
-
this.show(event, target);
|
|
949
|
+
this.show(event, target, pos);
|
|
942
950
|
}
|
|
943
951
|
}
|
|
944
|
-
show(event, target) {
|
|
952
|
+
show(event, target, pos) {
|
|
945
953
|
target && event && event.stopPropagation();
|
|
946
954
|
if (this.isOverlayAnimationInProgress) {
|
|
947
955
|
return;
|
|
@@ -951,6 +959,7 @@ class CpsMenuComponent {
|
|
|
951
959
|
this.targetResizeObserver.observe(this.target);
|
|
952
960
|
this.overlayVisible = true;
|
|
953
961
|
this.render = true;
|
|
962
|
+
this.position = pos || 'default';
|
|
954
963
|
this.cd.markForCheck();
|
|
955
964
|
}
|
|
956
965
|
hide() {
|
|
@@ -1055,11 +1064,49 @@ class CpsMenuComponent {
|
|
|
1055
1064
|
this.renderer.appendChild(this.el.nativeElement, this.container);
|
|
1056
1065
|
}
|
|
1057
1066
|
}
|
|
1067
|
+
_setPosition(element, target) {
|
|
1068
|
+
const getPos = () => {
|
|
1069
|
+
const targetOffset = DomHandler.getOffset(target);
|
|
1070
|
+
switch (this.position) {
|
|
1071
|
+
case 'bl':
|
|
1072
|
+
return {
|
|
1073
|
+
top: Math.max(targetOffset.top + target.offsetHeight - element.offsetHeight, 0),
|
|
1074
|
+
left: Math.max(0, targetOffset.left - element.offsetWidth - 1)
|
|
1075
|
+
};
|
|
1076
|
+
case 'br':
|
|
1077
|
+
return {
|
|
1078
|
+
top: Math.max(targetOffset.top + target.offsetHeight - element.offsetHeight, 0),
|
|
1079
|
+
left: Math.min(targetOffset.left + target.offsetWidth + 1, window.innerWidth - element.offsetWidth)
|
|
1080
|
+
};
|
|
1081
|
+
case 'tl':
|
|
1082
|
+
return {
|
|
1083
|
+
top: Math.min(targetOffset.top, window.innerHeight - element.offsetHeight),
|
|
1084
|
+
left: Math.max(0, targetOffset.left - element.offsetWidth - 1)
|
|
1085
|
+
};
|
|
1086
|
+
case 'tr':
|
|
1087
|
+
return {
|
|
1088
|
+
top: Math.min(targetOffset.top, window.innerHeight - element.offsetHeight),
|
|
1089
|
+
left: Math.min(targetOffset.left + target.offsetWidth + 1, window.innerWidth - element.offsetWidth)
|
|
1090
|
+
};
|
|
1091
|
+
case 'default':
|
|
1092
|
+
default:
|
|
1093
|
+
DomHandler.absolutePosition(element, target);
|
|
1094
|
+
return undefined;
|
|
1095
|
+
}
|
|
1096
|
+
};
|
|
1097
|
+
if (!element || !target)
|
|
1098
|
+
return;
|
|
1099
|
+
const pos = getPos();
|
|
1100
|
+
if (pos) {
|
|
1101
|
+
element.style.top = (pos.top || 0) + 'px';
|
|
1102
|
+
element.style.left = (pos.left || 0) + 'px';
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1058
1105
|
align() {
|
|
1059
1106
|
if (this.autoZIndex) {
|
|
1060
1107
|
ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
|
|
1061
1108
|
}
|
|
1062
|
-
|
|
1109
|
+
this._setPosition(this.container, this.target);
|
|
1063
1110
|
const containerOffset = DomHandler.getOffset(this.container);
|
|
1064
1111
|
const targetOffset = DomHandler.getOffset(this.target);
|
|
1065
1112
|
if (this.withArrow) {
|
|
@@ -1213,7 +1260,7 @@ class CpsMenuComponent {
|
|
|
1213
1260
|
}
|
|
1214
1261
|
}
|
|
1215
1262
|
CpsMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsMenuComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }, { token: i1$1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1216
|
-
CpsMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsMenuComponent, isStandalone: true, selector: "cps-menu", inputs: { header: "header", items: "items", withArrow: "withArrow", compressed: "compressed", focusOnShow: "focusOnShow", containerClass: "containerClass", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { menuShown: "menuShown", menuHidden: "menuHidden", beforeMenuHidden: "beforeMenuHidden", contentClicked: "contentClicked" }, ngImport: i0, template: "<div\n *ngIf=\"render\"\n class=\"cps-menu-container\"\n [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n [class]=\"containerClass\"\n (click)=\"onOverlayClick($event)\"\n [@animation]=\"{\n value: overlayVisible ? 'open' : 'close',\n params: {\n showTransitionParams: showTransitionOptions,\n hideTransitionParams: hideTransitionOptions\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\">\n <div (mouseup)=\"onContentClick()\" (touchend)=\"onContentClick()\">\n <ng-container *ngIf=\"items.length < 1\">\n <ng-content></ng-content>\n </ng-container>\n <div\n *ngIf=\"items.length > 0\"\n class=\"cps-menu-content\"\n [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n {{ header }}\n </div>\n <
|
|
1263
|
+
CpsMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsMenuComponent, isStandalone: true, selector: "cps-menu", inputs: { header: "header", items: "items", withArrow: "withArrow", compressed: "compressed", focusOnShow: "focusOnShow", containerClass: "containerClass", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { menuShown: "menuShown", menuHidden: "menuHidden", beforeMenuHidden: "beforeMenuHidden", contentClicked: "contentClicked" }, ngImport: i0, template: "<div\n *ngIf=\"render\"\n class=\"cps-menu-container\"\n [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n [class]=\"containerClass\"\n (click)=\"onOverlayClick($event)\"\n [@animation]=\"{\n value: overlayVisible ? 'open' : 'close',\n params: {\n showTransitionParams: showTransitionOptions,\n hideTransitionParams: hideTransitionOptions\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\">\n <div (mouseup)=\"onContentClick()\" (touchend)=\"onContentClick()\">\n <ng-container *ngIf=\"items.length < 1\">\n <ng-content></ng-content>\n </ng-container>\n <div\n *ngIf=\"items.length > 0\"\n class=\"cps-menu-content\"\n [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n {{ header }}\n </div>\n <a\n *ngFor=\"let item of items; let i = index\"\n (click)=\"onItemClick($event, item)\"\n [attr.href]=\"item.url ? item.url : null\"\n [attr.target]=\"item.url ? item.target : null\"\n [ngClass]=\"{\n 'cps-menu-item-disabled': item.disabled,\n 'cps-menu-item-first': i === 0,\n 'cps-menu-item-compressed': compressed,\n 'cps-menu-item-compressed-with-icons': compressed && withIcons\n }\"\n class=\"cps-menu-item\">\n <div class=\"cps-menu-item-icon\" *ngIf=\"withIcons\">\n <cps-icon\n *ngIf=\"item.icon\"\n [icon]=\"item.icon\"\n [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n </div>\n <div class=\"cps-menu-item-content\">\n <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n <span\n *ngIf=\"item.desc && !compressed\"\n class=\"cps-menu-item-content-desc\"\n >{{ item.desc }}</span\n >\n </div>\n </a>\n </div>\n </div>\n</div>\n", styles: [".cps-menu-container{background:#ffffff;border:0 none;box-shadow:0 1px 3px #0000004d;position:absolute;margin-top:14px;top:0;left:0;font-family:Source Sans Pro,sans-serif}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px;border:solid transparent;border-color:#fff0;border-bottom-color:var(--cps-color-line-light)}.cps-menu-container:not(.cps-menu-no-arrow):after,.cps-menu-container:not(.cps-menu-no-arrow):before{bottom:100%;left:var(--overlayArrowLeft, 12);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.cps-menu-container .cps-menu-content{padding:.75rem}.cps-menu-container .cps-menu-content{font-family:Source Sans Pro,sans-serif;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.cps-menu-container .cps-menu-content .cps-menu-header{display:flex;align-items:center;min-height:50px;padding-bottom:8px;font-weight:600;color:var(--cps-color-text-dark);cursor:default}.cps-menu-container .cps-menu-content .cps-menu-item{text-decoration:unset;display:flex;align-items:center;padding:8px 48px 8px 0;border-top:1px solid rgba(0,0,0,.1215686275);cursor:pointer;min-height:58px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon{width:48px;align-items:center;display:flex}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon cps-icon{margin-left:8px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content{display:flex;flex-direction:column}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:600;font-size:15px;line-height:150%;color:var(--cps-color-text-dark)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-desc{font-size:12px;line-height:150%;color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled{pointer-events:none}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-lightest)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover{background:#f8f4f5}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-calm)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-mild)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):not(.cps-menu-item-compressed):hover .cps-menu-item-icon cps-icon i{color:var(--cps-color-calm)!important}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):active{background:#f1eaec}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-first{border-top:none}.cps-menu-container .cps-menu-content.cps-menu-content-compressed{padding:0}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item{padding:0 16px;min-height:40px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-icon{width:36px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:500}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item.cps-menu-item-compressed.cps-menu-item-compressed-with-icons{padding:0 26px 0 16px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-icon cps-icon i{color:var(--cps-color-prepared)!important}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-prepared)}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px;border:solid transparent;border-color:#fff0;border-bottom-color:#fff}.cps-menu-container-flipped{margin-top:0;margin-bottom:10px}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px}.cps-menu-container-flipped:not(.cps-menu-no-arrow):after,.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{bottom:auto;top:100%}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):after{border-bottom-color:transparent}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{border-bottom-color:transparent}.cps-menu-no-arrow{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
|
|
1217
1264
|
trigger('animation', [
|
|
1218
1265
|
state('void', style({
|
|
1219
1266
|
transform: 'scaleY(0.8)',
|
|
@@ -1250,7 +1297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1250
1297
|
transition('void => open', animate('{{showTransitionParams}}')),
|
|
1251
1298
|
transition('open => close', animate('{{hideTransitionParams}}'))
|
|
1252
1299
|
])
|
|
1253
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"render\"\n class=\"cps-menu-container\"\n [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n [class]=\"containerClass\"\n (click)=\"onOverlayClick($event)\"\n [@animation]=\"{\n value: overlayVisible ? 'open' : 'close',\n params: {\n showTransitionParams: showTransitionOptions,\n hideTransitionParams: hideTransitionOptions\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\">\n <div (mouseup)=\"onContentClick()\" (touchend)=\"onContentClick()\">\n <ng-container *ngIf=\"items.length < 1\">\n <ng-content></ng-content>\n </ng-container>\n <div\n *ngIf=\"items.length > 0\"\n class=\"cps-menu-content\"\n [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n {{ header }}\n </div>\n <
|
|
1300
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"render\"\n class=\"cps-menu-container\"\n [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n [class]=\"containerClass\"\n (click)=\"onOverlayClick($event)\"\n [@animation]=\"{\n value: overlayVisible ? 'open' : 'close',\n params: {\n showTransitionParams: showTransitionOptions,\n hideTransitionParams: hideTransitionOptions\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\">\n <div (mouseup)=\"onContentClick()\" (touchend)=\"onContentClick()\">\n <ng-container *ngIf=\"items.length < 1\">\n <ng-content></ng-content>\n </ng-container>\n <div\n *ngIf=\"items.length > 0\"\n class=\"cps-menu-content\"\n [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n {{ header }}\n </div>\n <a\n *ngFor=\"let item of items; let i = index\"\n (click)=\"onItemClick($event, item)\"\n [attr.href]=\"item.url ? item.url : null\"\n [attr.target]=\"item.url ? item.target : null\"\n [ngClass]=\"{\n 'cps-menu-item-disabled': item.disabled,\n 'cps-menu-item-first': i === 0,\n 'cps-menu-item-compressed': compressed,\n 'cps-menu-item-compressed-with-icons': compressed && withIcons\n }\"\n class=\"cps-menu-item\">\n <div class=\"cps-menu-item-icon\" *ngIf=\"withIcons\">\n <cps-icon\n *ngIf=\"item.icon\"\n [icon]=\"item.icon\"\n [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n </div>\n <div class=\"cps-menu-item-content\">\n <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n <span\n *ngIf=\"item.desc && !compressed\"\n class=\"cps-menu-item-content-desc\"\n >{{ item.desc }}</span\n >\n </div>\n </a>\n </div>\n </div>\n</div>\n", styles: [".cps-menu-container{background:#ffffff;border:0 none;box-shadow:0 1px 3px #0000004d;position:absolute;margin-top:14px;top:0;left:0;font-family:Source Sans Pro,sans-serif}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px;border:solid transparent;border-color:#fff0;border-bottom-color:var(--cps-color-line-light)}.cps-menu-container:not(.cps-menu-no-arrow):after,.cps-menu-container:not(.cps-menu-no-arrow):before{bottom:100%;left:var(--overlayArrowLeft, 12);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.cps-menu-container .cps-menu-content{padding:.75rem}.cps-menu-container .cps-menu-content{font-family:Source Sans Pro,sans-serif;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.cps-menu-container .cps-menu-content .cps-menu-header{display:flex;align-items:center;min-height:50px;padding-bottom:8px;font-weight:600;color:var(--cps-color-text-dark);cursor:default}.cps-menu-container .cps-menu-content .cps-menu-item{text-decoration:unset;display:flex;align-items:center;padding:8px 48px 8px 0;border-top:1px solid rgba(0,0,0,.1215686275);cursor:pointer;min-height:58px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon{width:48px;align-items:center;display:flex}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon cps-icon{margin-left:8px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content{display:flex;flex-direction:column}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:600;font-size:15px;line-height:150%;color:var(--cps-color-text-dark)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-desc{font-size:12px;line-height:150%;color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled{pointer-events:none}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-lightest)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover{background:#f8f4f5}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-calm)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-mild)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):not(.cps-menu-item-compressed):hover .cps-menu-item-icon cps-icon i{color:var(--cps-color-calm)!important}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):active{background:#f1eaec}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-first{border-top:none}.cps-menu-container .cps-menu-content.cps-menu-content-compressed{padding:0}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item{padding:0 16px;min-height:40px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-icon{width:36px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:500}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item.cps-menu-item-compressed.cps-menu-item-compressed-with-icons{padding:0 26px 0 16px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-icon cps-icon i{color:var(--cps-color-prepared)!important}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-prepared)}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px;border:solid transparent;border-color:#fff0;border-bottom-color:#fff}.cps-menu-container-flipped{margin-top:0;margin-bottom:10px}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px}.cps-menu-container-flipped:not(.cps-menu-no-arrow):after,.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{bottom:auto;top:100%}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):after{border-bottom-color:transparent}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{border-bottom-color:transparent}.cps-menu-no-arrow{margin-top:0;margin-bottom:0}\n"] }]
|
|
1254
1301
|
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
1255
1302
|
type: Inject,
|
|
1256
1303
|
args: [DOCUMENT]
|
|
@@ -1321,6 +1368,7 @@ class CpsSelectComponent {
|
|
|
1321
1368
|
this.infoTooltipPersistent = false;
|
|
1322
1369
|
this.infoTooltipPosition = 'top';
|
|
1323
1370
|
this.optionsClass = '';
|
|
1371
|
+
this.appearance = 'outlined';
|
|
1324
1372
|
this._value = undefined;
|
|
1325
1373
|
this.valueChanged = new EventEmitter();
|
|
1326
1374
|
this._statusChangesSubscription = new Subscription();
|
|
@@ -1617,7 +1665,7 @@ class CpsSelectComponent {
|
|
|
1617
1665
|
}
|
|
1618
1666
|
}
|
|
1619
1667
|
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 });
|
|
1620
|
-
CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", _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 }\">\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 [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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\"\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: 3 }\"\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;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}: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-text-lightest);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;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:#efe4e7}.cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}.cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "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: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
1668
|
+
CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", 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 [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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\"\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: 3 }\"\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;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-text-lightest)!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-text-lightest);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;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:#efe4e7}.cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}.cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "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: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
1621
1669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
|
|
1622
1670
|
type: Component,
|
|
1623
1671
|
args: [{ standalone: true, imports: [
|
|
@@ -1632,7 +1680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1632
1680
|
CheckOptionSelectedPipe,
|
|
1633
1681
|
VirtualScrollerModule,
|
|
1634
1682
|
CpsMenuComponent
|
|
1635
|
-
], 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 }\">\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 [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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\"\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: 3 }\"\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;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}: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-text-lightest);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;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:#efe4e7}.cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}.cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
|
|
1683
|
+
], 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 [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-select-box-placeholder\"\n *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-select-box-items\"\n *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n value\n | combineLabels\n : options\n : optionValue\n : optionLabel\n : returnObject\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-select-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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\"\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: 3 }\"\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;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-text-lightest)!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-text-lightest);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;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:#efe4e7}.cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}.cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
|
|
1636
1684
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1637
1685
|
type: Self
|
|
1638
1686
|
}, {
|
|
@@ -1693,6 +1741,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1693
1741
|
type: Input
|
|
1694
1742
|
}], optionsClass: [{
|
|
1695
1743
|
type: Input
|
|
1744
|
+
}], appearance: [{
|
|
1745
|
+
type: Input
|
|
1696
1746
|
}], _value: [{
|
|
1697
1747
|
type: Input,
|
|
1698
1748
|
args: ['value']
|
|
@@ -2198,6 +2248,7 @@ class CpsTreeSelectComponent extends CpsTreeDropdownBaseComponent {
|
|
|
2198
2248
|
super(control, cdRef);
|
|
2199
2249
|
this.control = control;
|
|
2200
2250
|
this.cdRef = cdRef;
|
|
2251
|
+
this.appearance = 'outlined';
|
|
2201
2252
|
}
|
|
2202
2253
|
ngOnInit() {
|
|
2203
2254
|
super.ngOnInit();
|
|
@@ -2228,7 +2279,7 @@ class CpsTreeSelectComponent extends CpsTreeDropdownBaseComponent {
|
|
|
2228
2279
|
}
|
|
2229
2280
|
}
|
|
2230
2281
|
CpsTreeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2231
|
-
CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2282
|
+
CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-text-lightest)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2232
2283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
|
|
2233
2284
|
type: Component,
|
|
2234
2285
|
args: [{ standalone: true, imports: [
|
|
@@ -2241,10 +2292,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2241
2292
|
CpsInfoCircleComponent,
|
|
2242
2293
|
CombineLabelsPipe,
|
|
2243
2294
|
CpsMenuComponent
|
|
2244
|
-
], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
2295
|
+
], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (blur)=\"onBlur()\">\n <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeselect-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span\n class=\"cps-treeselect-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeselect-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-text-lightest)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}.cps-treeselect-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
2245
2296
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
2246
2297
|
type: Optional
|
|
2247
|
-
}] }, { type: i0.ChangeDetectorRef }]; }
|
|
2298
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
|
|
2299
|
+
type: Input
|
|
2300
|
+
}] } });
|
|
2248
2301
|
|
|
2249
2302
|
class CpsAutocompleteComponent {
|
|
2250
2303
|
get value() {
|
|
@@ -2285,6 +2338,7 @@ class CpsAutocompleteComponent {
|
|
|
2285
2338
|
this.infoTooltipMaxWidth = '100%';
|
|
2286
2339
|
this.infoTooltipPersistent = false;
|
|
2287
2340
|
this.infoTooltipPosition = 'top';
|
|
2341
|
+
this.appearance = 'outlined';
|
|
2288
2342
|
this._value = undefined;
|
|
2289
2343
|
this.valueChanged = new EventEmitter();
|
|
2290
2344
|
this._statusChangesSubscription = new Subscription();
|
|
@@ -2707,7 +2761,7 @@ class CpsAutocompleteComponent {
|
|
|
2707
2761
|
}
|
|
2708
2762
|
}
|
|
2709
2763
|
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 });
|
|
2710
|
-
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _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 }\">\n <div class=\"cps-autocomplete-box\" #autocompleteBox (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></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 *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-autocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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 && selectAll && filteredOptions.length === options.length\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: 3 }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!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-text-lightest);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{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%;margin-top:3px;margin-bottom:3px;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 .chips-group{display:inline-flex;flex-wrap:wrap}: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);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2px;padding-right:4px;height:24px}: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;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2764
|
+
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", 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 class=\"cps-autocomplete-box\" #autocompleteBox (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></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 *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-autocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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 && selectAll && filteredOptions.length === options.length\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: 3 }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;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-text-lightest)!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-text-lightest);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{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%;margin-top:3px;margin-bottom:3px;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 .chips-group{display:inline-flex;flex-wrap:wrap}: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);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2px;padding-right:4px;height:24px}: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;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2711
2765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
2712
2766
|
type: Component,
|
|
2713
2767
|
args: [{ standalone: true, imports: [
|
|
@@ -2721,7 +2775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2721
2775
|
CheckOptionSelectedPipe,
|
|
2722
2776
|
VirtualScrollerModule,
|
|
2723
2777
|
CpsMenuComponent
|
|
2724
|
-
], 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 }\">\n <div class=\"cps-autocomplete-box\" #autocompleteBox (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></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 *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-autocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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 && selectAll && filteredOptions.length === options.length\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: 3 }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!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-text-lightest);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{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%;margin-top:3px;margin-bottom:3px;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 .chips-group{display:inline-flex;flex-wrap:wrap}: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);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2px;padding-right:4px;height:24px}: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;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
|
|
2778
|
+
], 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 class=\"cps-autocomplete-box\" #autocompleteBox (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></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 *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-autocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"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 && selectAll && filteredOptions.length === options.length\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: 3 }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualScroller>\n </ng-container>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected : value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;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-text-lightest)!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-text-lightest);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{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%;margin-top:3px;margin-bottom:3px;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 .chips-group{display:inline-flex;flex-wrap:wrap}: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);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2px;padding-right:4px;height:24px}: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;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#f8f4f5}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
|
|
2725
2779
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
2726
2780
|
type: Self
|
|
2727
2781
|
}, {
|
|
@@ -2782,6 +2836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2782
2836
|
type: Input
|
|
2783
2837
|
}], infoTooltipPosition: [{
|
|
2784
2838
|
type: Input
|
|
2839
|
+
}], appearance: [{
|
|
2840
|
+
type: Input
|
|
2785
2841
|
}], _value: [{
|
|
2786
2842
|
type: Input,
|
|
2787
2843
|
args: ['value']
|
|
@@ -2810,6 +2866,7 @@ class CpsTreeAutocompleteComponent extends CpsTreeDropdownBaseComponent {
|
|
|
2810
2866
|
this.control = control;
|
|
2811
2867
|
this.cdRef = cdRef;
|
|
2812
2868
|
this.emptyMessage = 'No results found';
|
|
2869
|
+
this.appearance = 'outlined';
|
|
2813
2870
|
this.inputText = '';
|
|
2814
2871
|
this.backspaceClickedOnce = false;
|
|
2815
2872
|
this.activeSingle = false;
|
|
@@ -2995,7 +3052,7 @@ class CpsTreeAutocompleteComponent extends CpsTreeDropdownBaseComponent {
|
|
|
2995
3052
|
}
|
|
2996
3053
|
}
|
|
2997
3054
|
CpsTreeAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2998
|
-
CpsTreeAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage" }, usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
3055
|
+
CpsTreeAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance" }, usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-text-lightest)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
2999
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
|
|
3000
3057
|
type: Component,
|
|
3001
3058
|
args: [{ standalone: true, imports: [
|
|
@@ -3007,11 +3064,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3007
3064
|
CpsProgressLinearComponent,
|
|
3008
3065
|
CpsInfoCircleComponent,
|
|
3009
3066
|
CpsMenuComponent
|
|
3010
|
-
], selector: 'cps-tree-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
3067
|
+
], selector: 'cps-tree-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer>\n <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n <label>{{ label }}</label>\n <cps-info-circle\n *ngIf=\"infoTooltip\"\n class=\"cps-treeautocomplete-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n </div>\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (click)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n <span\n class=\"cps-treeautocomplete-box-chevron\"\n (click)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span\n *ngIf=\"multiple\"\n class=\"cps-treeautocomplete-option-check\">\n </span>\n <span\n class=\"cps-treeautocomplete-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.label }}</span\n >\n </span>\n <span\n class=\"cps-treeautocomplete-option-info\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ node.info }}</span\n >\n </span>\n </ng-template>\n </p-tree>\n </div>\n </cps-menu>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-text-lightest)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;color:var(--cps-color-text-dark);padding:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
|
|
3011
3068
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
3012
3069
|
type: Optional
|
|
3013
3070
|
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { emptyMessage: [{
|
|
3014
3071
|
type: Input
|
|
3072
|
+
}], appearance: [{
|
|
3073
|
+
type: Input
|
|
3015
3074
|
}] } });
|
|
3016
3075
|
|
|
3017
3076
|
class CpsProgressCircularComponent {
|
|
@@ -3795,7 +3854,7 @@ CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
3795
3854
|
// eslint-disable-next-line no-use-before-define
|
|
3796
3855
|
deps: [CpsTableComponent]
|
|
3797
3856
|
}
|
|
3798
|
-
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }], ngImport: i0, template: "<p-table\n #primengTable\n withUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [loading]=\"loading\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [showInitialSortBadge]=\"false\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div>{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-remove-btn\">\n <cps-button\n label=\"Remove\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggle && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n color=\"prepared-lighten1\"\n (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n <cps-icon\n icon=\"export\"\n size=\"normal\"\n color=\"prepared\"\n (click)=\"exportMenu.toggle($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n pTemplate=\"body\"\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-dark);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-remove-btn{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter cps-input .cps-input-container .cps-input-wrap input{line-height:1;border:none;border-bottom:1px solid var(--cps-color-text-lightest);border-radius:0}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[withUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsColSortable]", inputs: ["cpsColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3857
|
+
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }], ngImport: i0, template: "<p-table\n #primengTable\n withUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [loading]=\"loading\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [showInitialSortBadge]=\"false\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div>{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-remove-btn\">\n <cps-button\n label=\"Remove\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggle && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n color=\"prepared-lighten1\"\n (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n <cps-icon\n icon=\"export\"\n size=\"normal\"\n color=\"prepared\"\n (click)=\"exportMenu.toggle($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n pTemplate=\"body\"\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-dark);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-remove-btn{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[withUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsColSortable]", inputs: ["cpsColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3799
3858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, decorators: [{
|
|
3800
3859
|
type: Component,
|
|
3801
3860
|
args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
@@ -3819,7 +3878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3819
3878
|
// eslint-disable-next-line no-use-before-define
|
|
3820
3879
|
deps: [CpsTableComponent]
|
|
3821
3880
|
}
|
|
3822
|
-
], template: "<p-table\n #primengTable\n withUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [loading]=\"loading\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [showInitialSortBadge]=\"false\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div>{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-remove-btn\">\n <cps-button\n label=\"Remove\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggle && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n color=\"prepared-lighten1\"\n (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n <cps-icon\n icon=\"export\"\n size=\"normal\"\n color=\"prepared\"\n (click)=\"exportMenu.toggle($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n pTemplate=\"body\"\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-dark);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-remove-btn{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter cps-input .cps-input-container .cps-input-wrap input{line-height:1;border:none;border-bottom:1px solid var(--cps-color-text-lightest);border-radius:0}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
3881
|
+
], template: "<p-table\n #primengTable\n withUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [loading]=\"loading\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [showInitialSortBadge]=\"false\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n (onPage)=\"onPageChange($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n <ng-container *ngIf=\"toolbarTemplate\">\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!toolbarTemplate\">\n <div class=\"cps-table-tbar-left\">\n <div>{{ toolbarTitle }}</div>\n <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n <cps-input\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n </div>\n <div class=\"cps-table-tbar-right\">\n <div\n *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n class=\"cps-table-tbar-remove-btn\">\n <cps-button\n label=\"Remove\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n color=\"prepared\"\n type=\"outlined\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n <div\n *ngIf=\"showColumnsToggle && columns.length > 0\"\n class=\"cps-table-tbar-coltoggle-btn\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n color=\"prepared-lighten1\"\n (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"selectedColumns.length === columns.length\"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n <span class=\"cps-table-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n <div\n *ngFor=\"let col of columns\"\n class=\"cps-table-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-table-coltoggle-menu-item-left\">\n <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n <span class=\"cps-table-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n </div>\n </cps-menu>\n </div>\n <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n <cps-icon\n icon=\"export\"\n size=\"normal\"\n color=\"prepared\"\n (click)=\"exportMenu.toggle($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n </div>\n </ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-template>\n\n <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n <tr>\n <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n <th style=\"width: 4rem\" *ngIf=\"selectable\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns,\n }\n \"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n <ng-container *ngIf=\"sortable\">\n <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n <ng-container *ngIf=\"!sortable\">\n <th *ngFor=\"let col of columns\">\n {{ col[colHeaderName] }}\n </th>\n </ng-container>\n </ng-container>\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n *ngIf=\"showRowMenu\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns=\"columns\"\n let-item\n let-rowIndex=\"rowIndex\"\n let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"rowIndex\"\n [ngClass]=\"{\n 'cps-table-row-selected': selectable && primengTable.isSelected(item)\n }\">\n <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n <div\n class=\"cps-table-row-chevron\"\n [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"\n [pRowToggler]=\"item\">\n </cps-icon>\n </div>\n </td>\n <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td>\n <td *ngIf=\"selectable\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"bodyTemplate\">\n <ng-container\n pTemplate=\"body\"\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!bodyTemplate\">\n <ng-container *ngIf=\"columns.length > 0\">\n <td *ngFor=\"let col of columns\">\n {{ rowData[col[colFieldName]] }}\n </td>\n </ng-container>\n </ng-container>\n <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n <tr class=\"cps-table-row-expanded-content\">\n <td colspan=\"100\">\n <ng-container\n *ngTemplateOutlet=\"\n rowExpansionTemplate;\n context: {\n $implicit: item\n }\n \"></ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-dark);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-remove-btn{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:#f1ebed!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:#f8f4f5}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
3823
3882
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
3824
3883
|
type: Input
|
|
3825
3884
|
}], columns: [{
|
|
@@ -3968,6 +4027,7 @@ class CpsDatepickerComponent {
|
|
|
3968
4027
|
this.infoTooltipMaxWidth = '100%';
|
|
3969
4028
|
this.infoTooltipPersistent = false;
|
|
3970
4029
|
this.infoTooltipPosition = 'top';
|
|
4030
|
+
this.appearance = 'outlined';
|
|
3971
4031
|
this.valueChanged = new EventEmitter();
|
|
3972
4032
|
this.stringDate = '';
|
|
3973
4033
|
this.isOpened = false;
|
|
@@ -4170,7 +4230,7 @@ class CpsDatepickerComponent {
|
|
|
4170
4230
|
}
|
|
4171
4231
|
}
|
|
4172
4232
|
CpsDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4173
|
-
CpsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-element.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding-top:.5rem;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
4233
|
+
CpsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [appearance]=\"appearance\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-element.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding-top:.5rem;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] });
|
|
4174
4234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
|
|
4175
4235
|
type: Component,
|
|
4176
4236
|
args: [{ standalone: true, imports: [
|
|
@@ -4179,7 +4239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4179
4239
|
CommonModule,
|
|
4180
4240
|
FormsModule,
|
|
4181
4241
|
CpsMenuComponent
|
|
4182
|
-
], selector: 'cps-datepicker', template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-element.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding-top:.5rem;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
|
|
4242
|
+
], selector: 'cps-datepicker', template: "<div\n class=\"cps-datepicker\"\n [ngStyle]=\"{ width: cvtWidth }\"\n [class.focused]=\"isOpened\">\n <cps-input\n #datepickerInput\n [disabled]=\"disabled\"\n [value]=\"stringDate\"\n [label]=\"label\"\n prefixIcon=\"datepicker\"\n [placeholder]=\"placeholder\"\n (prefixIconClicked)=\"onClickCalendarIcon()\"\n [prefixIconClickable]=\"true\"\n (focused)=\"onInputFocus()\"\n (valueChanged)=\"onInputValueChanged($event)\"\n [clearable]=\"clearable\"\n (blurred)=\"onInputBlur()\"\n (cleared)=\"onInputClear()\"\n (enterClicked)=\"onInputEnterClicked()\"\n [width]=\"width\"\n [hint]=\"hint\"\n [hideDetails]=\"hideDetails\"\n [infoTooltip]=\"infoTooltip\"\n [infoTooltipClass]=\"infoTooltipClass\"\n [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [infoTooltipPersistent]=\"infoTooltipPersistent\"\n [persistentClear]=\"persistentClear\"\n [appearance]=\"appearance\"\n [error]=\"error\"></cps-input>\n <cps-menu\n #calendarMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n (contentClicked)=\"onCalendarContentClick()\"\n [focusOnShow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-datepicker-calendar-menu\">\n <div class=\"cps-datepicker-calendar\">\n <p-calendar\n [(ngModel)]=\"value\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n [inline]=\"true\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\">\n </p-calendar>\n </div>\n </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-element.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding-top:.5rem;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:#f8f4f5}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
|
|
4183
4243
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
4184
4244
|
type: Self
|
|
4185
4245
|
}, {
|
|
@@ -4214,6 +4274,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4214
4274
|
type: Input
|
|
4215
4275
|
}], infoTooltipPosition: [{
|
|
4216
4276
|
type: Input
|
|
4277
|
+
}], appearance: [{
|
|
4278
|
+
type: Input
|
|
4217
4279
|
}], minDate: [{
|
|
4218
4280
|
type: Input
|
|
4219
4281
|
}], maxDate: [{
|
|
@@ -4398,7 +4460,7 @@ class TableColumnFilterConstraintComponent {
|
|
|
4398
4460
|
}
|
|
4399
4461
|
}
|
|
4400
4462
|
TableColumnFilterConstraintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$2.Table }], target: i0.ɵɵFactoryTarget.Component });
|
|
4401
|
-
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", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, 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 class=\"cps-table-col-filter-constraint-boolean\">\n <cps-button-toggle\n *ngSwitchCase=\"'boolean'\"\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 <cps-autocomplete\n class=\"cps-table-col-filter-category-autocomplete\"\n *ngSwitchCase=\"'category'\"\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]=\"true\"></cps-autocomplete>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-boolean{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.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", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "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", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }] });
|
|
4463
|
+
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", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, 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 class=\"cps-table-col-filter-constraint-boolean\">\n <cps-button-toggle\n *ngSwitchCase=\"'boolean'\"\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 <cps-autocomplete\n class=\"cps-table-col-filter-category-autocomplete\"\n *ngSwitchCase=\"'category'\"\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]=\"true\"></cps-autocomplete>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-boolean{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.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", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "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", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
4402
4464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
|
|
4403
4465
|
type: Component,
|
|
4404
4466
|
args: [{ selector: 'table-column-filter-constraint', standalone: true, imports: [
|
|
@@ -4604,7 +4666,7 @@ class TableColumnFilterComponent {
|
|
|
4604
4666
|
}
|
|
4605
4667
|
}
|
|
4606
4668
|
TableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Table }], target: i0.ɵɵFactoryTarget.Component });
|
|
4607
|
-
TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", showClearButton: "showClearButton", showApplyButton: "showApplyButton", hideOnClear: "hideOnClear", maxConstraints: "maxConstraints", categoryOptions: "categoryOptions", placeholder: "placeholder" }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && matchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"matchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n [type]=\"type\"\n [field]=\"field\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n icon=\"filter-funnel\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': hasFilter()\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:12px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "placeholder", "hasApplyButton"] }] });
|
|
4669
|
+
TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", showClearButton: "showClearButton", showApplyButton: "showApplyButton", hideOnClear: "hideOnClear", maxConstraints: "maxConstraints", categoryOptions: "categoryOptions", placeholder: "placeholder" }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && matchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"matchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n [type]=\"type\"\n [field]=\"field\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n icon=\"filter-funnel\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': hasFilter()\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:12px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "placeholder", "hasApplyButton"] }] });
|
|
4608
4670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
|
|
4609
4671
|
type: Component,
|
|
4610
4672
|
args: [{ selector: 'table-column-filter', standalone: true, imports: [
|
|
@@ -4863,7 +4925,7 @@ class CpsPaginatorComponent {
|
|
|
4863
4925
|
}
|
|
4864
4926
|
}
|
|
4865
4927
|
CpsPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4866
|
-
CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor" }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<p-paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"first = 0\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "value"], outputs: ["valueChanged"] }] });
|
|
4928
|
+
CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor" }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<p-paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"first = 0\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }] });
|
|
4867
4929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
|
|
4868
4930
|
type: Component,
|
|
4869
4931
|
args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"first = 0\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
|
|
@@ -4943,6 +5005,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4943
5005
|
type: Output
|
|
4944
5006
|
}] } });
|
|
4945
5007
|
|
|
5008
|
+
class CpsSidebarMenuComponent {
|
|
5009
|
+
// eslint-disable-next-line no-useless-constructor
|
|
5010
|
+
constructor(_router) {
|
|
5011
|
+
this._router = _router;
|
|
5012
|
+
this.items = [];
|
|
5013
|
+
this.expanded = true;
|
|
5014
|
+
this.height = '100%';
|
|
5015
|
+
this.showLabel = true;
|
|
5016
|
+
}
|
|
5017
|
+
ngOnInit() {
|
|
5018
|
+
this.height = convertSize(this.height);
|
|
5019
|
+
this.showLabel = this.expanded;
|
|
5020
|
+
}
|
|
5021
|
+
toggleMenu(event, menu) {
|
|
5022
|
+
const isVisible = menu.isVisible();
|
|
5023
|
+
this.allMenus?.forEach((m) => m.hide());
|
|
5024
|
+
if (!isVisible)
|
|
5025
|
+
menu.toggle(event, event.currentTarget, 'tr');
|
|
5026
|
+
}
|
|
5027
|
+
isActive(item) {
|
|
5028
|
+
if (!item.items)
|
|
5029
|
+
return false;
|
|
5030
|
+
const urls = item.items.map((i) => i.url);
|
|
5031
|
+
return urls.includes(this._router.url);
|
|
5032
|
+
}
|
|
5033
|
+
toggleSidebar() {
|
|
5034
|
+
this.expanded = !this.expanded;
|
|
5035
|
+
if (!this.expanded)
|
|
5036
|
+
this.showLabel = false;
|
|
5037
|
+
else
|
|
5038
|
+
setTimeout(() => {
|
|
5039
|
+
this.showLabel = this.expanded;
|
|
5040
|
+
}, 200);
|
|
5041
|
+
}
|
|
5042
|
+
}
|
|
5043
|
+
CpsSidebarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
5044
|
+
CpsSidebarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: "items", expanded: "expanded", height: "height" }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-sidebar-menu\"\n [style.height]=\"height\"\n [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !expanded }\">\n <ng-container *ngFor=\"let item of items\">\n <a\n *ngIf=\"item.url\"\n class=\"cps-sidebar-menu-item\"\n [routerLink]=\"[item.url]\"\n routerLinkActive=\"active\"\n #rla=\"routerLinkActive\"\n [ngClass]=\"{ active: rla.isActive, disabled: item.disabled }\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n <span *ngIf=\"showLabel\" class=\"cps-sidebar-menu-item-label\">\n {{ item.title }}\n </span>\n </a>\n <ng-container *ngIf=\"!item.url\">\n <cps-menu\n #popupMenu\n [items]=\"item.items || []\"\n [header]=\"item.title\"\n showTransitionOptions=\"0s\"\n hideTransitionOptions=\"0s\"\n [withArrow]=\"false\">\n </cps-menu>\n <div\n (click)=\"toggleMenu($event, popupMenu)\"\n class=\"cps-sidebar-menu-item menu-trigger\"\n [ngClass]=\"{\n active: isActive(item),\n 'menu-open': popupMenu.isVisible(),\n disabled: item.disabled\n }\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n <span *ngIf=\"showLabel\" class=\"cps-sidebar-menu-item-label\">\n {{ item.title }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{margin-top:6px;font-weight:600;font-size:11px;line-height:13px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:#f8f4f5;color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:#f1eaec}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:#f1eaec;color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
5045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSidebarMenuComponent, decorators: [{
|
|
5046
|
+
type: Component,
|
|
5047
|
+
args: [{ selector: 'cps-sidebar-menu', standalone: true, imports: [CommonModule, CpsMenuComponent, CpsIconComponent, RouterModule], template: "<div\n class=\"cps-sidebar-menu\"\n [style.height]=\"height\"\n [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !expanded }\">\n <ng-container *ngFor=\"let item of items\">\n <a\n *ngIf=\"item.url\"\n class=\"cps-sidebar-menu-item\"\n [routerLink]=\"[item.url]\"\n routerLinkActive=\"active\"\n #rla=\"routerLinkActive\"\n [ngClass]=\"{ active: rla.isActive, disabled: item.disabled }\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n <span *ngIf=\"showLabel\" class=\"cps-sidebar-menu-item-label\">\n {{ item.title }}\n </span>\n </a>\n <ng-container *ngIf=\"!item.url\">\n <cps-menu\n #popupMenu\n [items]=\"item.items || []\"\n [header]=\"item.title\"\n showTransitionOptions=\"0s\"\n hideTransitionOptions=\"0s\"\n [withArrow]=\"false\">\n </cps-menu>\n <div\n (click)=\"toggleMenu($event, popupMenu)\"\n class=\"cps-sidebar-menu-item menu-trigger\"\n [ngClass]=\"{\n active: isActive(item),\n 'menu-open': popupMenu.isVisible(),\n disabled: item.disabled\n }\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n <span *ngIf=\"showLabel\" class=\"cps-sidebar-menu-item-label\">\n {{ item.title }}\n </span>\n </div>\n </ng-container>\n </ng-container>\n <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{margin-top:6px;font-weight:600;font-size:11px;line-height:13px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:#f8f4f5;color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:#f1eaec}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:#f1eaec;color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\n"] }]
|
|
5048
|
+
}], ctorParameters: function () { return [{ type: i1$4.Router }]; }, propDecorators: { items: [{
|
|
5049
|
+
type: Input
|
|
5050
|
+
}], expanded: [{
|
|
5051
|
+
type: Input
|
|
5052
|
+
}], height: [{
|
|
5053
|
+
type: Input
|
|
5054
|
+
}], allMenus: [{
|
|
5055
|
+
type: ViewChildren,
|
|
5056
|
+
args: ['popupMenu']
|
|
5057
|
+
}] } });
|
|
5058
|
+
|
|
4946
5059
|
class CpsTextareaComponent {
|
|
4947
5060
|
set value(value) {
|
|
4948
5061
|
this._value = value;
|
|
@@ -5359,5 +5472,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5359
5472
|
* Generated bundle index. Do not edit.
|
|
5360
5473
|
*/
|
|
5361
5474
|
|
|
5362
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
|
|
5475
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
|
|
5363
5476
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|