cps-ui-kit 21.1.0 → 21.3.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/fesm2022/cps-ui-kit.mjs +415 -248
- package/fesm2022/cps-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_colors.scss +2 -1
- package/styles/_mixins.scss +34 -0
- package/types/cps-ui-kit.d.ts +39 -5
package/fesm2022/cps-ui-kit.mjs
CHANGED
|
@@ -298,12 +298,12 @@ class CpsIconComponent {
|
|
|
298
298
|
break;
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
302
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
301
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsIconComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsIconComponent, isStandalone: true, selector: "cps-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "@if (icon) {\n <i\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{\n width: cvtSize || 'none',\n height: cvtSize || 'none',\n display: 'flex'\n }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n </i>\n}\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:.75rem;height:.75rem}:host .cps-icon--small{width:1rem;height:1rem}:host .cps-icon--normal{width:1.5rem;height:1.5rem}:host .cps-icon--large{width:2rem;height:2rem}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
303
303
|
}
|
|
304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsIconComponent, decorators: [{
|
|
305
305
|
type: Component,
|
|
306
|
-
args: [{ imports: [CommonModule], selector: 'cps-icon', template: "@if (icon) {\n <i\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{\n width: cvtSize || 'none',\n height: cvtSize || 'none',\n display: 'flex'\n }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n </i>\n}\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width
|
|
306
|
+
args: [{ imports: [CommonModule], selector: 'cps-icon', template: "@if (icon) {\n <i\n [ngClass]=\"classesList\"\n [style.color]=\"iconColor\"\n [ngStyle]=\"{\n width: cvtSize || 'none',\n height: cvtSize || 'none',\n display: 'flex'\n }\">\n <svg>\n <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n </svg>\n </i>\n}\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:.75rem;height:.75rem}:host .cps-icon--small{width:1rem;height:1rem}:host .cps-icon--normal{width:1.5rem;height:1.5rem}:host .cps-icon--large{width:2rem;height:2rem}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"] }]
|
|
307
307
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
308
308
|
type: Inject,
|
|
309
309
|
args: [DOCUMENT]
|
|
@@ -361,10 +361,10 @@ class CpsProgressLinearComponent {
|
|
|
361
361
|
this.color = getCSSColor(this.color, this.document);
|
|
362
362
|
this.bgColor = getCSSColor(this.bgColor, this.document);
|
|
363
363
|
}
|
|
364
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
364
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n class=\"cps-progress-linear\"\n [ngStyle]=\"{\n 'max-width': width,\n height: height,\n 'border-radius': radius,\n background: bgColor\n }\">\n <div\n class=\"cps-progress-linear-line inc\"\n [style.background]=\"color\"\n [style.opacity]=\"opacity\"></div>\n <div\n class=\"cps-progress-linear-line dec\"\n [style.background]=\"color\"\n [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
366
366
|
}
|
|
367
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
|
|
368
368
|
type: Component,
|
|
369
369
|
args: [{ imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n class=\"cps-progress-linear\"\n [ngStyle]=\"{\n 'max-width': width,\n height: height,\n 'border-radius': radius,\n background: bgColor\n }\">\n <div\n class=\"cps-progress-linear-line inc\"\n [style.background]=\"color\"\n [style.opacity]=\"opacity\"></div>\n <div\n class=\"cps-progress-linear-line dec\"\n [style.background]=\"color\"\n [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
|
|
370
370
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
@@ -602,10 +602,10 @@ class CpsTooltipDirective {
|
|
|
602
602
|
if (this._popup)
|
|
603
603
|
this._destroyTooltip(event);
|
|
604
604
|
}
|
|
605
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
606
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
606
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass", tooltipOffset: "tooltipOffset" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize($event)" } }, ngImport: i0 }); }
|
|
607
607
|
}
|
|
608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTooltipDirective, decorators: [{
|
|
609
609
|
type: Directive,
|
|
610
610
|
args: [{
|
|
611
611
|
selector: '[cpsTooltip]',
|
|
@@ -692,10 +692,10 @@ class CpsInfoCircleComponent {
|
|
|
692
692
|
*/
|
|
693
693
|
this.tooltipPersistent = false;
|
|
694
694
|
}
|
|
695
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
696
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, ngImport: i0, template: "<cps-icon\n icon=\"info-circle\"\n [size]=\"size\"\n color=\"info\"\n [cpsTooltip]=\"tooltipText\"\n tooltipOpenDelay=\"0\"\n tooltipCloseDelay=\"100\"\n [tooltipPosition]=\"tooltipPosition\"\n [tooltipMaxWidth]=\"tooltipMaxWidth\"\n [tooltipPersistent]=\"tooltipPersistent\"\n [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
|
|
697
697
|
}
|
|
698
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsInfoCircleComponent, decorators: [{
|
|
699
699
|
type: Component,
|
|
700
700
|
args: [{ selector: 'cps-info-circle', imports: [CpsIconComponent, CpsTooltipDirective], template: "<cps-icon\n icon=\"info-circle\"\n [size]=\"size\"\n color=\"info\"\n [cpsTooltip]=\"tooltipText\"\n tooltipOpenDelay=\"0\"\n tooltipCloseDelay=\"100\"\n [tooltipPosition]=\"tooltipPosition\"\n [tooltipMaxWidth]=\"tooltipMaxWidth\"\n [tooltipPersistent]=\"tooltipPersistent\"\n [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"] }]
|
|
701
701
|
}], propDecorators: { size: [{
|
|
@@ -1008,10 +1008,10 @@ class CpsInputComponent {
|
|
|
1008
1008
|
focus() {
|
|
1009
1009
|
this.elementRef?.nativeElement?.querySelector('input')?.focus();
|
|
1010
1010
|
}
|
|
1011
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1012
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", 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", valueToDisplay: "valueToDisplay", 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 @if (label) {\n <div\n class=\"cps-input-label\"\n [ngClass]=\"{ 'cps-input-label-disabled': disabled && !readonly }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\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 @if (!valueToDisplay) {\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n autocomplete=\"off\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (keydown.enter)=\"onInputEnterKeyDown()\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n }\n\n @if (valueToDisplay) {\n <input\n [value]=\"valueToDisplay\"\n [disabled]=\"true\"\n [readonly]=\"true\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\" />\n }\n\n <div class=\"cps-input-prefix\">\n @if (prefixIcon) {\n <span class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [style.cursor]=\"\n prefixIconClickable && !disabled && !readonly\n ? 'pointer'\n : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n }\n\n @if (prefixText) {\n <span class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n }\n </div>\n\n @if (!disabled && !readonly) {\n <div class=\"cps-input-action-btns\">\n @if (clearable) {\n <span\n [style.visibility]=\"\n persistentClear || (!persistentClear && value)\n ? 'visible'\n : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n </span>\n }\n @if (type === 'password') {\n <span\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon\n icon=\"eye\"\n size=\"18px\"\n (click)=\"togglePassword()\"></cps-icon>\n </span>\n }\n </div>\n }\n @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-input-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-input-error\">\n {{ error }}\n </div>\n }\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:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-color-error)!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:var(--cps-color-error)!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:#fff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-line-light);transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:#f7f7f7;pointer-events:none}:host .cps-input-container .cps-input-wrap input[type=password]{font-family:Verdana}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.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;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;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 input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}: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-line-light)!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{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-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.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"] }] }); }
|
|
1011
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1012
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", 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", valueToDisplay: "valueToDisplay", 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 @if (label) {\n <div\n class=\"cps-input-label\"\n [ngClass]=\"{ 'cps-input-label-disabled': disabled && !readonly }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\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 @if (!valueToDisplay) {\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n autocomplete=\"off\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (keydown.enter)=\"onInputEnterKeyDown()\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n }\n\n @if (valueToDisplay) {\n <input\n [value]=\"valueToDisplay\"\n [disabled]=\"true\"\n [readonly]=\"true\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\" />\n }\n\n <div class=\"cps-input-prefix\">\n @if (prefixIcon) {\n <span class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [style.cursor]=\"\n prefixIconClickable && !disabled && !readonly\n ? 'pointer'\n : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n }\n\n @if (prefixText) {\n <span class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n }\n </div>\n\n @if (!disabled && !readonly) {\n <div class=\"cps-input-action-btns\">\n @if (clearable) {\n <span\n [style.visibility]=\"\n persistentClear || (!persistentClear && value)\n ? 'visible'\n : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n </span>\n }\n @if (type === 'password') {\n <span\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon\n icon=\"eye\"\n size=\"18px\"\n (click)=\"togglePassword()\"></cps-icon>\n </span>\n }\n </div>\n }\n @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-input-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-input-error\">\n {{ error }}\n </div>\n }\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:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-color-error)!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:var(--cps-color-error)!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:#fff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-line-light);transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:#f7f7f7;pointer-events:none}:host .cps-input-container .cps-input-wrap input[type=password]{font-family:Verdana}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.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;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;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 input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}: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-line-light)!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{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-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.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"] }] }); }
|
|
1013
1013
|
}
|
|
1014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsInputComponent, decorators: [{
|
|
1015
1015
|
type: Component,
|
|
1016
1016
|
args: [{ imports: [
|
|
1017
1017
|
CommonModule,
|
|
@@ -1124,6 +1124,11 @@ class CpsChipComponent {
|
|
|
1124
1124
|
* @group Props
|
|
1125
1125
|
*/
|
|
1126
1126
|
this.disabled = false;
|
|
1127
|
+
/**
|
|
1128
|
+
* Aria label for the close button.
|
|
1129
|
+
* @group Props
|
|
1130
|
+
*/
|
|
1131
|
+
this.closeButtonAriaLabel = 'Close';
|
|
1127
1132
|
/**
|
|
1128
1133
|
* Callback to invoke on chip close.
|
|
1129
1134
|
* @param {string} string - Chip closed.
|
|
@@ -1152,15 +1157,18 @@ class CpsChipComponent {
|
|
|
1152
1157
|
}
|
|
1153
1158
|
}
|
|
1154
1159
|
onCloseClick(event) {
|
|
1160
|
+
if (this.disabled)
|
|
1161
|
+
return;
|
|
1155
1162
|
event.stopPropagation();
|
|
1163
|
+
event.preventDefault();
|
|
1156
1164
|
this.closed.emit(this.label);
|
|
1157
1165
|
}
|
|
1158
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1166
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n @if (icon) {\n <cps-icon\n class=\"cps-chip-icon\"\n [icon]=\"icon\"\n [color]=\"iconColor\"></cps-icon>\n }\n <span class=\"cps-chip-label\">{{ label }}</span>\n @if (closable) {\n <cps-icon\n role=\"button\"\n [tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n [attr.aria-disabled]=\"disabled\"\n class=\"cps-chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n (keydown.space)=\"onCloseClick($event)\">\n </cps-icon>\n }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
|
|
1160
1168
|
}
|
|
1161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsChipComponent, decorators: [{
|
|
1162
1170
|
type: Component,
|
|
1163
|
-
args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\">\n @if (icon) {\n <cps-icon\n class=\"cps-chip-icon\"\n [icon]=\"icon\"\n [color]=\"iconColor\"></cps-icon>\n }\n <span class=\"cps-chip-label\">{{ label }}</span>\n @if (closable) {\n <cps-icon\n class=\"cps-chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"
|
|
1171
|
+
args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n @if (icon) {\n <cps-icon\n class=\"cps-chip-icon\"\n [icon]=\"icon\"\n [color]=\"iconColor\"></cps-icon>\n }\n <span class=\"cps-chip-label\">{{ label }}</span>\n @if (closable) {\n <cps-icon\n role=\"button\"\n [tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n [attr.aria-disabled]=\"disabled\"\n class=\"cps-chip-close-icon\"\n icon=\"close-x\"\n size=\"xsmall\"\n color=\"text-darkest\"\n (click)=\"onCloseClick($event)\"\n (keydown.enter)=\"onCloseClick($event)\"\n (keydown.space)=\"onCloseClick($event)\">\n </cps-icon>\n }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"] }]
|
|
1164
1172
|
}], propDecorators: { label: [{
|
|
1165
1173
|
type: Input
|
|
1166
1174
|
}], icon: [{
|
|
@@ -1173,6 +1181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
1173
1181
|
type: Input
|
|
1174
1182
|
}], disabled: [{
|
|
1175
1183
|
type: Input
|
|
1184
|
+
}], closeButtonAriaLabel: [{
|
|
1185
|
+
type: Input
|
|
1176
1186
|
}], closed: [{
|
|
1177
1187
|
type: Output
|
|
1178
1188
|
}] } });
|
|
@@ -1182,10 +1192,10 @@ class LabelByValuePipe {
|
|
|
1182
1192
|
const option = options.find((opt) => isEqual(opt[valueKey], value));
|
|
1183
1193
|
return option ? option[labelKey] : '';
|
|
1184
1194
|
}
|
|
1185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1186
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
1195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LabelByValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1196
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: LabelByValuePipe, isStandalone: true, name: "labelByValue" }); }
|
|
1187
1197
|
}
|
|
1188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LabelByValuePipe, decorators: [{
|
|
1189
1199
|
type: Pipe,
|
|
1190
1200
|
args: [{ standalone: true, name: 'labelByValue' }]
|
|
1191
1201
|
}] });
|
|
@@ -1204,10 +1214,10 @@ class CombineLabelsPipe {
|
|
|
1204
1214
|
})
|
|
1205
1215
|
.join(', ');
|
|
1206
1216
|
}
|
|
1207
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1208
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
1217
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CombineLabelsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1218
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: CombineLabelsPipe, isStandalone: true, name: "combineLabels" }); }
|
|
1209
1219
|
}
|
|
1210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CombineLabelsPipe, decorators: [{
|
|
1211
1221
|
type: Pipe,
|
|
1212
1222
|
args: [{ standalone: true, name: 'combineLabels' }]
|
|
1213
1223
|
}] });
|
|
@@ -1225,10 +1235,10 @@ class CheckOptionSelectedPipe {
|
|
|
1225
1235
|
? isEqual(option, value)
|
|
1226
1236
|
: isEqual(option[optionValue], value);
|
|
1227
1237
|
}
|
|
1228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1229
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
1238
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1239
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: CheckOptionSelectedPipe, isStandalone: true, name: "checkOptionSelected" }); }
|
|
1230
1240
|
}
|
|
1231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CheckOptionSelectedPipe, decorators: [{
|
|
1232
1242
|
type: Pipe,
|
|
1233
1243
|
args: [{ standalone: true, name: 'checkOptionSelected' }]
|
|
1234
1244
|
}] });
|
|
@@ -1262,10 +1272,10 @@ class CpsProgressCircularComponent {
|
|
|
1262
1272
|
this.strokeWidth = convertSize(this.strokeWidth);
|
|
1263
1273
|
this.color = getCSSColor(this.color, this.document);
|
|
1264
1274
|
}
|
|
1265
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
1275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressCircularComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsProgressCircularComponent, isStandalone: true, selector: "cps-progress-circular", inputs: { diameter: "diameter", strokeWidth: "strokeWidth", color: "color" }, ngImport: i0, template: "<div\n class=\"cps-progress-circular\"\n [style.width]=\"diameter\"\n [style.border]=\"strokeWidth + ' solid ' + color\"></div>\n", styles: [":host{display:inline-block}:host .cps-progress-circular{box-sizing:border-box;aspect-ratio:1;border-radius:50%;border-right-color:transparent!important;border-bottom:unset!important;border-bottom-right-radius:unset;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"] }); }
|
|
1267
1277
|
}
|
|
1268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
|
|
1269
1279
|
type: Component,
|
|
1270
1280
|
args: [{ imports: [], selector: 'cps-progress-circular', template: "<div\n class=\"cps-progress-circular\"\n [style.width]=\"diameter\"\n [style.border]=\"strokeWidth + ' solid ' + color\"></div>\n", styles: [":host{display:inline-block}:host .cps-progress-circular{box-sizing:border-box;aspect-ratio:1;border-radius:50%;border-right-color:transparent!important;border-bottom:unset!important;border-bottom-right-radius:unset;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"] }]
|
|
1271
1281
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
@@ -1758,8 +1768,8 @@ class CpsMenuComponent {
|
|
|
1758
1768
|
ngOnDestroy() {
|
|
1759
1769
|
this._destroy();
|
|
1760
1770
|
}
|
|
1761
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsMenuComponent, isStandalone: true, selector: "cps-menu", inputs: { header: "header", items: "items", withArrow: "withArrow", compressed: "compressed", focusOnShow: "focusOnShow", persistent: "persistent", containerClass: "containerClass", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { menuShown: "menuShown", menuHidden: "menuHidden", beforeMenuHidden: "beforeMenuHidden", contentClicked: "contentClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (render) {\n <div\n class=\"cps-menu-container\"\n [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n [class]=\"containerClass\"\n (mousedown)=\"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 (mousedown)=\"onContentClick()\">\n @if (items.length < 1) {\n <ng-content></ng-content>\n }\n @if (items.length > 0) {\n <div\n class=\"cps-menu-content\"\n [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n @if (header && !compressed) {\n <div class=\"cps-menu-header\">\n {{ header }}\n </div>\n }\n @for (item of items; track item; let i = $index) {\n @if (!item.url) {\n <a\n (click)=\"onItemClick($event, item)\"\n [ngClass]=\"itemsClasses[i]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </a>\n }\n @if (item.url && item.url.startsWith('/')) {\n <a\n (click)=\"onItemClick($event, item)\"\n [routerLink]=\"item.url\"\n [target]=\"item.target\"\n [ngClass]=\"itemsClasses[i]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </a>\n }\n @if (item.url && !item.url.startsWith('/')) {\n <a\n (click)=\"onItemClick($event, item)\"\n [href]=\"item.url\"\n [attr.target]=\"item.target\"\n [ngClass]=\"itemsClasses[i]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </a>\n }\n }\n </div>\n }\n </div>\n </div>\n}\n\n<ng-template #itemTemplate let-item=\"item\">\n @if (!item.loading) {\n @if (withIcons) {\n <div class=\"cps-menu-item-icon\">\n @if (item.icon) {\n <cps-icon\n [icon]=\"item.icon\"\n [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n }\n </div>\n }\n <div class=\"cps-menu-item-content\">\n <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n @if (item.desc && !compressed) {\n <span class=\"cps-menu-item-content-desc\">{{ item.desc }}</span>\n }\n </div>\n } @else {\n <span class=\"cps-menu-item-spinner\">\n <cps-progress-circular\n [strokeWidth]=\"2\"\n [color]=\"compressed ? 'prepared' : 'calm'\"\n [diameter]=\"16\">\n </cps-progress-circular>\n </span>\n }\n</ng-template>\n", styles: [".cps-menu-container{background:#fff;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;-ms-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-spinner{width:100%;display:flex;align-items:center;justify-content:center}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-active)}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
|
|
1771
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", 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.PrimeNG }, { token: i4.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsMenuComponent, isStandalone: true, selector: "cps-menu", inputs: { header: "header", items: "items", withArrow: "withArrow", compressed: "compressed", focusOnShow: "focusOnShow", persistent: "persistent", containerClass: "containerClass", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { menuShown: "menuShown", menuHidden: "menuHidden", beforeMenuHidden: "beforeMenuHidden", contentClicked: "contentClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (render) {\n <div\n class=\"cps-menu-container\"\n [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n [class]=\"containerClass\"\n (mousedown)=\"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 (mousedown)=\"onContentClick()\">\n @if (items.length < 1) {\n <ng-content></ng-content>\n }\n @if (items.length > 0) {\n <div\n class=\"cps-menu-content\"\n [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n @if (header && !compressed) {\n <div class=\"cps-menu-header\">\n {{ header }}\n </div>\n }\n @for (item of items; track item; let i = $index) {\n @if (!item.url) {\n <a\n (click)=\"onItemClick($event, item)\"\n [ngClass]=\"itemsClasses[i]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </a>\n }\n @if (item.url && item.url.startsWith('/')) {\n <a\n (click)=\"onItemClick($event, item)\"\n [routerLink]=\"item.url\"\n [target]=\"item.target\"\n [ngClass]=\"itemsClasses[i]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </a>\n }\n @if (item.url && !item.url.startsWith('/')) {\n <a\n (click)=\"onItemClick($event, item)\"\n [href]=\"item.url\"\n [attr.target]=\"item.target\"\n [ngClass]=\"itemsClasses[i]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </a>\n }\n }\n </div>\n }\n </div>\n </div>\n}\n\n<ng-template #itemTemplate let-item=\"item\">\n @if (!item.loading) {\n @if (withIcons) {\n <div class=\"cps-menu-item-icon\">\n @if (item.icon) {\n <cps-icon\n [icon]=\"item.icon\"\n [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n }\n </div>\n }\n <div class=\"cps-menu-item-content\">\n <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n @if (item.desc && !compressed) {\n <span class=\"cps-menu-item-content-desc\">{{ item.desc }}</span>\n }\n </div>\n } @else {\n <span class=\"cps-menu-item-spinner\">\n <cps-progress-circular\n [strokeWidth]=\"2\"\n [color]=\"compressed ? 'prepared' : 'calm'\"\n [diameter]=\"16\">\n </cps-progress-circular>\n </span>\n }\n</ng-template>\n", styles: [".cps-menu-container{background:#fff;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;-ms-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-spinner{width:100%;display:flex;align-items:center;justify-content:center}.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:var(--cps-color-highlight-hover)}.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:var(--cps-color-highlight-active)}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
|
|
1763
1773
|
trigger('animation', [
|
|
1764
1774
|
state('void', style({
|
|
1765
1775
|
transform: 'scaleY(0.8)',
|
|
@@ -1778,7 +1788,7 @@ class CpsMenuComponent {
|
|
|
1778
1788
|
])
|
|
1779
1789
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1780
1790
|
}
|
|
1781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsMenuComponent, decorators: [{
|
|
1782
1792
|
type: Component,
|
|
1783
1793
|
args: [{ imports: [
|
|
1784
1794
|
CommonModule,
|
|
@@ -2050,7 +2060,7 @@ class CpsSelectComponent {
|
|
|
2050
2060
|
this.isOpened = false;
|
|
2051
2061
|
this.optionHighlightedIndex = -1;
|
|
2052
2062
|
this.virtualListHeight = 240;
|
|
2053
|
-
this.virtualScrollItemSize =
|
|
2063
|
+
this.virtualScrollItemSize = 44;
|
|
2054
2064
|
this.selectBoxWidth = 0;
|
|
2055
2065
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2056
2066
|
this.onChange = (event) => { };
|
|
@@ -2357,10 +2367,10 @@ class CpsSelectComponent {
|
|
|
2357
2367
|
(typeof this.value === 'string' && this.value.trim() === '') ||
|
|
2358
2368
|
Number.isNaN(this.value));
|
|
2359
2369
|
}
|
|
2360
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2361
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, 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 (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n @if (label) {\n <div class=\"cps-select-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\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 @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if ((!multiple && isEmptyValue()) || (value?.length < 1 && multiple)) {\n <div class=\"cps-select-box-placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n ) {\n <div class=\"cps-select-box-items\">\n @if (!multiple) {\n <span class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value\n | labelByValue: options : optionValue : optionLabel)\n }}</span\n >\n }\n @if (multiple && !chips) {\n <div 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 @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of value; track val) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n }\n </div>\n }\n </div>\n }\n </div>\n <span class=\"cps-select-box-icons\">\n @if (clearable && !disabled) {\n <span\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n }\n @if (showChevron) {\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\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 @if (!virtualScroll) {\n @if (multiple && selectAll && options.length > 1) {\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n @if (multiple) {\n <span class=\"cps-select-options-option-check\"> </span>\n }\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n }\n @for (item of options; track item) {\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n }\n }\n @if (virtualScroll) {\n <p-virtualscroller\n #virtualList\n [items]=\"options\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualscroller>\n }\n </div>\n </cps-menu>\n\n @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-select-hint\">{{ hint }}</div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-select-error\">{{ error }}</div>\n }\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 @if (multiple) {\n <span class=\"cps-select-options-option-check\"> </span>\n }\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] }}\n @if (item[optionIcon]) {\n <cps-icon\n [icon]=\"item[optionIcon]\"\n [color]=\"item[optionIconColor] || 'text-light'\"\n class=\"cps-select-options-option-right-icon\">\n </cps-icon>\n }\n </span>\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-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:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:8px}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i3.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
2370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, 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 (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n @if (label) {\n <div class=\"cps-select-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\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 @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if ((!multiple && isEmptyValue()) || (value?.length < 1 && multiple)) {\n <div class=\"cps-select-box-placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n ) {\n <div class=\"cps-select-box-items\">\n @if (!multiple) {\n <span class=\"single-item\">\n {{\n returnObject\n ? value[optionLabel]\n : (value\n | labelByValue: options : optionValue : optionLabel)\n }}</span\n >\n }\n @if (multiple && !chips) {\n <div 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 @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of value; track val) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n }\n </div>\n }\n </div>\n }\n </div>\n <span class=\"cps-select-box-icons\">\n @if (clearable && !disabled) {\n <span\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-select-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n }\n @if (showChevron) {\n <span class=\"cps-select-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\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 @if (!virtualScroll) {\n @if (multiple && selectAll && options.length > 1) {\n <div\n class=\"cps-select-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n (click)=\"toggleAll()\">\n <span class=\"cps-select-options-option-left\">\n @if (multiple) {\n <span class=\"cps-select-options-option-check\"> </span>\n }\n <span class=\"cps-select-options-option-label\">Select all</span>\n </span>\n </div>\n }\n @for (item of options; track item) {\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n }\n }\n @if (virtualScroll) {\n <p-virtualscroller\n #virtualList\n [items]=\"options\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualscroller>\n }\n </div>\n </cps-menu>\n\n @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"select-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-select-hint\">{{ hint }}</div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-select-error\">{{ error }}</div>\n }\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 @if (multiple) {\n <span class=\"cps-select-options-option-check\"> </span>\n }\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] }}\n @if (item[optionIcon]) {\n <cps-icon\n [icon]=\"item[optionIcon]\"\n [color]=\"item[optionIconColor] || 'text-light'\"\n class=\"cps-select-options-option-right-icon\">\n </cps-icon>\n }\n </span>\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-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:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:8px}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], 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: "ngmodule", type: ScrollerModule }, { kind: "component", type: i3.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
2362
2372
|
}
|
|
2363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSelectComponent, decorators: [{
|
|
2364
2374
|
type: Component,
|
|
2365
2375
|
args: [{ imports: [
|
|
2366
2376
|
CommonModule,
|
|
@@ -3034,10 +3044,10 @@ class CpsBaseTreeDropdownComponent {
|
|
|
3034
3044
|
return key ? this.optionsMap.get(key) : undefined;
|
|
3035
3045
|
}
|
|
3036
3046
|
}
|
|
3037
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
3047
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsBaseTreeDropdownComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsBaseTreeDropdownComponent, isStandalone: false, selector: "ng-component", inputs: { label: "label", hint: "hint", multiple: "multiple", disabled: "disabled", width: "width", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", optionLabel: "optionLabel", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", initialExpandDirectories: "initialExpandDirectories", initialExpandAll: "initialExpandAll", showChevron: "showChevron", options: "options", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "componentContainer", first: true, predicate: ["componentContainer"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "treeList", first: true, predicate: ["treeList"], descendants: true }, { propertyName: "boxEl", first: true, predicate: ["boxEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
|
|
3039
3049
|
}
|
|
3040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsBaseTreeDropdownComponent, decorators: [{
|
|
3041
3051
|
type: Component,
|
|
3042
3052
|
args: [{
|
|
3043
3053
|
template: '',
|
|
@@ -3171,10 +3181,10 @@ class CpsTreeSelectComponent extends CpsBaseTreeDropdownComponent {
|
|
|
3171
3181
|
this.initArrowsNavigaton();
|
|
3172
3182
|
}
|
|
3173
3183
|
}
|
|
3174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3175
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n @if (label) {\n <div class=\"cps-treeselect-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\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 @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n ) {\n <div class=\"cps-treeselect-box-placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n ) {\n <div class=\"cps-treeselect-box-items\">\n @if (!multiple) {\n <span class=\"single-item\"> {{ treeSelection.label }}</span>\n }\n @if (multiple && !chips) {\n <div class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection\n | combineLabels: innerOptions : '' : 'label' : true\n }}\n </span>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of treeSelection; track val) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n }\n </div>\n }\n </div>\n }\n </div>\n <span class=\"cps-treeselect-box-icons\">\n @if (clearable && !disabled) {\n <span\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 }\n @if (showChevron) {\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"innerOptions\"\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 @if (multiple) {\n <span class=\"cps-treeselect-option-check\"> </span>\n }\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 @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-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:var(--cps-color-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{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-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button{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-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-tree-node-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;-ms-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.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", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] }); }
|
|
3184
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3185
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n #componentContainer\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n @if (label) {\n <div class=\"cps-treeselect-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\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 @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n ) {\n <div class=\"cps-treeselect-box-placeholder\">\n {{ placeholder }}\n </div>\n }\n @if (\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n ) {\n <div class=\"cps-treeselect-box-items\">\n @if (!multiple) {\n <span class=\"single-item\"> {{ treeSelection.label }}</span>\n }\n @if (multiple && !chips) {\n <div class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection\n | combineLabels: innerOptions : '' : 'label' : true\n }}\n </span>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of treeSelection; track val) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n }\n </div>\n }\n </div>\n }\n </div>\n <span class=\"cps-treeselect-box-icons\">\n @if (clearable && !disabled) {\n <span\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 }\n @if (showChevron) {\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeselect-options-menu\">\n <div\n class=\"cps-treeselect-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n [value]=\"innerOptions\"\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 @if (multiple) {\n <span class=\"cps-treeselect-option-check\"> </span>\n }\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 @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-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:var(--cps-color-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{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-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button{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-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-tree-node-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;-ms-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.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", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] }); }
|
|
3176
3186
|
}
|
|
3177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
|
|
3178
3188
|
type: Component,
|
|
3179
3189
|
args: [{ imports: [
|
|
3180
3190
|
CommonModule,
|
|
@@ -3195,6 +3205,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
3195
3205
|
type: Input
|
|
3196
3206
|
}] } });
|
|
3197
3207
|
|
|
3208
|
+
let id = 0;
|
|
3209
|
+
const randomPrefix = Math.random().toString(36).slice(2, 8);
|
|
3210
|
+
const generateUniqueId = (prefix = 'cps') => {
|
|
3211
|
+
return `${prefix}-${randomPrefix}-${id++}`;
|
|
3212
|
+
};
|
|
3213
|
+
const getComputedLabel = (context) => {
|
|
3214
|
+
const parts = [];
|
|
3215
|
+
// Always add label
|
|
3216
|
+
if (context.label) {
|
|
3217
|
+
parts.push(context.label.trim().replace(/\.*$/, '.')); // ensure single period
|
|
3218
|
+
}
|
|
3219
|
+
// Add error if exists and not hidden
|
|
3220
|
+
const errorText = context.error || context.externalError;
|
|
3221
|
+
if (errorText && !context.hideDetails) {
|
|
3222
|
+
const cleanedError = errorText.trim().replace(/\.*$/, '');
|
|
3223
|
+
parts.push(`Error: ${cleanedError}.`);
|
|
3224
|
+
}
|
|
3225
|
+
return parts.length > 0 ? parts.join(' ') : null;
|
|
3226
|
+
};
|
|
3227
|
+
|
|
3198
3228
|
/**
|
|
3199
3229
|
* CpsAutocompleteComponent is an input component that provides real-time suggestions when being typed.
|
|
3200
3230
|
* @group Components
|
|
@@ -3213,6 +3243,12 @@ class CpsAutocompleteComponent {
|
|
|
3213
3243
|
*/
|
|
3214
3244
|
set options(opts) {
|
|
3215
3245
|
this._options = opts || [];
|
|
3246
|
+
this._optionIds = new WeakMap();
|
|
3247
|
+
this._options.forEach((opt, index) => {
|
|
3248
|
+
if (opt && typeof opt === 'object') {
|
|
3249
|
+
this._optionIds.set(opt, this._buildOptionId(index));
|
|
3250
|
+
}
|
|
3251
|
+
});
|
|
3216
3252
|
}
|
|
3217
3253
|
get options() {
|
|
3218
3254
|
return this._options;
|
|
@@ -3227,6 +3263,11 @@ class CpsAutocompleteComponent {
|
|
|
3227
3263
|
* @group Props
|
|
3228
3264
|
*/
|
|
3229
3265
|
this.label = '';
|
|
3266
|
+
/**
|
|
3267
|
+
* Aria label for the autocomplete component, used for accessibility, it takes precedence over label.
|
|
3268
|
+
* @group Props
|
|
3269
|
+
*/
|
|
3270
|
+
this.ariaLabel = '';
|
|
3230
3271
|
/**
|
|
3231
3272
|
* Placeholder text.
|
|
3232
3273
|
* @group Props
|
|
@@ -3459,6 +3500,7 @@ class CpsAutocompleteComponent {
|
|
|
3459
3500
|
this.error = '';
|
|
3460
3501
|
this.cvtWidth = '';
|
|
3461
3502
|
this.isOpened = false;
|
|
3503
|
+
this.isActive = false;
|
|
3462
3504
|
this.inputText = '';
|
|
3463
3505
|
this.inputTextDebounced = '';
|
|
3464
3506
|
this.filteredOptions = [];
|
|
@@ -3466,12 +3508,16 @@ class CpsAutocompleteComponent {
|
|
|
3466
3508
|
this.activeSingle = false;
|
|
3467
3509
|
this.optionHighlightedIndex = -1;
|
|
3468
3510
|
this.virtualListHeight = 240;
|
|
3469
|
-
this.virtualScrollItemSize =
|
|
3511
|
+
this.virtualScrollItemSize = 44;
|
|
3470
3512
|
this.autocompleteBoxWidth = 0;
|
|
3471
3513
|
this.isTimePickerField = false;
|
|
3514
|
+
this.optionsListId = generateUniqueId('cps-autocomplete-options-list');
|
|
3515
|
+
this.selectAllOptionId = generateUniqueId('cps-autocomplete-option-select-all');
|
|
3516
|
+
this._optionIdPrefix = generateUniqueId('cps-autocomplete-option');
|
|
3472
3517
|
this._inputChangeSubject$ = new Subject();
|
|
3473
3518
|
this._destroy$ = new Subject();
|
|
3474
3519
|
this._options = [];
|
|
3520
|
+
this._optionIds = new WeakMap();
|
|
3475
3521
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3476
3522
|
this.onChange = (event) => { };
|
|
3477
3523
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -3518,6 +3564,9 @@ class CpsAutocompleteComponent {
|
|
|
3518
3564
|
loadChanges.previousValue) {
|
|
3519
3565
|
this._toggleOptions(true);
|
|
3520
3566
|
}
|
|
3567
|
+
if (!this.label && !this.ariaLabel) {
|
|
3568
|
+
console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
|
|
3569
|
+
}
|
|
3521
3570
|
}
|
|
3522
3571
|
ngAfterViewInit() {
|
|
3523
3572
|
this.resizeObserver.observe(this.autocompleteBox.nativeElement);
|
|
@@ -3637,6 +3686,7 @@ class CpsAutocompleteComponent {
|
|
|
3637
3686
|
}
|
|
3638
3687
|
clear(event) {
|
|
3639
3688
|
event?.stopPropagation();
|
|
3689
|
+
event?.preventDefault();
|
|
3640
3690
|
if ((!this.multiple && !this.isEmptyValue()) ||
|
|
3641
3691
|
(this.multiple && this.value?.length > 0)) {
|
|
3642
3692
|
if (this.openOnClear) {
|
|
@@ -3654,20 +3704,26 @@ class CpsAutocompleteComponent {
|
|
|
3654
3704
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3655
3705
|
setDisabledState(disabled) { }
|
|
3656
3706
|
onBlur() {
|
|
3657
|
-
|
|
3658
|
-
|
|
3707
|
+
this.isActive = false;
|
|
3708
|
+
this._confirmInput(this.inputText || '', false);
|
|
3709
|
+
if (this.isOpened) {
|
|
3710
|
+
this._toggleOptions(false);
|
|
3659
3711
|
}
|
|
3660
3712
|
this._checkErrors();
|
|
3661
3713
|
this.blurred.emit();
|
|
3662
3714
|
}
|
|
3663
3715
|
onFocus() {
|
|
3716
|
+
if (!this.disabled) {
|
|
3717
|
+
this.isActive = true;
|
|
3718
|
+
}
|
|
3719
|
+
if (!this.multiple) {
|
|
3720
|
+
this.activeSingle = true;
|
|
3721
|
+
if (!this.inputText)
|
|
3722
|
+
this.inputText = this._getValueLabel();
|
|
3723
|
+
}
|
|
3664
3724
|
this._control?.control?.markAsTouched();
|
|
3665
3725
|
this.focused.emit();
|
|
3666
3726
|
}
|
|
3667
|
-
isActive() {
|
|
3668
|
-
return (this.isOpened ||
|
|
3669
|
-
this.document.activeElement === this.autocompleteInput?.nativeElement);
|
|
3670
|
-
}
|
|
3671
3727
|
onBeforeOptionsHidden(reason) {
|
|
3672
3728
|
if ((this.loading || this.validating) &&
|
|
3673
3729
|
reason !== CpsMenuHideReason.KEYDOWN_ESCAPE) {
|
|
@@ -3711,15 +3767,19 @@ class CpsAutocompleteComponent {
|
|
|
3711
3767
|
idx--;
|
|
3712
3768
|
}
|
|
3713
3769
|
const option = this.filteredOptions[idx];
|
|
3714
|
-
if (this.filteredOptions.length !== this.options.length)
|
|
3770
|
+
if (this.filteredOptions.length !== this.options.length) {
|
|
3715
3771
|
this._dehighlightOption();
|
|
3772
|
+
}
|
|
3716
3773
|
this._clickOption(option);
|
|
3717
3774
|
}
|
|
3718
3775
|
// vertical arrows
|
|
3719
3776
|
else if ([38, 40].includes(code)) {
|
|
3720
|
-
|
|
3721
|
-
|
|
3777
|
+
if (this.virtualScroll) {
|
|
3778
|
+
this._navigateVirtualOptionsByArrows(code === 38);
|
|
3779
|
+
}
|
|
3780
|
+
else {
|
|
3722
3781
|
this._navigateOptionsByArrows(code === 38);
|
|
3782
|
+
}
|
|
3723
3783
|
}
|
|
3724
3784
|
}
|
|
3725
3785
|
onInputKeyDown(event) {
|
|
@@ -3731,6 +3791,12 @@ class CpsAutocompleteComponent {
|
|
|
3731
3791
|
}
|
|
3732
3792
|
// enter
|
|
3733
3793
|
else if (code === 13) {
|
|
3794
|
+
if (!this.isOpened) {
|
|
3795
|
+
event.stopPropagation();
|
|
3796
|
+
event.preventDefault();
|
|
3797
|
+
this._toggleOptions(true);
|
|
3798
|
+
return;
|
|
3799
|
+
}
|
|
3734
3800
|
if (this.optionHighlightedIndex < 0) {
|
|
3735
3801
|
this._confirmInput(event?.target?.value || '', true);
|
|
3736
3802
|
event.stopPropagation();
|
|
@@ -3742,6 +3808,7 @@ class CpsAutocompleteComponent {
|
|
|
3742
3808
|
}
|
|
3743
3809
|
onChevronClick(event) {
|
|
3744
3810
|
event.stopPropagation();
|
|
3811
|
+
event.preventDefault();
|
|
3745
3812
|
if (this.isOpened) {
|
|
3746
3813
|
this._closeAndClear();
|
|
3747
3814
|
}
|
|
@@ -3776,6 +3843,43 @@ class CpsAutocompleteComponent {
|
|
|
3776
3843
|
this.activeSingle = false;
|
|
3777
3844
|
this.recalcVirtualListHeight();
|
|
3778
3845
|
}
|
|
3846
|
+
get computedLabel() {
|
|
3847
|
+
return getComputedLabel({
|
|
3848
|
+
label: this.ariaLabel || this.label,
|
|
3849
|
+
error: this.error,
|
|
3850
|
+
externalError: this.externalError,
|
|
3851
|
+
hideDetails: this.hideDetails
|
|
3852
|
+
});
|
|
3853
|
+
}
|
|
3854
|
+
get isSelectAllVisible() {
|
|
3855
|
+
return (!this.virtualScroll &&
|
|
3856
|
+
!this.loading &&
|
|
3857
|
+
this.multiple &&
|
|
3858
|
+
this.selectAll &&
|
|
3859
|
+
this.filteredOptions.length === this.options.length &&
|
|
3860
|
+
this.options.length > 1);
|
|
3861
|
+
}
|
|
3862
|
+
get optionsAriaSetSize() {
|
|
3863
|
+
return this.filteredOptions.length + (this.isSelectAllVisible ? 1 : 0);
|
|
3864
|
+
}
|
|
3865
|
+
get activeDescendantId() {
|
|
3866
|
+
if (!this.isOpened || this.optionHighlightedIndex < 0) {
|
|
3867
|
+
return null;
|
|
3868
|
+
}
|
|
3869
|
+
return this._getHighlightedOptionId();
|
|
3870
|
+
}
|
|
3871
|
+
getOptionAriaPosInSet(itemIndex) {
|
|
3872
|
+
return itemIndex + 1 + (this.isSelectAllVisible ? 1 : 0);
|
|
3873
|
+
}
|
|
3874
|
+
getOptionId(option, index) {
|
|
3875
|
+
if (option && typeof option === 'object') {
|
|
3876
|
+
return this._optionIds.get(option) || this._buildOptionId(index);
|
|
3877
|
+
}
|
|
3878
|
+
return this._buildOptionId(index);
|
|
3879
|
+
}
|
|
3880
|
+
_buildOptionId(index) {
|
|
3881
|
+
return `${this._optionIdPrefix}-${index}`;
|
|
3882
|
+
}
|
|
3779
3883
|
_getEmptyValue() {
|
|
3780
3884
|
const option = this.options[this.emptyOptionIndex];
|
|
3781
3885
|
return !option
|
|
@@ -3877,22 +3981,24 @@ class CpsAutocompleteComponent {
|
|
|
3877
3981
|
this._toggleOptions(false);
|
|
3878
3982
|
this._dehighlightOption();
|
|
3879
3983
|
}
|
|
3880
|
-
|
|
3881
|
-
|
|
3984
|
+
_dehighlightOption() {
|
|
3985
|
+
this.optionHighlightedIndex = -1;
|
|
3882
3986
|
}
|
|
3883
|
-
|
|
3884
|
-
if (
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3987
|
+
_getHighlightedOptionId() {
|
|
3988
|
+
if (this.optionHighlightedIndex < 0) {
|
|
3989
|
+
return null;
|
|
3990
|
+
}
|
|
3991
|
+
if (this.isSelectAllVisible && this.optionHighlightedIndex === 0) {
|
|
3992
|
+
return this.selectAllOptionId;
|
|
3993
|
+
}
|
|
3994
|
+
const optionIndex = this.optionHighlightedIndex - (this.isSelectAllVisible ? 1 : 0);
|
|
3995
|
+
const activeOption = this.filteredOptions[optionIndex];
|
|
3996
|
+
if (!activeOption) {
|
|
3997
|
+
return null;
|
|
3892
3998
|
}
|
|
3999
|
+
return this.getOptionId(activeOption, optionIndex);
|
|
3893
4000
|
}
|
|
3894
4001
|
_highlightOption(el) {
|
|
3895
|
-
el.classList.add('highlighten');
|
|
3896
4002
|
const parent = el.parentElement;
|
|
3897
4003
|
if (!parent)
|
|
3898
4004
|
return;
|
|
@@ -3908,30 +4014,62 @@ class CpsAutocompleteComponent {
|
|
|
3908
4014
|
_navigateOptionsByArrows(up) {
|
|
3909
4015
|
if (!this.isOpened)
|
|
3910
4016
|
return;
|
|
3911
|
-
|
|
3912
|
-
const len = optionItems.length;
|
|
3913
|
-
if (len < 1)
|
|
4017
|
+
if (this.optionsAriaSetSize < 1)
|
|
3914
4018
|
return;
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
4019
|
+
this.optionHighlightedIndex = this._nextHighlightIndex(up, this.optionsAriaSetSize);
|
|
4020
|
+
const activeId = this._getHighlightedOptionId();
|
|
4021
|
+
if (!activeId)
|
|
3918
4022
|
return;
|
|
4023
|
+
const activeOption = this.optionsList?.nativeElement?.querySelector(`#${activeId}`);
|
|
4024
|
+
if (activeOption) {
|
|
4025
|
+
this._highlightOption(activeOption);
|
|
3919
4026
|
}
|
|
4027
|
+
}
|
|
4028
|
+
_navigateVirtualOptionsByArrows(up) {
|
|
4029
|
+
if (!this.isOpened)
|
|
4030
|
+
return;
|
|
4031
|
+
const len = this.filteredOptions.length;
|
|
4032
|
+
if (len < 1)
|
|
4033
|
+
return;
|
|
4034
|
+
this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
|
|
4035
|
+
this._syncVirtualHighlightedOptionIntoView();
|
|
4036
|
+
}
|
|
4037
|
+
_nextHighlightIndex(up, len) {
|
|
3920
4038
|
if (up) {
|
|
3921
|
-
this.
|
|
3922
|
-
|
|
3923
|
-
this.optionHighlightedIndex
|
|
3924
|
-
? len - 1
|
|
3925
|
-
: this.optionHighlightedIndex - 1;
|
|
3926
|
-
this._highlightOption(optionItems[this.optionHighlightedIndex]);
|
|
4039
|
+
return this.optionHighlightedIndex < 1
|
|
4040
|
+
? len - 1
|
|
4041
|
+
: this.optionHighlightedIndex - 1;
|
|
3927
4042
|
}
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
this.optionHighlightedIndex
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
4043
|
+
return [-1, len - 1].includes(this.optionHighlightedIndex)
|
|
4044
|
+
? 0
|
|
4045
|
+
: this.optionHighlightedIndex + 1;
|
|
4046
|
+
}
|
|
4047
|
+
_syncVirtualHighlightedOptionIntoView() {
|
|
4048
|
+
if (this.optionHighlightedIndex < 0)
|
|
4049
|
+
return;
|
|
4050
|
+
this._scrollVirtualListToIndex(this.optionHighlightedIndex);
|
|
4051
|
+
}
|
|
4052
|
+
_scrollVirtualListToIndex(index) {
|
|
4053
|
+
const scrollerEl = this.optionsList?.nativeElement?.querySelector('.p-virtualscroller');
|
|
4054
|
+
if (!scrollerEl) {
|
|
4055
|
+
this.virtualList?.scrollToIndex(index);
|
|
4056
|
+
return;
|
|
4057
|
+
}
|
|
4058
|
+
const itemTop = index * this.virtualScrollItemSize;
|
|
4059
|
+
const itemBottom = itemTop + this.virtualScrollItemSize;
|
|
4060
|
+
const viewportTop = scrollerEl.scrollTop;
|
|
4061
|
+
const viewportBottom = viewportTop + scrollerEl.clientHeight;
|
|
4062
|
+
let nextTop = viewportTop;
|
|
4063
|
+
if (itemTop < viewportTop) {
|
|
4064
|
+
nextTop = itemTop;
|
|
4065
|
+
}
|
|
4066
|
+
else if (itemBottom > viewportBottom) {
|
|
4067
|
+
nextTop = itemBottom - scrollerEl.clientHeight;
|
|
3934
4068
|
}
|
|
4069
|
+
if (nextTop === viewportTop)
|
|
4070
|
+
return;
|
|
4071
|
+
const maxTop = Math.max(0, scrollerEl.scrollHeight - scrollerEl.clientHeight);
|
|
4072
|
+
scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
|
|
3935
4073
|
}
|
|
3936
4074
|
_confirmInput(searchVal, needFocusInput) {
|
|
3937
4075
|
if (!this.isOpened)
|
|
@@ -3972,7 +4110,7 @@ class CpsAutocompleteComponent {
|
|
|
3972
4110
|
return;
|
|
3973
4111
|
if (this.value?.length) {
|
|
3974
4112
|
if (this.backspaceClickedOnce) {
|
|
3975
|
-
this.updateValue(this.value.
|
|
4113
|
+
this.updateValue(this.value.slice(0, -1));
|
|
3976
4114
|
this.backspaceClickedOnce = false;
|
|
3977
4115
|
}
|
|
3978
4116
|
else
|
|
@@ -3984,10 +4122,10 @@ class CpsAutocompleteComponent {
|
|
|
3984
4122
|
this.focusInput();
|
|
3985
4123
|
}, 0);
|
|
3986
4124
|
}
|
|
3987
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive()\n }\"\n #autocompleteContainer>\n @if (label) {\n <div class=\"cps-autocomplete-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n ) {\n <div class=\"cps-autocomplete-box-items\">\n @if (!multiple) {\n <span class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value\n | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n }\n @if (multiple && !chips) {\n <div class=\"text-group\">\n @for (val of value; track val; let last = $last) {\n <div\n class=\"text-group-item\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n }\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of value; track val; let last = $last) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n }\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n }\n </div>\n } @else {\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n }\n <span class=\"cps-autocomplete-box-icons\">\n @if (clearable && !disabled) {\n <span\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) ||\n (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n }\n @if (showChevron) {\n <span\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n @if (loading && showLoadingMessage) {\n <div class=\"cps-autocomplete-options-loading\">\n {{ loadingMessage }}\n </div>\n }\n @if (\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n ) {\n <div class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n }\n @if (!virtualScroll && !loading) {\n @if (\n multiple &&\n selectAll &&\n filteredOptions.length === options.length &&\n options.length > 1\n ) {\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n }\n @for (item of filteredOptions; track item) {\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n }\n }\n @if (virtualScroll && !loading) {\n <p-virtualscroller\n #virtualList\n [items]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualscroller>\n }\n </div>\n </cps-menu>\n @if (loading || validating) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !externalError && !hideDetails) {\n <div class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n }\n @if ((error || externalError) && !hideDetails) {\n <div class=\"cps-autocomplete-error\">\n {{ error || externalError }}\n </div>\n }\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span\n data-testid=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i3.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
4125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive,\n opened: isOpened\n }\"\n #autocompleteContainer>\n @if (label) {\n <div class=\"cps-autocomplete-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.active]=\"isActive\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n ) {\n <div class=\"cps-autocomplete-box-items\">\n @if (!multiple) {\n <span class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value\n | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? { opacity: '1' } : null\n }\n \">\n </ng-container>\n </span>\n }\n @if (multiple && !chips) {\n <div class=\"cps-autocomplete-multi-selection-wrapper\">\n <div\n class=\"text-group\"\n role=\"list\"\n tabindex=\"-1\"\n aria-label=\"Selected options\">\n @for (val of value; track val; let last = $last) {\n <div\n class=\"text-group-item\"\n role=\"listitem\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue\n : options\n : optionValue\n : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n }\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"cps-autocomplete-multi-selection-wrapper\">\n <div\n class=\"chips-group\"\n role=\"list\"\n tabindex=\"-1\"\n aria-label=\"Selected options\">\n @for (val of value; track val; let last = $last) {\n <cps-chip\n role=\"listitem\"\n closeButtonAriaLabel=\"Remove\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n }\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n }\n </div>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n }\n <span class=\"cps-autocomplete-box-icons\">\n @if (clearable && !disabled) {\n <span\n role=\"button\"\n (click)=\"clear($event)\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n aria-label=\"Clear selection\"\n [tabindex]=\"disabled ? -1 : 0\"\n class=\"cps-autocomplete-box-clear-icon\"\n [ngClass]=\"{\n 'cps-autocomplete-box-clear-icon-hidden':\n !persistentClear &&\n (!multiple || !value?.length) &&\n (multiple || isEmptyValue())\n }\">\n <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n </span>\n }\n @if (showChevron && options.length) {\n <span\n class=\"cps-autocomplete-box-chevron\"\n role=\"button\"\n (mousedown)=\"onChevronClick($event)\"\n (keydown.enter)=\"onChevronClick($event)\"\n (keydown.space)=\"onChevronClick($event)\"\n [attr.aria-label]=\"\n isOpened ? 'Collapse options' : 'Expand options'\n \"\n [tabindex]=\"disabled ? -1 : 0\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n role=\"listbox\"\n [id]=\"optionsListId\"\n tabindex=\"-1\"\n aria-readonly=\"false\"\n aria-disabled=\"false\"\n aria-orientation=\"vertical\"\n [attr.aria-multiselectable]=\"!!multiple\"\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n @if (loading && showLoadingMessage) {\n <div\n class=\"cps-autocomplete-options-loading\"\n role=\"option\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n aria-selected=\"false\">\n {{ loadingMessage }}\n </div>\n }\n @if (\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n ) {\n <div\n class=\"cps-autocomplete-options-empty\"\n role=\"option\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n aria-selected=\"false\">\n {{ emptyMessage }}\n </div>\n }\n @if (isSelectAllVisible) {\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [id]=\"selectAllOptionId\"\n role=\"option\"\n tabindex=\"-1\"\n aria-disabled=\"false\"\n [attr.aria-setsize]=\"optionsAriaSetSize\"\n [attr.aria-posinset]=\"1\"\n [attr.aria-selected]=\"value?.length === options.length\"\n [class.allselected]=\"value?.length === options.length\"\n [class.highlighten]=\"optionHighlightedIndex === 0\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n }\n @if (!loading) {\n @if (virtualScroll) {\n <p-virtualscroller\n #virtualList\n [items]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item,\n itemIndex: options.index\n }\n \"></ng-container>\n </ng-template>\n </p-virtualscroller>\n } @else {\n @for (item of filteredOptions; track item; let itemIndex = $index) {\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item,\n itemIndex: itemIndex\n }\n \"></ng-container>\n }\n }\n }\n </div>\n </cps-menu>\n @if (loading || validating) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !externalError && !hideDetails) {\n <div class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n }\n @if ((error || externalError) && !hideDetails) {\n <div class=\"cps-autocomplete-error\">\n {{ error || externalError }}\n </div>\n }\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n type=\"text\"\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [attr.aria-invalid]=\"error || externalError ? true : null\"\n [disabled]=\"disabled\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"optionsListId\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-expanded]=\"isOpened\"\n [ngClass]=\"inputClass\"\n [ngStyle]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n <div\n class=\"cps-autocomplete-options-option\"\n [id]=\"getOptionId(item, itemIndex)\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-setsize]=\"optionsAriaSetSize\"\n [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(item)\"\n [class.highlighten]=\"\n itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n \"\n [attr.aria-selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span\n data-testid=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}: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:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem 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.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;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:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem 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:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}: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-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{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,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-mild);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], 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: "ngmodule", type: ScrollerModule }, { kind: "component", type: i3.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
3989
4127
|
}
|
|
3990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
3991
4129
|
type: Component,
|
|
3992
4130
|
args: [{ imports: [
|
|
3993
4131
|
CommonModule,
|
|
@@ -4000,7 +4138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
4000
4138
|
CheckOptionSelectedPipe,
|
|
4001
4139
|
ScrollerModule,
|
|
4002
4140
|
CpsMenuComponent
|
|
4003
|
-
], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive()\n }\"\n #autocompleteContainer>\n @if (label) {\n <div class=\"cps-autocomplete-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n ) {\n <div class=\"cps-autocomplete-box-items\">\n @if (!multiple) {\n <span class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value\n | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n }\n @if (multiple && !chips) {\n <div class=\"text-group\">\n @for (val of value; track val; let last = $last) {\n <div\n class=\"text-group-item\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n }\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of value; track val; let last = $last) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n }\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n }\n </div>\n } @else {\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n }\n <span class=\"cps-autocomplete-box-icons\">\n @if (clearable && !disabled) {\n <span\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) ||\n (!multiple && !isEmptyValue())))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear($event)\"></cps-icon>\n </span>\n }\n @if (showChevron) {\n <span\n class=\"cps-autocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n @if (loading && showLoadingMessage) {\n <div class=\"cps-autocomplete-options-loading\">\n {{ loadingMessage }}\n </div>\n }\n @if (\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n ) {\n <div class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n }\n @if (!virtualScroll && !loading) {\n @if (\n multiple &&\n selectAll &&\n filteredOptions.length === options.length &&\n options.length > 1\n ) {\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n }\n @for (item of filteredOptions; track item) {\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n }\n }\n @if (virtualScroll && !loading) {\n <p-virtualscroller\n #virtualList\n [items]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item>\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item\n }\n \"></ng-container>\n </ng-template>\n </p-virtualscroller>\n }\n </div>\n </cps-menu>\n @if (loading || validating) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !externalError && !hideDetails) {\n <div class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n }\n @if ((error || externalError) && !hideDetails) {\n <div class=\"cps-autocomplete-error\">\n {{ error || externalError }}\n </div>\n }\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\">\n <div\n class=\"cps-autocomplete-options-option\"\n (click)=\"onOptionClick(item)\"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span\n data-testid=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
|
|
4141
|
+
], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n [ngClass]=\"{\n disabled: disabled,\n error: error || externalError,\n active: isActive,\n opened: isOpened\n }\"\n #autocompleteContainer>\n @if (label) {\n <div class=\"cps-autocomplete-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-autocomplete-container\"\n [class.active]=\"isActive\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div\n class=\"cps-autocomplete-box\"\n #autocompleteBox\n (mousedown)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n ) {\n <div class=\"cps-autocomplete-box-items\">\n @if (!multiple) {\n <span class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value\n | labelByValue: options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? { opacity: '1' } : null\n }\n \">\n </ng-container>\n </span>\n }\n @if (multiple && !chips) {\n <div class=\"cps-autocomplete-multi-selection-wrapper\">\n <div\n class=\"text-group\"\n role=\"list\"\n tabindex=\"-1\"\n aria-label=\"Selected options\">\n @for (val of value; track val; let last = $last) {\n <div\n class=\"text-group-item\"\n role=\"listitem\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue\n : options\n : optionValue\n : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n }\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"cps-autocomplete-multi-selection-wrapper\">\n <div\n class=\"chips-group\"\n role=\"list\"\n tabindex=\"-1\"\n aria-label=\"Selected options\">\n @for (val of value; track val; let last = $last) {\n <cps-chip\n role=\"listitem\"\n closeButtonAriaLabel=\"Remove\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val\n | labelByValue: options : optionValue : optionLabel)\n \">\n </cps-chip>\n }\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n }\n </div>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n }\n <span class=\"cps-autocomplete-box-icons\">\n @if (clearable && !disabled) {\n <span\n role=\"button\"\n (click)=\"clear($event)\"\n (mousedown)=\"$event.preventDefault()\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n aria-label=\"Clear selection\"\n [tabindex]=\"disabled ? -1 : 0\"\n class=\"cps-autocomplete-box-clear-icon\"\n [ngClass]=\"{\n 'cps-autocomplete-box-clear-icon-hidden':\n !persistentClear &&\n (!multiple || !value?.length) &&\n (multiple || isEmptyValue())\n }\">\n <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n </span>\n }\n @if (showChevron && options.length) {\n <span\n class=\"cps-autocomplete-box-chevron\"\n role=\"button\"\n (mousedown)=\"onChevronClick($event)\"\n (keydown.enter)=\"onChevronClick($event)\"\n (keydown.space)=\"onChevronClick($event)\"\n [attr.aria-label]=\"\n isOpened ? 'Collapse options' : 'Expand options'\n \"\n [tabindex]=\"disabled ? -1 : 0\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-autocomplete-options-menu\">\n <div\n #optionsList\n role=\"listbox\"\n [id]=\"optionsListId\"\n tabindex=\"-1\"\n aria-readonly=\"false\"\n aria-disabled=\"false\"\n aria-orientation=\"vertical\"\n [attr.aria-multiselectable]=\"!!multiple\"\n class=\"cps-autocomplete-options\"\n [ngStyle]=\"{\n width: autocompleteBoxWidth + 'px'\n }\">\n @if (loading && showLoadingMessage) {\n <div\n class=\"cps-autocomplete-options-loading\"\n role=\"option\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n aria-selected=\"false\">\n {{ loadingMessage }}\n </div>\n }\n @if (\n showEmptyMessage &&\n filteredOptions.length < 1 &&\n !loading &&\n inputTextDebounced\n ) {\n <div\n class=\"cps-autocomplete-options-empty\"\n role=\"option\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n aria-selected=\"false\">\n {{ emptyMessage }}\n </div>\n }\n @if (isSelectAllVisible) {\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [id]=\"selectAllOptionId\"\n role=\"option\"\n tabindex=\"-1\"\n aria-disabled=\"false\"\n [attr.aria-setsize]=\"optionsAriaSetSize\"\n [attr.aria-posinset]=\"1\"\n [attr.aria-selected]=\"value?.length === options.length\"\n [class.allselected]=\"value?.length === options.length\"\n [class.highlighten]=\"optionHighlightedIndex === 0\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span class=\"cps-autocomplete-options-option-label\"\n >Select all</span\n >\n </span>\n </div>\n }\n @if (!loading) {\n @if (virtualScroll) {\n <p-virtualscroller\n #virtualList\n [items]=\"filteredOptions\"\n [delay]=\"0\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n [options]=\"{ numToleratedItems: numToleratedItems }\"\n [itemSize]=\"virtualScrollItemSize\">\n <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item,\n itemIndex: options.index\n }\n \"></ng-container>\n </ng-template>\n </p-virtualscroller>\n } @else {\n @for (item of filteredOptions; track item; let itemIndex = $index) {\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate;\n context: {\n item: item,\n itemIndex: itemIndex\n }\n \"></ng-container>\n }\n }\n }\n </div>\n </cps-menu>\n @if (loading || validating) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !externalError && !hideDetails) {\n <div class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n }\n @if ((error || externalError) && !hideDetails) {\n <div class=\"cps-autocomplete-error\">\n {{ error || externalError }}\n </div>\n }\n</div>\n\n<ng-template\n #autocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #autocompleteInput\n type=\"text\"\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [attr.aria-invalid]=\"error || externalError ? true : null\"\n [disabled]=\"disabled\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"optionsListId\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-expanded]=\"isOpened\"\n [ngClass]=\"inputClass\"\n [ngStyle]=\"inputStyle\"\n [placeholder]=\"\n (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n <div\n class=\"cps-autocomplete-options-option\"\n [id]=\"getOptionId(item, itemIndex)\"\n role=\"option\"\n tabindex=\"-1\"\n [attr.aria-setsize]=\"optionsAriaSetSize\"\n [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onOptionClick(item)\"\n [class.highlighten]=\"\n itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n \"\n [attr.aria-selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \"\n [class.selected]=\"\n item | checkOptionSelected: value : multiple : returnObject : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n @if (multiple) {\n <span class=\"cps-autocomplete-options-option-check\"> </span>\n }\n <span\n data-testid=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionLabel] }}</span\n >\n </span>\n\n <span\n class=\"cps-autocomplete-options-option-right\"\n [class.virtual-row]=\"virtualScroll\"\n >{{ item[optionInfo] }}</span\n >\n </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}: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:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem 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.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;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:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem 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:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}: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-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{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,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-mild);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem 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"] }]
|
|
4004
4142
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
4005
4143
|
type: Self
|
|
4006
4144
|
}, {
|
|
@@ -4010,6 +4148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
4010
4148
|
args: [DOCUMENT]
|
|
4011
4149
|
}] }, { type: i0.ChangeDetectorRef }, { type: LabelByValuePipe }], propDecorators: { label: [{
|
|
4012
4150
|
type: Input
|
|
4151
|
+
}], ariaLabel: [{
|
|
4152
|
+
type: Input
|
|
4013
4153
|
}], placeholder: [{
|
|
4014
4154
|
type: Input
|
|
4015
4155
|
}], hint: [{
|
|
@@ -4349,10 +4489,10 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
|
|
|
4349
4489
|
this.focusInput();
|
|
4350
4490
|
}, 0);
|
|
4351
4491
|
}
|
|
4352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, viewQueries: [{ propertyName: "treeAutocompleteInput", first: true, predicate: ["treeAutocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isActive() }\"\n #componentContainer>\n @if (label) {\n <div class=\"cps-treeautocomplete-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n ) {\n <div class=\"cps-treeautocomplete-box-items\">\n @if (!multiple) {\n <span 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 treeAutocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n }\n @if (multiple && !chips) {\n <div class=\"text-group\">\n @for (val of treeSelection; track val; let last = $last) {\n <div\n class=\"text-group-item\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n }\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of treeSelection; track val; let last = $last) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\"\n [label]=\"val.label\">\n </cps-chip>\n }\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n }\n </div>\n } @else {\n <input\n #treeAutocompleteInput\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [placeholder]=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n }\n <span class=\"cps-treeautocomplete-box-icons\">\n @if (clearable && !disabled) {\n <span\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 }\n @if (showChevron) {\n <span\n class=\"cps-treeautocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"innerOptions\"\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 @if (multiple) {\n <span class=\"cps-treeautocomplete-option-check\"> </span>\n }\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 @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n }\n</div>\n\n<ng-template\n #treeAutocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #treeAutocompleteInput\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 (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-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:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{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-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button{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-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-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;-ms-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.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", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
4492
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, viewQueries: [{ propertyName: "treeAutocompleteInput", first: true, predicate: ["treeAutocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error, active: isActive() }\"\n #componentContainer>\n @if (label) {\n <div class=\"cps-treeautocomplete-label\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\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 }\n </div>\n }\n <div\n (keydown)=\"onContainerKeyDown($event)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isActive()\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear,\n borderless: appearance === 'borderless',\n underlined: appearance === 'underlined'\n }\">\n <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n @if (prefixIcon) {\n <cps-icon\n [icon]=\"prefixIcon\"\n [style.color]=\"disabled ? '#9a9595' : null\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n }\n @if (\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n ) {\n <div class=\"cps-treeautocomplete-box-items\">\n @if (!multiple) {\n <span 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 treeAutocompleteInputTemplate;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n }\n @if (multiple && !chips) {\n <div class=\"text-group\">\n @for (val of treeSelection; track val; let last = $last) {\n <div\n class=\"text-group-item\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n }\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInputTemplate;\n context: {\n inputClass: 'multi-item-input'\n }\n \"></ng-container>\n </div>\n }\n @if (multiple && chips) {\n <div class=\"chips-group\">\n @for (val of treeSelection; track val; let last = $last) {\n <cps-chip\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{\n 'about-to-remove': last && backspaceClickedOnce\n }\"\n [label]=\"val.label\">\n </cps-chip>\n }\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInputTemplate;\n context: {\n inputClass: 'multi-chip-input'\n }\n \"></ng-container>\n </div>\n }\n </div>\n } @else {\n <input\n #treeAutocompleteInput\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [placeholder]=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n }\n <span class=\"cps-treeautocomplete-box-icons\">\n @if (clearable && !disabled) {\n <span\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 }\n @if (showChevron) {\n <span\n class=\"cps-treeautocomplete-box-chevron\"\n (mousedown)=\"onChevronClick($event)\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n </span>\n }\n </span>\n </div>\n </div>\n\n <cps-menu\n #optionsMenu\n [withArrow]=\"false\"\n (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n hideTransitionOptions=\"0s linear\"\n containerClass=\"cps-treeautocomplete-options-menu\">\n <div\n class=\"cps-treeautocomplete-options\"\n [ngStyle]=\"{\n width: boxWidth + 'px'\n }\">\n <p-tree\n #treeList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"onNodeExpand($event)\"\n (onNodeCollapse)=\"onNodeCollapse($event)\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"innerOptions\"\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 @if (multiple) {\n <span class=\"cps-treeautocomplete-option-check\"> </span>\n }\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 @if (loading) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n }\n</div>\n\n<ng-template\n #treeAutocompleteInputTemplate\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n #treeAutocompleteInput\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 (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-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:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{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-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button{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-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-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;-ms-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.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", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
4354
4494
|
}
|
|
4355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
|
|
4356
4496
|
type: Component,
|
|
4357
4497
|
args: [{ imports: [
|
|
4358
4498
|
CommonModule,
|
|
@@ -4413,6 +4553,11 @@ class CpsButtonComponent {
|
|
|
4413
4553
|
* @group Props
|
|
4414
4554
|
*/
|
|
4415
4555
|
this.label = '';
|
|
4556
|
+
/**
|
|
4557
|
+
* Aria label for the button, used for accessibility, it takes precedence over label.
|
|
4558
|
+
* @group Props
|
|
4559
|
+
*/
|
|
4560
|
+
this.ariaLabel = '';
|
|
4416
4561
|
/**
|
|
4417
4562
|
* Name of the icon on the button.
|
|
4418
4563
|
* @group Props
|
|
@@ -4461,6 +4606,7 @@ class CpsButtonComponent {
|
|
|
4461
4606
|
this.cvtFontSize = '';
|
|
4462
4607
|
this.cvtIconSize = '';
|
|
4463
4608
|
this.classesList = [];
|
|
4609
|
+
this.enterActive = false;
|
|
4464
4610
|
}
|
|
4465
4611
|
ngOnChanges() {
|
|
4466
4612
|
this.buttonColor = getCSSColor(this.color, this.document);
|
|
@@ -4469,6 +4615,12 @@ class CpsButtonComponent {
|
|
|
4469
4615
|
this.type === 'solid'
|
|
4470
4616
|
? getCSSColor(this.contentColor, this.document)
|
|
4471
4617
|
: this.buttonColor;
|
|
4618
|
+
if (this.disabled || this.loading) {
|
|
4619
|
+
this.enterActive = false;
|
|
4620
|
+
}
|
|
4621
|
+
if (!this.label && !this.ariaLabel) {
|
|
4622
|
+
console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
|
|
4623
|
+
}
|
|
4472
4624
|
this.setClasses();
|
|
4473
4625
|
}
|
|
4474
4626
|
setClasses() {
|
|
@@ -4535,14 +4687,27 @@ class CpsButtonComponent {
|
|
|
4535
4687
|
}
|
|
4536
4688
|
}
|
|
4537
4689
|
onClick(event) {
|
|
4690
|
+
if (this.disabled || this.loading)
|
|
4691
|
+
return;
|
|
4538
4692
|
this.clicked.emit(event);
|
|
4539
4693
|
}
|
|
4540
|
-
|
|
4541
|
-
|
|
4694
|
+
onEnterKeydown() {
|
|
4695
|
+
if (this.disabled || this.loading)
|
|
4696
|
+
return;
|
|
4697
|
+
this.enterActive = true;
|
|
4698
|
+
}
|
|
4699
|
+
onEnterKeyup() {
|
|
4700
|
+
this.enterActive = false;
|
|
4701
|
+
}
|
|
4702
|
+
onBlur() {
|
|
4703
|
+
this.enterActive = false;
|
|
4704
|
+
}
|
|
4705
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4706
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", borderRadius: "borderRadius", type: "type", label: "label", ariaLabel: "ariaLabel", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, usesOnChanges: true, ngImport: i0, template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"ariaLabel || label || null\"\n [class.loading]=\"loading\"\n [class.cps-button--key-active]=\"enterActive\"\n (keydown.enter)=\"onEnterKeydown()\"\n (keyup.enter)=\"onEnterKeyup()\"\n (blur)=\"onBlur()\"\n [ngStyle]=\"{\n backgroundColor: type === 'solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n borderRadius: borderRadius\n }\">\n <div class=\"cps-button__spinner\" aria-hidden=\"true\">\n @if (loading) {\n <cps-progress-circular\n color=\"currentColor\"\n [diameter]=\"cvtIconSize\"\n strokeWidth=\"2\">\n </cps-progress-circular>\n }\n </div>\n <div\n class=\"cps-button__content\"\n [style.visibility]=\"loading ? 'hidden' : null\"\n [attr.aria-hidden]=\"loading ? true : null\">\n @if (icon) {\n <cps-icon\n class=\"cps-button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n aria-hidden=\"true\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n }\n @if (label) {\n <span\n class=\"cps-button__text\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\">\n {{ label }}\n </span>\n }\n </div>\n </button>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;cursor:pointer;outline:none;padding:0 1rem;font-weight:500}:host .cps-button:focus-visible:not(.loading){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:focus-visible{position:relative}:host .cps-button:focus-visible:before,:host .cps-button:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-button:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-button:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:active:not(:disabled):not(.loading),:host .cps-button--key-active:not(:disabled):not(.loading){background-image:linear-gradient(#0000001a 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled,:host .cps-button.loading{cursor:default;pointer-events:none}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:.125rem solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 .0625rem .25rem #0c0c0d1a}:host .cps-button--large{min-height:3rem}:host .cps-button--large .cps-button__icon{width:1.25rem;height:1.25rem}:host .cps-button--large .cps-button__text{font-size:1.25rem}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.375rem}:host .cps-button--large.loading{min-width:3.5rem}:host .cps-button--normal{min-height:2.5rem}:host .cps-button--normal .cps-button__icon{width:1rem;height:1rem}:host .cps-button--normal .cps-button__text{font-size:1rem}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.125rem}:host .cps-button--normal.loading{min-width:3rem}:host .cps-button--small{min-height:2rem}:host .cps-button--small .cps-button__icon{width:.875rem;height:.875rem}:host .cps-button--small .cps-button__text{font-size:.875rem}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:.875rem}:host .cps-button--small.loading{min-width:2.5rem}:host .cps-button--xsmall{min-height:1.5rem}:host .cps-button--xsmall .cps-button__icon{width:.75rem;height:.75rem}:host .cps-button--xsmall .cps-button__text{font-size:.75rem}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:.625rem}:host .cps-button--xsmall.loading{min-width:2rem}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:.5rem}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:.5rem;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }] }); }
|
|
4542
4707
|
}
|
|
4543
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonComponent, decorators: [{
|
|
4544
4709
|
type: Component,
|
|
4545
|
-
args: [{ imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled
|
|
4710
|
+
args: [{ imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading ? true : null\"\n [attr.aria-label]=\"ariaLabel || label || null\"\n [class.loading]=\"loading\"\n [class.cps-button--key-active]=\"enterActive\"\n (keydown.enter)=\"onEnterKeydown()\"\n (keyup.enter)=\"onEnterKeyup()\"\n (blur)=\"onBlur()\"\n [ngStyle]=\"{\n backgroundColor: type === 'solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n borderRadius: borderRadius\n }\">\n <div class=\"cps-button__spinner\" aria-hidden=\"true\">\n @if (loading) {\n <cps-progress-circular\n color=\"currentColor\"\n [diameter]=\"cvtIconSize\"\n strokeWidth=\"2\">\n </cps-progress-circular>\n }\n </div>\n <div\n class=\"cps-button__content\"\n [style.visibility]=\"loading ? 'hidden' : null\"\n [attr.aria-hidden]=\"loading ? true : null\">\n @if (icon) {\n <cps-icon\n class=\"cps-button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n aria-hidden=\"true\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n }\n @if (label) {\n <span\n class=\"cps-button__text\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\">\n {{ label }}\n </span>\n }\n </div>\n </button>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;cursor:pointer;outline:none;padding:0 1rem;font-weight:500}:host .cps-button:focus-visible:not(.loading){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:focus-visible{position:relative}:host .cps-button:focus-visible:before,:host .cps-button:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-button:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-button:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:active:not(:disabled):not(.loading),:host .cps-button--key-active:not(:disabled):not(.loading){background-image:linear-gradient(#0000001a 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled,:host .cps-button.loading{cursor:default;pointer-events:none}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:.125rem solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 .0625rem .25rem #0c0c0d1a}:host .cps-button--large{min-height:3rem}:host .cps-button--large .cps-button__icon{width:1.25rem;height:1.25rem}:host .cps-button--large .cps-button__text{font-size:1.25rem}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.375rem}:host .cps-button--large.loading{min-width:3.5rem}:host .cps-button--normal{min-height:2.5rem}:host .cps-button--normal .cps-button__icon{width:1rem;height:1rem}:host .cps-button--normal .cps-button__text{font-size:1rem}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.125rem}:host .cps-button--normal.loading{min-width:3rem}:host .cps-button--small{min-height:2rem}:host .cps-button--small .cps-button__icon{width:.875rem;height:.875rem}:host .cps-button--small .cps-button__text{font-size:.875rem}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:.875rem}:host .cps-button--small.loading{min-width:2.5rem}:host .cps-button--xsmall{min-height:1.5rem}:host .cps-button--xsmall .cps-button__icon{width:.75rem;height:.75rem}:host .cps-button--xsmall .cps-button__text{font-size:.75rem}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:.625rem}:host .cps-button--xsmall.loading{min-width:2rem}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:.5rem}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:.5rem;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\n"] }]
|
|
4546
4711
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
4547
4712
|
type: Inject,
|
|
4548
4713
|
args: [DOCUMENT]
|
|
@@ -4556,6 +4721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
4556
4721
|
type: Input
|
|
4557
4722
|
}], label: [{
|
|
4558
4723
|
type: Input
|
|
4724
|
+
}], ariaLabel: [{
|
|
4725
|
+
type: Input
|
|
4559
4726
|
}], icon: [{
|
|
4560
4727
|
type: Input
|
|
4561
4728
|
}], iconPosition: [{
|
|
@@ -4686,10 +4853,10 @@ class CpsCheckboxComponent {
|
|
|
4686
4853
|
focus() {
|
|
4687
4854
|
this._elementRef?.nativeElement?.querySelector('input')?.focus();
|
|
4688
4855
|
}
|
|
4689
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4690
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngClass]=\"{\n 'cps-checkbox-disabled': disabled\n }\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-checkbox-indicator\"></span>\n @if (icon) {\n <cps-icon\n class=\"cps-checkbox-icon\"\n [icon]=\"icon\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : iconColor\">\n </cps-icon>\n }\n @if (label) {\n <span class=\"cps-checkbox-label\">{{ label }}</span>\n }\n </label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-checkbox-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 }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:10px}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
|
|
4691
4858
|
}
|
|
4692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
|
|
4693
4860
|
type: Component,
|
|
4694
4861
|
args: [{ imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n <label\n class=\"cps-checkbox\"\n [ngClass]=\"{\n 'cps-checkbox-disabled': disabled\n }\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-checkbox-indicator\"></span>\n @if (icon) {\n <cps-icon\n class=\"cps-checkbox-icon\"\n [icon]=\"icon\"\n size=\"small\"\n [color]=\"disabled ? 'text-light' : iconColor\">\n </cps-icon>\n }\n @if (label) {\n <span class=\"cps-checkbox-label\">{{ label }}</span>\n }\n </label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-checkbox-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 }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:10px}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
|
|
4695
4862
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -4775,10 +4942,10 @@ class CpsRadioButtonComponent {
|
|
|
4775
4942
|
onFocus() {
|
|
4776
4943
|
this.focused.emit();
|
|
4777
4944
|
}
|
|
4778
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4779
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4945
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent", blurred: "blurred", focused: "focused" }, ngImport: i0, template: "@if (option?.tooltip) {\n <div\n class=\"cps-radio-group-content-button\"\n [cpsTooltip]=\"option?.tooltip || ''\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </div>\n}\n@if (!option?.tooltip) {\n <div class=\"cps-radio-group-content-button\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </div>\n}\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n [id]=\"inputId\"\n type=\"radio\"\n [disabled]=\"option.disabled || groupDisabled\"\n [value]=\"option.value\"\n [checked]=\"checked\"\n (change)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n <div #contentRef class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (!contentRef.innerHTML.trim()) {\n <label\n [for]=\"inputId\"\n class=\"cps-radio-group-content-button-label\"\n [ngStyle]=\"{\n cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n }\"\n >{{ option.label }}\n </label>\n }\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
|
|
4780
4947
|
}
|
|
4781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioButtonComponent, decorators: [{
|
|
4782
4949
|
type: Component,
|
|
4783
4950
|
args: [{ imports: [CommonModule, CpsTooltipDirective], selector: 'cps-radio-button', template: "@if (option?.tooltip) {\n <div\n class=\"cps-radio-group-content-button\"\n [cpsTooltip]=\"option?.tooltip || ''\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </div>\n}\n@if (!option?.tooltip) {\n <div class=\"cps-radio-group-content-button\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </div>\n}\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n [id]=\"inputId\"\n type=\"radio\"\n [disabled]=\"option.disabled || groupDisabled\"\n [value]=\"option.value\"\n [checked]=\"checked\"\n (change)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n <div #contentRef class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (!contentRef.innerHTML.trim()) {\n <label\n [for]=\"inputId\"\n class=\"cps-radio-group-content-button-label\"\n [ngStyle]=\"{\n cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n }\"\n >{{ option.label }}\n </label>\n }\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"] }]
|
|
4784
4951
|
}], propDecorators: { option: [{
|
|
@@ -4955,15 +5122,15 @@ class CpsRadioGroupComponent {
|
|
|
4955
5122
|
const message = errArr.find((msg) => typeof msg === 'string');
|
|
4956
5123
|
this.error = message || 'Unknown error';
|
|
4957
5124
|
}
|
|
4958
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4959
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
5125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", hint: "hint", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged", blurred: "blurred", focused: "focused" }, providers: [
|
|
4960
5127
|
{
|
|
4961
5128
|
provide: CPS_RADIO_GROUP,
|
|
4962
5129
|
useExisting: CpsRadioGroupComponent
|
|
4963
5130
|
}
|
|
4964
5131
|
], ngImport: i0, template: "<div class=\"cps-radio-group\">\n @if (groupLabel) {\n <div class=\"cps-radio-group-label\">\n <span>{{ groupLabel }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-radio-group-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n\n <div\n #contentRef\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n <ng-content></ng-content>\n </div>\n\n @if (!contentRef.innerHTML.trim()) {\n <div\n class=\"cps-radio-group-content\"\n [ngClass]=\"\n vertical\n ? 'cps-radio-group-content-vertical'\n : 'cps-radio-group-content-horizontal'\n \">\n @for (option of options; track option) {\n <cps-radio-button\n [option]=\"option\"\n [checked]=\"option.value === value\"\n [groupDisabled]=\"disabled\"\n (blurred)=\"onBlur()\"\n (focused)=\"onFocus()\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n </cps-radio-button>\n }\n </div>\n }\n @if (!error && !hideDetails) {\n <div class=\"cps-radio-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-radio-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}:host .cps-radio-group .cps-radio-hint{margin-top:4px;color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-radio-group .cps-radio-error{margin-top:4px;color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent", "blurred", "focused"] }] }); }
|
|
4965
5132
|
}
|
|
4966
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
|
|
4967
5134
|
type: Component,
|
|
4968
5135
|
args: [{ imports: [CommonModule, CpsInfoCircleComponent, CpsRadioButtonComponent], selector: 'cps-radio-group', providers: [
|
|
4969
5136
|
{
|
|
@@ -5022,10 +5189,10 @@ class CpsRadioComponent {
|
|
|
5022
5189
|
updateValueEvent(value) {
|
|
5023
5190
|
this.radioGroup?.updateValueEvent(value);
|
|
5024
5191
|
}
|
|
5025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
5192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioComponent, deps: [{ token: CPS_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { option: "option" }, ngImport: i0, template: "<cps-radio-button\n [option]=\"option\"\n [groupDisabled]=\"groupDisabled\"\n [checked]=\"radioGroup?.value == option.value\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent", "blurred", "focused"] }] }); }
|
|
5027
5194
|
}
|
|
5028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioComponent, decorators: [{
|
|
5029
5196
|
type: Component,
|
|
5030
5197
|
args: [{ selector: 'cps-radio', imports: [CpsRadioButtonComponent], template: "<cps-radio-button\n [option]=\"option\"\n [groupDisabled]=\"groupDisabled\"\n [checked]=\"radioGroup?.value == option.value\"\n (updateValueEvent)=\"updateValueEvent($event)\">\n <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
|
|
5031
5198
|
}], ctorParameters: () => [{ type: CpsRadioGroupComponent, decorators: [{
|
|
@@ -5071,10 +5238,10 @@ class CpsLoaderComponent {
|
|
|
5071
5238
|
this.backgroundColor = `rgba(0, 0, 0, ${this.opacity})`;
|
|
5072
5239
|
this.labelColor = getCSSColor(this.labelColor, this.document);
|
|
5073
5240
|
}
|
|
5074
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5075
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
5241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsLoaderComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsLoaderComponent, isStandalone: true, selector: "cps-loader", inputs: { fullScreen: "fullScreen", opacity: "opacity", labelColor: "labelColor", showLabel: "showLabel" }, ngImport: i0, template: "<div\n class=\"cps-loader-overlay\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n position: fullScreen ? 'fixed' : 'relative'\n }\">\n <div class=\"cps-loader-overlay-content\">\n @if (showLabel) {\n <label class=\"cps-loader-overlay-content-text\" [style.color]=\"labelColor\"\n >Loading...\n </label>\n }\n <div class=\"cps-loader-overlay-content-circles\">\n <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:20px;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:15px;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:85px;width:90px}:host .cps-loader-overlay-content-circles-circle{border-left:5px solid;border-top-left-radius:100%;border-top:5px solid;margin:5px;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-color-calm);border-top-color:var(--cps-color-calm);width:40px;height:40px}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-color-warmth);border-top-color:var(--cps-color-warmth);width:30px;height:30px}:host .cps-loader-overlay-content-circles .cps-sp3{width:20px;height:20px;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
5076
5243
|
}
|
|
5077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsLoaderComponent, decorators: [{
|
|
5078
5245
|
type: Component,
|
|
5079
5246
|
args: [{ imports: [CommonModule], selector: 'cps-loader', template: "<div\n class=\"cps-loader-overlay\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n position: fullScreen ? 'fixed' : 'relative'\n }\">\n <div class=\"cps-loader-overlay-content\">\n @if (showLabel) {\n <label class=\"cps-loader-overlay-content-text\" [style.color]=\"labelColor\"\n >Loading...\n </label>\n }\n <div class=\"cps-loader-overlay-content-circles\">\n <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:20px;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:15px;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:85px;width:90px}:host .cps-loader-overlay-content-circles-circle{border-left:5px solid;border-top-left-radius:100%;border-top:5px solid;margin:5px;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-color-calm);border-top-color:var(--cps-color-calm);width:40px;height:40px}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-color-warmth);border-top-color:var(--cps-color-warmth);width:30px;height:30px}:host .cps-loader-overlay-content-circles .cps-sp3{width:20px;height:20px;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"] }]
|
|
5080
5247
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
@@ -5173,10 +5340,10 @@ class TableRowMenuComponent {
|
|
|
5173
5340
|
}
|
|
5174
5341
|
}
|
|
5175
5342
|
}
|
|
5176
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5177
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
5343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5344
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: TableRowMenuComponent, isStandalone: true, selector: "table-row-menu", inputs: { showRowRemoveButton: "showRowRemoveButton", customItems: "customItems", showRowEditButton: "showRowEditButton" }, outputs: { editRowBtnClicked: "editRowBtnClicked", removeRowBtnClicked: "removeRowBtnClicked" }, ngImport: i0, template: "<cps-menu #rowMenu [items]=\"items\" [compressed]=\"true\" [withArrow]=\"false\">\n</cps-menu>\n<cps-icon\n icon=\"dropdown-menu\"\n size=\"22\"\n (click)=\"rowMenu.toggle($event)\"\n class=\"cps-table-row-menu-icon\">\n</cps-icon>\n", styles: [":host{height:22px;display:block}:host .cps-table-row-menu-icon{cursor:pointer}:host .cps-table-row-menu-icon:hover{color:var(--cps-color-calm)}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
5178
5345
|
}
|
|
5179
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableRowMenuComponent, decorators: [{
|
|
5180
5347
|
type: Component,
|
|
5181
5348
|
args: [{ selector: 'table-row-menu', imports: [CpsIconComponent, CpsMenuComponent], template: "<cps-menu #rowMenu [items]=\"items\" [compressed]=\"true\" [withArrow]=\"false\">\n</cps-menu>\n<cps-icon\n icon=\"dropdown-menu\"\n size=\"22\"\n (click)=\"rowMenu.toggle($event)\"\n class=\"cps-table-row-menu-icon\">\n</cps-icon>\n", styles: [":host{height:22px;display:block}:host .cps-table-row-menu-icon{cursor:pointer}:host .cps-table-row-menu-icon:hover{color:var(--cps-color-calm)}\n"] }]
|
|
5182
5349
|
}], propDecorators: { editRowBtnClicked: [{
|
|
@@ -5250,10 +5417,10 @@ class CpsSortIconComponent {
|
|
|
5250
5417
|
this.subscription.unsubscribe();
|
|
5251
5418
|
}
|
|
5252
5419
|
}
|
|
5253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
5420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSortIconComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSortIconComponent, isStandalone: true, selector: "cps-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "@if (sortOrder === 0) {\n <div class=\"cps-sortable-column-icon sort-unsorted\">\n <div class=\"sort-unsorted-arrow-up\"></div>\n <div class=\"sort-unsorted-arrow-down\"></div>\n </div>\n}\n@if (sortOrder === 1) {\n <div class=\"cps-sortable-column-icon sort-desc\"></div>\n}\n@if (sortOrder === -1) {\n <div class=\"cps-sortable-column-icon sort-asc\"></div>\n}\n\n@if (isMultiSorted()) {\n <span class=\"cps-sortable-column-badge\">{{ getBadgeValue() }}</span>\n}\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5255
5422
|
}
|
|
5256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSortIconComponent, decorators: [{
|
|
5257
5424
|
type: Component,
|
|
5258
5425
|
args: [{ selector: 'cps-sort-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (sortOrder === 0) {\n <div class=\"cps-sortable-column-icon sort-unsorted\">\n <div class=\"sort-unsorted-arrow-up\"></div>\n <div class=\"sort-unsorted-arrow-down\"></div>\n </div>\n}\n@if (sortOrder === 1) {\n <div class=\"cps-sortable-column-icon sort-desc\"></div>\n}\n@if (sortOrder === -1) {\n <div class=\"cps-sortable-column-icon sort-asc\"></div>\n}\n\n@if (isMultiSorted()) {\n <span class=\"cps-sortable-column-badge\">{{ getBadgeValue() }}</span>\n}\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"] }]
|
|
5259
5426
|
}], ctorParameters: () => [{ type: i1$3.Table, decorators: [{
|
|
@@ -5292,10 +5459,10 @@ class CpsTableColumnSortableDirective extends SortableColumn {
|
|
|
5292
5459
|
this.sortIconRef.destroy();
|
|
5293
5460
|
this.viewContainerRef.clear();
|
|
5294
5461
|
}
|
|
5295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5296
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
5462
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$3.Table }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5463
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTableColumnSortableDirective, isStandalone: true, selector: "[cpsTColSortable]", inputs: { field: ["cpsTColSortable", "field"] }, usesInheritance: true, ngImport: i0 }); }
|
|
5297
5464
|
}
|
|
5298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableColumnSortableDirective, decorators: [{
|
|
5299
5466
|
type: Directive,
|
|
5300
5467
|
args: [{
|
|
5301
5468
|
standalone: true,
|
|
@@ -5496,10 +5663,10 @@ class TableUnsortDirective {
|
|
|
5496
5663
|
}
|
|
5497
5664
|
return this.pTable.compareValuesOnSort(value1, value2, this.pTable.multiSortMeta[index].order);
|
|
5498
5665
|
}
|
|
5499
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5500
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
5666
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableUnsortDirective, deps: [{ token: i1$3.Table, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5667
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TableUnsortDirective, isStandalone: true, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"], ngImport: i0 }); }
|
|
5501
5668
|
}
|
|
5502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5669
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableUnsortDirective, decorators: [{
|
|
5503
5670
|
type: Directive,
|
|
5504
5671
|
args: [{
|
|
5505
5672
|
standalone: true,
|
|
@@ -5850,10 +6017,10 @@ class CpsDatepickerComponent {
|
|
|
5850
6017
|
this.focusInput();
|
|
5851
6018
|
}
|
|
5852
6019
|
}
|
|
5853
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
5854
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", 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-datepicker\n [(ngModel)]=\"value\"\n [inline]=\"true\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n (onClearClick)=\"onClearCalendarDate()\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\" />\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;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;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:#fff;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-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-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-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-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-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{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-datepicker-buttonbar .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-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
6020
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6021
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", 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-datepicker\n [(ngModel)]=\"value\"\n [inline]=\"true\"\n [showIcon]=\"true\"\n [showButtonBar]=\"showTodayButton\"\n (onSelect)=\"onSelectCalendarDate($event)\"\n (onClearClick)=\"onClearCalendarDate()\"\n [showOtherMonths]=\"false\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\" />\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;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;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:#fff;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-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-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-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-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-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{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-datepicker-buttonbar .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-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
|
|
5855
6022
|
}
|
|
5856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
|
|
5857
6024
|
type: Component,
|
|
5858
6025
|
args: [{ imports: [
|
|
5859
6026
|
CpsInputComponent,
|
|
@@ -6093,10 +6260,10 @@ class CpsButtonToggleComponent {
|
|
|
6093
6260
|
}
|
|
6094
6261
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6095
6262
|
setDisabledState(disabled) { }
|
|
6096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
6263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div class=\"cps-btn-toggle-content\">\n @for (option of options; track option) {\n <ng-container\n *ngTemplateOutlet=\"\n optionContainerTemplate;\n context: {\n option: option,\n tooltip: option.tooltip\n }\n \"></ng-container>\n }\n </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n @if (tooltip) {\n <label\n class=\"cps-btn-toggle-content-option\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n }\n @if (!tooltip) {\n <label class=\"cps-btn-toggle-content-option\">\n <ng-container\n *ngTemplateOutlet=\"\n optionRadioTemplate;\n context: {\n option: option\n }\n \"></ng-container>\n </label>\n }\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"option.value | checkOptionSelected: value : multiple : true : ''\"\n (change)=\"updateValueEvent($event, option.value)\" />\n <span\n class=\"cps-btn-toggle-content-option-content\"\n [ngStyle]=\"{\n 'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n }\">\n @if (option.icon) {\n <cps-icon [ngClass]=\"{ 'me-2': !!option.label }\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(#ffffff1a 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
6098
6265
|
}
|
|
6099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
6100
6267
|
type: Component,
|
|
6101
6268
|
args: [{ imports: [
|
|
6102
6269
|
CommonModule,
|
|
@@ -6240,10 +6407,10 @@ class TableColumnFilterConstraintComponent {
|
|
|
6240
6407
|
this._tableInstance._filter();
|
|
6241
6408
|
event.preventDefault();
|
|
6242
6409
|
}
|
|
6243
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6244
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
6410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (type) {\n @case ('text') {\n <cps-input\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 @case ('number') {\n <cps-input\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 @case ('boolean') {\n <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n <cps-button-toggle\n [options]=\"booleanOptions\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\">\n </cps-button-toggle>\n </div>\n }\n @case ('date') {\n <cps-datepicker\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 @case ('category') {\n @if (!asButtonToggle) {\n <cps-autocomplete\n #categoryAutocompleteComponent\n class=\"cps-table-col-filter-category-autocomplete\"\n [placeholder]=\"placeholder\"\n [options]=\"categories\"\n [hideDetails]=\"true\"\n [clearable]=\"true\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [returnObject]=\"false\"\n [multiple]=\"!singleSelection\">\n </cps-autocomplete>\n }\n <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n @if (asButtonToggle) {\n <cps-button-toggle\n [options]=\"categories\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\"\n [multiple]=\"!singleSelection\">\n </cps-button-toggle>\n }\n </div>\n }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
|
|
6245
6412
|
}
|
|
6246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
|
|
6247
6414
|
type: Component,
|
|
6248
6415
|
args: [{ selector: 'table-column-filter-constraint', imports: [
|
|
6249
6416
|
FormsModule,
|
|
@@ -6601,10 +6768,10 @@ class TableColumnFilterComponent {
|
|
|
6601
6768
|
onMouseLeave() {
|
|
6602
6769
|
this._updateSortIconColor('');
|
|
6603
6770
|
}
|
|
6604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
6771
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n hideTransitionOptions=\"0s linear\"\n [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n @if (showCloseButton || headerTitle) {\n <div class=\"cps-table-col-filter-menu-content-header\">\n <span class=\"cps-table-col-filter-menu-content-header-title\">\n {{ headerTitle }}\n </span>\n @if (showCloseButton) {\n <cps-icon icon=\"close-x\" (click)=\"onCloseClick()\"></cps-icon>\n }\n </div>\n }\n @if (isShowOperator) {\n <div class=\"cps-table-col-filter-menu-content-operator\">\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 }\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n @for (\n fieldConstraint of fieldConstraints;\n track fieldConstraint;\n let i = $index\n ) {\n <div class=\"cps-table-col-filter-menu-content-constraint\">\n @if (showMatchModes && currentMatchModes) {\n <cps-select\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n }\n <table-column-filter-constraint\n #constraintComponent\n [type]=\"type\"\n [field]=\"field\"\n [asButtonToggle]=\"asButtonToggle\"\n [singleSelection]=\"singleSelection\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n @if (showRemoveIcon) {\n <div class=\"cps-table-col-filter-remove-rule-btn\">\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 }\n </div>\n }\n </div>\n @if (isShowAddConstraint) {\n <div class=\"cps-table-col-filter-add-rule-btn\">\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 }\n <div class=\"cps-table-col-filter-buttonbar\">\n @if (showClearButton) {\n <cps-button\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n }\n @if (showApplyButton) {\n <cps-button\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n }\n </div>\n </div>\n </cps-menu>\n <cps-icon\n [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': isFilterApplied\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
|
|
6606
6773
|
}
|
|
6607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
|
|
6608
6775
|
type: Component,
|
|
6609
6776
|
args: [{ selector: 'table-column-filter', imports: [
|
|
6610
6777
|
CommonModule,
|
|
@@ -6801,10 +6968,10 @@ class CpsTableColumnFilterDirective {
|
|
|
6801
6968
|
this.filterCompRef.destroy();
|
|
6802
6969
|
this.viewContainerRef.clear();
|
|
6803
6970
|
}
|
|
6804
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6805
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
6971
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6972
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterMaxConstraints: "filterMaxConstraints", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTColFilter"], usesOnChanges: true, ngImport: i0 }); }
|
|
6806
6973
|
}
|
|
6807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
6974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
|
|
6808
6975
|
type: Directive,
|
|
6809
6976
|
args: [{
|
|
6810
6977
|
standalone: true,
|
|
@@ -6862,10 +7029,10 @@ class CpsTableDetectFilterTypePipe {
|
|
|
6862
7029
|
}
|
|
6863
7030
|
return 'text';
|
|
6864
7031
|
}
|
|
6865
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6866
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
7032
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableDetectFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
7033
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: CpsTableDetectFilterTypePipe, isStandalone: true, name: "cpsTableDetectFilterType" }); }
|
|
6867
7034
|
}
|
|
6868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableDetectFilterTypePipe, decorators: [{
|
|
6869
7036
|
type: Pipe,
|
|
6870
7037
|
args: [{
|
|
6871
7038
|
name: 'cpsTableDetectFilterType',
|
|
@@ -6878,10 +7045,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
6878
7045
|
* @group Directives
|
|
6879
7046
|
*/
|
|
6880
7047
|
class CpsTableColumnResizableDirective extends ResizableColumn {
|
|
6881
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
6882
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
7048
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableColumnResizableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7049
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTableColumnResizableDirective, isStandalone: true, selector: "[cpsTColResizable]", inputs: { pResizableColumnDisabled: ["cpsTColResizableDisabled", "pResizableColumnDisabled"] }, usesInheritance: true, ngImport: i0 }); }
|
|
6883
7050
|
}
|
|
6884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableColumnResizableDirective, decorators: [{
|
|
6885
7052
|
type: Directive,
|
|
6886
7053
|
args: [{
|
|
6887
7054
|
standalone: true,
|
|
@@ -7630,8 +7797,8 @@ class CpsTableComponent {
|
|
|
7630
7797
|
downloadLink.click();
|
|
7631
7798
|
});
|
|
7632
7799
|
}
|
|
7633
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7634
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
7800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", rowMenuItems: "rowMenuItems", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", renderDataAsHTML: "renderDataAsHTML", data: "data", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", customSortFunction: "customSortFunction" }, providers: [
|
|
7635
7802
|
TableService,
|
|
7636
7803
|
{
|
|
7637
7804
|
provide: Table,
|
|
@@ -7639,9 +7806,9 @@ class CpsTableComponent {
|
|
|
7639
7806
|
// eslint-disable-next-line no-use-before-define
|
|
7640
7807
|
deps: [CpsTableComponent]
|
|
7641
7808
|
}
|
|
7642
|
-
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n #tUnsortDirective=\"tWithUnsort\"\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\n [stripedRows]=\"striped\"\n [showGridlines]=\"bordered\"\n [size]=\"size === 'normal' ? undefined : size\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n @if (hasToolbar) {\n <ng-template pTemplate=\"caption\">\n @if (toolbarTemplate) {\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n }\n @if (!toolbarTemplate) {\n <div class=\"cps-table-tbar-left\">\n @if (toolbarIcon) {\n <div class=\"cps-table-tbar-icon\">\n <cps-icon\n [icon]=\"toolbarIcon\"\n [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n }\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n @if (showGlobalFilter) {\n <div class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"\n toolbarSize === 'small' ? 'underlined' : 'outlined'\n \"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n }\n </div>\n <div class=\"cps-table-tbar-right\">\n @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n }\n @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [icon]=\"additionalBtnOnSelectIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n }\n @if (showActionBtn) {\n <div class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [icon]=\"actionBtnIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n }\n @if (showColumnsToggleBtn && columns.length > 0) {\n <div\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled\n ? 'text-lightest'\n : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"\n selectedColumns.length === columns.length\n \"\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 @for (col of columns; track col) {\n <div\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\n 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 }\n </div>\n </cps-menu>\n </div>\n }\n @if (showExportBtn) {\n <div\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n }\n @if (showDataReloadBtn) {\n <div\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"\n dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n \"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n }\n </div>\n }\n </ng-template>\n }\n\n @if (nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns\n }\n \"></ng-container>\n </ng-template>\n }\n\n @if (!nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n @if (rowExpansionTemplate) {\n <th\n style=\"width: 3rem\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n @if (reorderableRows) {\n <th\n style=\"width: 3rem\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n @if (selectable) {\n <th\n style=\"width: 4rem\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n }\n @if (headerTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns\n }\n \"></ng-container>\n }\n @if (!headerTemplate && columns.length > 0) {\n @if (sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTColSortable]=\"col[colFieldName]\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n [cpsTColSortable]=\"col[colFieldName]\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n @if (!sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n </tr>\n </ng-template>\n }\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 @if (rowExpansionTemplate) {\n <td 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 }\n @if (reorderableRows) {\n <td class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n >\u2630</span\n >\n </td>\n }\n @if (selectable) {\n <td>\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n }\n @if (bodyTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n }\n @if (!bodyTemplate) {\n @if (columns.length > 0) {\n @if (renderDataAsHTML) {\n @for (col of columns; track col) {\n <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n }\n } @else {\n @for (col of columns; track col) {\n <td>\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <td class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </table-row-menu>\n </td>\n }\n </tr>\n </ng-template>\n @if (rowExpansionTemplate; as item) {\n <ng-template pTemplate=\"rowexpansion\" 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 }\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}: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!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{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-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-mask.p-overlay-mask{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-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7809
|
+
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n #primengTable\n #tUnsortDirective=\"tWithUnsort\"\n tWithUnsort\n [ngClass]=\"{ 'cps-table-loading': loading }\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [value]=\"data\"\n [dataKey]=\"dataKey\"\n [columns]=\"selectedColumns\"\n (selectionChange)=\"onSelectionChanged($event)\"\n [globalFilterFields]=\"globalFilterFields\"\n [showInitialSortBadge]=\"false\"\n [loading]=\"loading\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [lazy]=\"lazy\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [(selection)]=\"selectedRows\"\n [metaKeySelection]=\"false\"\n [rowHover]=\"rowHover\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [exportFilename]=\"exportFilename\"\n [csvSeparator]=\"csvSeparator\"\n [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\n [stripedRows]=\"striped\"\n [showGridlines]=\"bordered\"\n [size]=\"size === 'normal' ? undefined : size\"\n (onPage)=\"onPageChange($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\">\n @if (hasToolbar) {\n <ng-template pTemplate=\"caption\">\n @if (toolbarTemplate) {\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n }\n @if (!toolbarTemplate) {\n <div class=\"cps-table-tbar-left\">\n @if (toolbarIcon) {\n <div class=\"cps-table-tbar-icon\">\n <cps-icon\n [icon]=\"toolbarIcon\"\n [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n }\n <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n @if (showGlobalFilter) {\n <div class=\"cps-table-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"\n toolbarSize === 'small' ? 'underlined' : 'outlined'\n \"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n }\n </div>\n <div class=\"cps-table-tbar-right\">\n @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n }\n @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-table-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [icon]=\"additionalBtnOnSelectIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n }\n @if (showActionBtn) {\n <div class=\"cps-table-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [icon]=\"actionBtnIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n }\n @if (showColumnsToggleBtn && columns.length > 0) {\n <div\n class=\"cps-table-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled\n ? 'text-lightest'\n : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-table-coltoggle-menu\">\n <div\n class=\"cps-table-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"\n selectedColumns.length === columns.length\n \"\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 @for (col of columns; track col) {\n <div\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\n 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 }\n </div>\n </cps-menu>\n </div>\n }\n @if (showExportBtn) {\n <div\n class=\"cps-table-tbar-export-btn\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-icon\n icon=\"export\"\n size=\"20\"\n [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n (click)=\"onExportData($event)\"></cps-icon>\n <cps-menu\n #exportMenu\n [items]=\"exportMenuItems\"\n [compressed]=\"true\"\n [withArrow]=\"false\">\n </cps-menu>\n </div>\n }\n @if (showDataReloadBtn) {\n <div\n class=\"cps-table-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"\n dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n \"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n }\n </div>\n }\n </ng-template>\n }\n\n @if (nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: {\n $implicit: columns\n }\n \"></ng-container>\n </ng-template>\n }\n\n @if (!nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n @if (rowExpansionTemplate) {\n <th\n style=\"width: 3rem\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n @if (reorderableRows) {\n <th\n style=\"width: 3rem\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n @if (selectable) {\n <th\n style=\"width: 4rem\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n }\n @if (headerTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: {\n $implicit: columns\n }\n \"></ng-container>\n }\n @if (!headerTemplate && columns.length > 0) {\n @if (sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTColSortable]=\"col[colFieldName]\"\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n [cpsTColSortable]=\"col[colFieldName]\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n @if (!sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTableDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <th\n style=\"width: 2rem\"\n class=\"cps-table-row-menu-cell\"\n cpsTColResizable\n [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n </tr>\n </ng-template>\n }\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 @if (rowExpansionTemplate) {\n <td 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 }\n @if (reorderableRows) {\n <td class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n >\u2630</span\n >\n </td>\n }\n @if (selectable) {\n <td>\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n }\n @if (bodyTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: item,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n }\n @if (!bodyTemplate) {\n @if (columns.length > 0) {\n @if (renderDataAsHTML) {\n @for (col of columns; track col) {\n <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n }\n } @else {\n @for (col of columns; track col) {\n <td>\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <td class=\"cps-table-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(item)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </table-row-menu>\n </td>\n }\n </tr>\n </ng-template>\n @if (rowExpansionTemplate; as item) {\n <ng-template pTemplate=\"rowexpansion\" 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 }\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-table-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}: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!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{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-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-mask.p-overlay-mask{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-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7643
7810
|
}
|
|
7644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
7811
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableComponent, decorators: [{
|
|
7645
7812
|
type: Component,
|
|
7646
7813
|
args: [{ selector: 'cps-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
7647
7814
|
FormsModule,
|
|
@@ -7895,10 +8062,10 @@ class CpsTableHeaderSelectableDirective {
|
|
|
7895
8062
|
this.checkboxCompRef.destroy();
|
|
7896
8063
|
this.viewContainerRef.clear();
|
|
7897
8064
|
}
|
|
7898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7899
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8066
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTHdrSelectable]", ngImport: i0 }); }
|
|
7900
8067
|
}
|
|
7901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableHeaderSelectableDirective, decorators: [{
|
|
7902
8069
|
type: Directive,
|
|
7903
8070
|
args: [{
|
|
7904
8071
|
standalone: true,
|
|
@@ -7924,10 +8091,10 @@ class CpsTableRowSelectableDirective {
|
|
|
7924
8091
|
this.checkboxCompRef.destroy();
|
|
7925
8092
|
this.viewContainerRef.clear();
|
|
7926
8093
|
}
|
|
7927
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
7928
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8094
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8095
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTableRowSelectableDirective, isStandalone: true, selector: "[cpsTRowSelectable]", inputs: { value: ["cpsTRowSelectable", "value"] }, ngImport: i0 }); }
|
|
7929
8096
|
}
|
|
7930
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTableRowSelectableDirective, decorators: [{
|
|
7931
8098
|
type: Directive,
|
|
7932
8099
|
args: [{
|
|
7933
8100
|
standalone: true,
|
|
@@ -8066,10 +8233,10 @@ class CpsTreeTableColumnFilterDirective {
|
|
|
8066
8233
|
this.filterCompRef.destroy();
|
|
8067
8234
|
this.viewContainerRef.clear();
|
|
8068
8235
|
}
|
|
8069
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8070
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8236
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8237
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTreeTableColumnFilterDirective, isStandalone: true, selector: "[cpsTTColFilter]", inputs: { field: ["cpsTTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTTColFilter"], usesOnChanges: true, ngImport: i0 }); }
|
|
8071
8238
|
}
|
|
8072
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableColumnFilterDirective, decorators: [{
|
|
8073
8240
|
type: Directive,
|
|
8074
8241
|
args: [{
|
|
8075
8242
|
standalone: true,
|
|
@@ -8114,10 +8281,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
8114
8281
|
* @group Directives
|
|
8115
8282
|
*/
|
|
8116
8283
|
class CpsTreeTableColumnResizableDirective extends TTResizableColumn {
|
|
8117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8118
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableColumnResizableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8285
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTreeTableColumnResizableDirective, isStandalone: true, selector: "[cpsTTColResizable]", inputs: { ttResizableColumnDisabled: ["cpsTTColResizableDisabled", "ttResizableColumnDisabled"] }, usesInheritance: true, ngImport: i0 }); }
|
|
8119
8286
|
}
|
|
8120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableColumnResizableDirective, decorators: [{
|
|
8121
8288
|
type: Directive,
|
|
8122
8289
|
args: [{
|
|
8123
8290
|
standalone: true,
|
|
@@ -8156,10 +8323,10 @@ class CpsTreeTableColumnSortableDirective extends TTSortableColumn {
|
|
|
8156
8323
|
this.sortIconRef.destroy();
|
|
8157
8324
|
this.viewContainerRef.clear();
|
|
8158
8325
|
}
|
|
8159
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8160
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8326
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i2$1.TreeTable }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8327
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTreeTableColumnSortableDirective, isStandalone: true, selector: "[cpsTTColSortable]", inputs: { field: ["cpsTTColSortable", "field"] }, usesInheritance: true, ngImport: i0 }); }
|
|
8161
8328
|
}
|
|
8162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableColumnSortableDirective, decorators: [{
|
|
8163
8330
|
type: Directive,
|
|
8164
8331
|
args: [{
|
|
8165
8332
|
standalone: true,
|
|
@@ -8189,10 +8356,10 @@ class CpsTreeTableHeaderSelectableDirective {
|
|
|
8189
8356
|
this.checkboxCompRef.destroy();
|
|
8190
8357
|
this.viewContainerRef.clear();
|
|
8191
8358
|
}
|
|
8192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8193
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8360
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTreeTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTTHdrSelectable]", ngImport: i0 }); }
|
|
8194
8361
|
}
|
|
8195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, decorators: [{
|
|
8196
8363
|
type: Directive,
|
|
8197
8364
|
args: [{
|
|
8198
8365
|
standalone: true,
|
|
@@ -8219,10 +8386,10 @@ class CpsTreeTableRowSelectableDirective {
|
|
|
8219
8386
|
this.checkboxCompRef.destroy();
|
|
8220
8387
|
this.viewContainerRef.clear();
|
|
8221
8388
|
}
|
|
8222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8223
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8389
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8390
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTreeTableRowSelectableDirective, isStandalone: true, selector: "[cpsTTRowSelectable]", inputs: { value: ["cpsTTRowSelectable", "value"] }, ngImport: i0 }); }
|
|
8224
8391
|
}
|
|
8225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableRowSelectableDirective, decorators: [{
|
|
8226
8393
|
type: Directive,
|
|
8227
8394
|
args: [{
|
|
8228
8395
|
standalone: true,
|
|
@@ -8260,10 +8427,10 @@ class CpsTreetableRowTogglerDirective {
|
|
|
8260
8427
|
this.togglerCompRef.destroy();
|
|
8261
8428
|
this.viewContainerRef.clear();
|
|
8262
8429
|
}
|
|
8263
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8264
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8430
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8431
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTreetableRowTogglerDirective, isStandalone: true, selector: "[cpsTTRowToggler]", inputs: { rowNode: ["cpsTTRowToggler", "rowNode"] }, ngImport: i0 }); }
|
|
8265
8432
|
}
|
|
8266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreetableRowTogglerDirective, decorators: [{
|
|
8267
8434
|
type: Directive,
|
|
8268
8435
|
args: [{
|
|
8269
8436
|
standalone: true,
|
|
@@ -8608,10 +8775,10 @@ class TreeTableUnsortDirective {
|
|
|
8608
8775
|
}
|
|
8609
8776
|
});
|
|
8610
8777
|
}
|
|
8611
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8612
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
8778
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TreeTableUnsortDirective, deps: [{ token: i2$1.TreeTable, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8779
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: TreeTableUnsortDirective, isStandalone: true, selector: "[ttWithUnsort]", ngImport: i0 }); }
|
|
8613
8780
|
}
|
|
8614
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8781
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TreeTableUnsortDirective, decorators: [{
|
|
8615
8782
|
type: Directive,
|
|
8616
8783
|
args: [{
|
|
8617
8784
|
standalone: true,
|
|
@@ -8642,10 +8809,10 @@ class CpsTreeTableDetectFilterTypePipe {
|
|
|
8642
8809
|
}
|
|
8643
8810
|
return 'text';
|
|
8644
8811
|
}
|
|
8645
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
8646
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
8812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableDetectFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
8813
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableDetectFilterTypePipe, isStandalone: true, name: "cpsTTDetectFilterType" }); }
|
|
8647
8814
|
}
|
|
8648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
8815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableDetectFilterTypePipe, decorators: [{
|
|
8649
8816
|
type: Pipe,
|
|
8650
8817
|
args: [{
|
|
8651
8818
|
name: 'cpsTTDetectFilterType',
|
|
@@ -9721,8 +9888,8 @@ class CpsTreeTableComponent {
|
|
|
9721
9888
|
return cleanNode;
|
|
9722
9889
|
});
|
|
9723
9890
|
}
|
|
9724
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
9725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
9891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", autoLayout: "autoLayout", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", rowMenuItems: "rowMenuItems", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemHeight: "virtualScrollItemHeight", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", exportOriginalData: "exportOriginalData", renderDataAsHTML: "renderDataAsHTML", data: "data", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode" }, outputs: { rowsSelected: "rowsSelected", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
|
|
9726
9893
|
TreeTableStyle,
|
|
9727
9894
|
TreeTableService,
|
|
9728
9895
|
{
|
|
@@ -9731,9 +9898,9 @@ class CpsTreeTableComponent {
|
|
|
9731
9898
|
// eslint-disable-next-line no-use-before-define
|
|
9732
9899
|
deps: [CpsTreeTableComponent]
|
|
9733
9900
|
}
|
|
9734
|
-
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "colgroupTemplate", first: true, predicate: ["colgroup"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{\n 'cps-treetable-loading': loading,\n 'cps-treetable-flex': defScrollHeight === 'flex',\n 'cps-treetable-nonvirtual': !virtualScroll,\n 'cps-treetable-autolayout-calced': autoLayout && scrollable\n }\"\n [value]=\"data\"\n [autoLayout]=\"autoLayout && !scrollable\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"deepEquals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\n [showGridlines]=\"bordered\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n @if (colgroupTemplate) {\n <ng-template pTemplate=\"colgroup\">\n <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n </ng-template>\n }\n @if (hasToolbar) {\n <ng-template pTemplate=\"caption\">\n @if (toolbarTemplate) {\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n }\n @if (!toolbarTemplate) {\n <div class=\"cps-treetable-tbar-left\">\n @if (toolbarIcon) {\n <div class=\"cps-treetable-tbar-icon\">\n <cps-icon\n [icon]=\"toolbarIcon\"\n [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n }\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n @if (showGlobalFilter) {\n <div class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"\n toolbarSize === 'small' ? 'underlined' : 'outlined'\n \"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n }\n </div>\n <div class=\"cps-treetable-tbar-right\">\n @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n }\n @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [icon]=\"additionalBtnOnSelectIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n }\n @if (showActionBtn) {\n <div class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [icon]=\"actionBtnIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n }\n @if (showExportBtn) {\n <div\n class=\"cps-treetable-tbar-export-btn ml-2\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-button\n label=\"Export\"\n [disabled]=\"exportBtnDisabled\"\n color=\"prepared\"\n type=\"solid\"\n icon=\"export\"\n [size]=\"toolbarSize\"\n (clicked)=\"onExportData()\">\n </cps-button>\n </div>\n }\n @if (showColumnsToggleBtn && columns.length > 0) {\n <div\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled\n ? 'text-lightest'\n : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"\n selectedColumns.length === columns.length\n \"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\">\n </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n @for (col of columns; track col) {\n <div\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span\n class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n }\n </div>\n </cps-menu>\n </div>\n }\n @if (showDataReloadBtn) {\n <div\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"\n dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n \"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n }\n </div>\n }\n </ng-template>\n }\n\n @if (nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: { $implicit: columns }\n \"></ng-container>\n </ng-template>\n }\n\n @if (!nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n @if (selectable) {\n <th\n cpsTTHdrSelectable\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n @if (headerTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: { $implicit: columns }\n \"></ng-container>\n }\n @if (!headerTemplate && columns.length > 0) {\n @if (sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTTColSortable]=\"col[colFieldName]\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n [cpsTTColSortable]=\"col[colFieldName]\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n @if (!sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <th\n class=\"cps-treetable-row-menu-cell\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n </tr>\n </ng-template>\n }\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n @if (selectable) {\n <td [cpsTTRowSelectable]=\"rowNode\"></td>\n }\n @if (bodyTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n }\n @if (!bodyTemplate) {\n @if (columns.length > 0) {\n @if (renderDataAsHTML) {\n @for (col of columns; track col; let i = $index) {\n @if (i === 0) {\n <td\n [cpsTTRowToggler]=\"rowNode\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n }\n @if (i > 0) {\n <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n }\n }\n } @else {\n @for (col of columns; track col; let i = $index) {\n @if (i === 0) {\n <td [cpsTTRowToggler]=\"rowNode\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n @if (i > 0) {\n <td>\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <td class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </table-row-menu>\n </td>\n }\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <cps-icon icon=\"angle-left\"></cps-icon>\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <cps-icon icon=\"angle-right\"></cps-icon>\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th,:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i2$1.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9901
|
+
], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "colgroupTemplate", first: true, predicate: ["colgroup"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n #primengTreeTable\n ttWithUnsort\n [ngClass]=\"{\n 'cps-treetable-loading': loading,\n 'cps-treetable-flex': defScrollHeight === 'flex',\n 'cps-treetable-nonvirtual': !virtualScroll,\n 'cps-treetable-autolayout-calced': autoLayout && scrollable\n }\"\n [value]=\"data\"\n [autoLayout]=\"autoLayout && !scrollable\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{\n numToleratedItems: numToleratedItems,\n autoSize: false\n }\"\n [columns]=\"selectedColumns\"\n [loading]=\"loading\"\n [rowHover]=\"rowHover\"\n [lazy]=\"lazy\"\n [(selection)]=\"selectedRows\"\n (selectionChange)=\"onSelectionChanged($event)\"\n compareSelectionBy=\"deepEquals\"\n [lazyLoadOnInit]=\"lazyLoadOnInit\"\n [styleClass]=\"styleClass\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [customSort]=\"customSort\"\n [sortMode]=\"sortMode\"\n [globalFilterFields]=\"globalFilterFields\"\n [paginator]=\"paginator\"\n [showCurrentPageReport]=\"true\"\n [alwaysShowPaginator]=\"alwaysShowPaginator\"\n [rows]=\"rows\"\n [first]=\"first\"\n [totalRecords]=\"totalRecords\"\n [resetPageOnSort]=\"resetPageOnSort\"\n [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\n [showGridlines]=\"bordered\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n (onPage)=\"onPageChange($event)\"\n (onSort)=\"onSort($event)\"\n (onFilter)=\"onFilter($event)\"\n (onLazyLoad)=\"onLazyLoaded($event)\"\n (sortFunction)=\"onSortFunction($event)\"\n (onNodeExpand)=\"onNodeExpanded($event)\"\n (onNodeCollapse)=\"onNodeCollapsed($event)\"\n (onNodeSelect)=\"onNodeSelected($event)\"\n (onNodeUnselect)=\"onNodeUnselected($event)\">\n @if (colgroupTemplate) {\n <ng-template pTemplate=\"colgroup\">\n <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n </ng-template>\n }\n @if (hasToolbar) {\n <ng-template pTemplate=\"caption\">\n @if (toolbarTemplate) {\n <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n }\n @if (!toolbarTemplate) {\n <div class=\"cps-treetable-tbar-left\">\n @if (toolbarIcon) {\n <div class=\"cps-treetable-tbar-icon\">\n <cps-icon\n [icon]=\"toolbarIcon\"\n [color]=\"toolbarIconColor\"></cps-icon>\n </div>\n }\n <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n @if (showGlobalFilter) {\n <div class=\"cps-treetable-tbar-global-filter\">\n <cps-input\n #globalFilterComp\n prefixIcon=\"search\"\n [placeholder]=\"globalFilterPlaceholder\"\n (valueChanged)=\"onFilterGlobal($event)\"\n [clearable]=\"true\"\n [disabled]=\"loading\"\n [appearance]=\"\n toolbarSize === 'small' ? 'underlined' : 'outlined'\n \"\n [hideDetails]=\"true\">\n </cps-input>\n </div>\n }\n </div>\n <div class=\"cps-treetable-tbar-right\">\n @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n label=\"Remove\"\n [disabled]=\"removeBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n icon=\"remove\"\n [size]=\"toolbarSize\"\n (clicked)=\"removeSelected()\">\n </cps-button>\n </div>\n }\n @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n <div class=\"cps-treetable-tbar-btn-on-select\">\n <cps-button\n [label]=\"additionalBtnOnSelectTitle\"\n [disabled]=\"additionalBtnOnSelectDisabled\"\n color=\"prepared\"\n type=\"borderless\"\n [icon]=\"additionalBtnOnSelectIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickAdditionalBtnOnSelect()\">\n </cps-button>\n </div>\n }\n @if (showActionBtn) {\n <div class=\"cps-treetable-tbar-action-btn\">\n <cps-button\n [label]=\"actionBtnTitle\"\n [disabled]=\"actionBtnDisabled\"\n color=\"prepared\"\n type=\"outlined\"\n [icon]=\"actionBtnIcon\"\n [size]=\"toolbarSize\"\n (clicked)=\"onClickActionBtn()\">\n </cps-button>\n </div>\n }\n @if (showExportBtn) {\n <div\n class=\"cps-treetable-tbar-export-btn ml-2\"\n [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n <cps-button\n label=\"Export\"\n [disabled]=\"exportBtnDisabled\"\n color=\"prepared\"\n type=\"solid\"\n icon=\"export\"\n [size]=\"toolbarSize\"\n (clicked)=\"onExportData()\">\n </cps-button>\n </div>\n }\n @if (showColumnsToggleBtn && columns.length > 0) {\n <div\n class=\"cps-treetable-tbar-coltoggle-btn\"\n [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n <cps-icon\n icon=\"columns\"\n size=\"normal\"\n [color]=\"\n columnsToggleBtnDisabled\n ? 'text-lightest'\n : 'prepared-lighten1'\n \"\n (click)=\"onColumnsToggle($event)\"></cps-icon>\n <cps-menu #colToggleMenu [withArrow]=\"false\">\n <div class=\"cps-treetable-coltoggle-menu\">\n <div\n class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n [class.allselected]=\"\n selectedColumns.length === columns.length\n \"\n (click)=\"toggleAllColumns()\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span class=\"cps-treetable-coltoggle-menu-item-check\">\n </span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\"\n >Show all columns</span\n >\n </span>\n </div>\n @for (col of columns; track col) {\n <div\n class=\"cps-treetable-coltoggle-menu-item\"\n (click)=\"onSelectColumn(col)\"\n [class.selected]=\"isColumnSelected(col)\">\n <span class=\"cps-treetable-coltoggle-menu-item-left\">\n <span\n class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n col[colHeaderName]\n }}</span>\n </span>\n </div>\n }\n </div>\n </cps-menu>\n </div>\n }\n @if (showDataReloadBtn) {\n <div\n class=\"cps-treetable-tbar-reload-btn\"\n [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n <cps-icon\n icon=\"refresh\"\n size=\"18\"\n [color]=\"\n dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n \"\n (click)=\"onReloadData()\">\n </cps-icon>\n </div>\n }\n </div>\n }\n </ng-template>\n }\n\n @if (nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <ng-container\n *ngTemplateOutlet=\"\n nestedHeaderTemplate;\n context: { $implicit: columns }\n \"></ng-container>\n </ng-template>\n }\n\n @if (!nestedHeaderTemplate; as columns) {\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n @if (selectable) {\n <th\n cpsTTHdrSelectable\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n @if (headerTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate;\n context: { $implicit: columns }\n \"></ng-container>\n }\n @if (!headerTemplate && columns.length > 0) {\n @if (sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTTColSortable]=\"col[colFieldName]\"\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n [cpsTTColSortable]=\"col[colFieldName]\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n @if (!sortable) {\n @if (filterableByColumns) {\n @for (col of columns; track col) {\n <th\n [cpsTTColFilter]=\"col[colFieldName]\"\n [filterType]=\"\n col[colFilterTypeName] ??\n (autoColumnFilterType\n ? (data | cpsTTDetectFilterType: col[colFieldName])\n : 'text')\n \"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n } @else {\n @for (col of columns; track col) {\n <th\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\">\n {{ col[colHeaderName] }}\n </th>\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <th\n class=\"cps-treetable-row-menu-cell\"\n cpsTTColResizable\n [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n }\n </tr>\n </ng-template>\n }\n\n <ng-template\n pTemplate=\"body\"\n let-rowData=\"rowData\"\n let-columns=\"columns\"\n let-rowNode\n let-rowIndex=\"rowIndex\">\n <tr\n [ttRow]=\"rowNode\"\n [ngClass]=\"{\n 'cps-treetable-row-selected':\n selectable && primengTreeTable.isSelected(rowNode.node)\n }\">\n <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n </td> -->\n @if (selectable) {\n <td [cpsTTRowSelectable]=\"rowNode\"></td>\n }\n @if (bodyTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n bodyTemplate;\n context: {\n $implicit: rowNode,\n rowIndex: rowIndex,\n columns: columns,\n rowData: rowData\n }\n \">\n </ng-container>\n }\n @if (!bodyTemplate) {\n @if (columns.length > 0) {\n @if (renderDataAsHTML) {\n @for (col of columns; track col; let i = $index) {\n @if (i === 0) {\n <td\n [cpsTTRowToggler]=\"rowNode\"\n [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n }\n @if (i > 0) {\n <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n }\n }\n } @else {\n @for (col of columns; track col; let i = $index) {\n @if (i === 0) {\n <td [cpsTTRowToggler]=\"rowNode\">\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n @if (i > 0) {\n <td>\n {{\n col[colDateFormatName]\n ? (rowData[col[colFieldName]]\n | date: col[colDateFormatName])\n : rowData[col[colFieldName]]\n }}\n </td>\n }\n }\n }\n }\n }\n @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n <td class=\"cps-treetable-row-menu-cell\">\n <table-row-menu\n (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n [showRowRemoveButton]=\"showRowRemoveButton\"\n [showRowEditButton]=\"showRowEditButton\"\n [customItems]=\"rowMenuItems\">\n </table-row-menu>\n </td>\n }\n </tr>\n </ng-template>\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td\n colspan=\"100\"\n class=\"cps-treetable-empty-message-td\"\n [ngStyle]=\"{ height: emptyBodyHeight }\">\n {{ emptyMessage }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"loadingicon\">\n <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n </ng-template>\n <ng-template pTemplate=\"paginatorleft\">\n <div class=\"cps-table-paginator-itms-per-page\">\n <span class=\"cps-table-paginator-items-per-page-title\"\n >Rows per page:\n </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChanged()\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\">\n </cps-select>\n </div>\n </ng-template>\n\n <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n </ng-template>\n <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n <cps-icon icon=\"angle-left\"></cps-icon>\n </ng-template>\n <ng-template pTemplate=\"paginatornextpagelinkicon\">\n <cps-icon icon=\"angle-right\"></cps-icon>\n </ng-template>\n <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\n </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th,:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i2$1.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9735
9902
|
}
|
|
9736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
9903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
|
|
9737
9904
|
type: Component,
|
|
9738
9905
|
args: [{ selector: 'cps-tree-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
9739
9906
|
FormsModule,
|
|
@@ -10061,10 +10228,10 @@ class CpsTagComponent {
|
|
|
10061
10228
|
this.onChange(value);
|
|
10062
10229
|
this.valueChanged.emit(value);
|
|
10063
10230
|
}
|
|
10064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
10231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ borderColor: color }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
10066
10233
|
}
|
|
10067
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTagComponent, decorators: [{
|
|
10068
10235
|
type: Component,
|
|
10069
10236
|
args: [{ imports: [CommonModule], selector: 'cps-tag', template: "<div\n [ngClass]=\"classesList\"\n [class.unselected]=\"!value && selectable\"\n [ngStyle]=\"{ borderColor: color }\"\n (click)=\"toggleSelected()\">\n <p>{{ label }}</p>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
|
|
10070
10237
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -10168,10 +10335,10 @@ class CpsPaginatorComponent {
|
|
|
10168
10335
|
this.paginator.rows = rows;
|
|
10169
10336
|
this.paginator.changePage(this.paginator.getPage());
|
|
10170
10337
|
}
|
|
10171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
10338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsPaginatorComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10339
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{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: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "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"] }] }); }
|
|
10173
10340
|
}
|
|
10174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
|
|
10175
10342
|
type: Component,
|
|
10176
10343
|
args: [{ selector: 'cps-paginator', imports: [PaginatorModule, CpsSelectComponent, FormsModule], template: "<p-paginator\n #paginator\n (onPageChange)=\"onPageChange($event)\"\n [first]=\"first\"\n [rows]=\"rows\"\n [style]=\"{ background: backgroundColor }\"\n [totalRecords]=\"totalRecords\"\n [showFirstLastIcon]=\"true\"\n [showCurrentPageReport]=\"true\"\n [alwaysShow]=\"alwaysShow\"\n [templateLeft]=\"itemsPerPageTemplate\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n <div class=\"cps-paginator-itms-per-page\">\n <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n <cps-select\n [options]=\"rowOptions\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"rows\"\n (valueChanged)=\"onRowsPerPageChange($event)\"\n [returnObject]=\"false\"\n optionsClass=\"cps-paginator-page-options\"></cps-select>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{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"] }]
|
|
10177
10344
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
@@ -10215,10 +10382,10 @@ class CpsPaginatePipe {
|
|
|
10215
10382
|
const last = first + rows;
|
|
10216
10383
|
return items.slice(first, last);
|
|
10217
10384
|
}
|
|
10218
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10219
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.
|
|
10385
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
10386
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: CpsPaginatePipe, isStandalone: true, name: "cpsPaginate" }); }
|
|
10220
10387
|
}
|
|
10221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsPaginatePipe, decorators: [{
|
|
10222
10389
|
type: Pipe,
|
|
10223
10390
|
args: [{
|
|
10224
10391
|
standalone: true,
|
|
@@ -10370,8 +10537,8 @@ class CpsExpansionPanelComponent {
|
|
|
10370
10537
|
this._renderer.setStyle(el, 'visibility', 'hidden');
|
|
10371
10538
|
}
|
|
10372
10539
|
}
|
|
10373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
10540
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$5.AnimationBuilder }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, viewQueries: [{ propertyName: "panelContentElem", first: true, predicate: ["panelContentElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : ''\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n @if (prefixIcon) {\n <span class=\"cps-expansion-panel-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n }\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n @if (showChevron && !disabled) {\n <span class=\"cps-expansion-panel-chevron\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\">\n </cps-icon>\n </span>\n }\n </div>\n <div class=\"cps-expansion-panel-content\" #panelContentElem>\n <div class=\"cps-expansion-panel-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
|
|
10375
10542
|
trigger('panelHeader', [
|
|
10376
10543
|
state('hidden', style({
|
|
10377
10544
|
borderBottom: ''
|
|
@@ -10384,7 +10551,7 @@ class CpsExpansionPanelComponent {
|
|
|
10384
10551
|
])
|
|
10385
10552
|
] }); }
|
|
10386
10553
|
}
|
|
10387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
|
|
10388
10555
|
type: Component,
|
|
10389
10556
|
args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', animations: [
|
|
10390
10557
|
trigger('panelHeader', [
|
|
@@ -10479,8 +10646,8 @@ class CpsSidebarMenuComponent {
|
|
|
10479
10646
|
toggleSidebar() {
|
|
10480
10647
|
this.isExpanded = !this.isExpanded;
|
|
10481
10648
|
}
|
|
10482
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10483
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
10649
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: "items", isExpanded: "isExpanded", exactRoutes: "exactRoutes", 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': !isExpanded }\">\n @for (item of items; track item) {\n @if (item.url) {\n <a\n class=\"cps-sidebar-menu-item\"\n [routerLink]=\"[item.url]\"\n routerLinkActive=\"active\"\n [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n [ngClass]=\"{ disabled: item.disabled }\">\n <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n <span\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </a>\n }\n @if (!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\n class=\"cps-sidebar-menu-item-label\"\n [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n {{ item.title }}\n </span>\n </div>\n }\n }\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;-ms-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);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:var(--cps-color-highlight-active)}: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:var(--cps-color-highlight-active);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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
|
|
10484
10651
|
trigger('onExpand', [
|
|
10485
10652
|
state('collapsed', style({
|
|
10486
10653
|
marginTop: '0',
|
|
@@ -10498,7 +10665,7 @@ class CpsSidebarMenuComponent {
|
|
|
10498
10665
|
])
|
|
10499
10666
|
] }); }
|
|
10500
10667
|
}
|
|
10501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10668
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSidebarMenuComponent, decorators: [{
|
|
10502
10669
|
type: Component,
|
|
10503
10670
|
args: [{ selector: 'cps-sidebar-menu', imports: [CommonModule, CpsMenuComponent, CpsIconComponent, RouterModule], animations: [
|
|
10504
10671
|
trigger('onExpand', [
|
|
@@ -10754,10 +10921,10 @@ class CpsTextareaComponent {
|
|
|
10754
10921
|
focus() {
|
|
10755
10922
|
this._elementRef?.nativeElement?.querySelector('textarea')?.focus();
|
|
10756
10923
|
}
|
|
10757
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10758
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
10924
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10925
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", hint: "hint", disabled: "disabled", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n @if (label) {\n <div\n class=\"cps-textarea-label\"\n [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-textarea-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 }\n </div>\n }\n\n <div\n class=\"cps-textarea-wrap\"\n [ngClass]=\"{\n 'cps-textarea-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear\n }\">\n <textarea\n spellcheck=\"false\"\n [cols]=\"cols\"\n [rows]=\"rows\"\n [autofocus]=\"autofocus\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [ngStyle]=\"{\n width: cvtWidth,\n resize: resizable\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"updateValueEvent($event)\"></textarea>\n\n @if (clearable && !disabled) {\n <span\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-textarea-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-textarea-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:var(--cps-color-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-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.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"] }] }); }
|
|
10759
10926
|
}
|
|
10760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
10927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTextareaComponent, decorators: [{
|
|
10761
10928
|
type: Component,
|
|
10762
10929
|
args: [{ selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n @if (label) {\n <div\n class=\"cps-textarea-label\"\n [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-textarea-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 }\n </div>\n }\n\n <div\n class=\"cps-textarea-wrap\"\n [ngClass]=\"{\n 'cps-textarea-wrap-error': error,\n clearable: clearable,\n 'persistent-clear': persistentClear\n }\">\n <textarea\n spellcheck=\"false\"\n [cols]=\"cols\"\n [rows]=\"rows\"\n [autofocus]=\"autofocus\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [ngStyle]=\"{\n width: cvtWidth,\n resize: resizable\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"updateValueEvent($event)\"></textarea>\n\n @if (clearable && !disabled) {\n <span\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-textarea-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-textarea-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:var(--cps-color-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
|
|
10763
10930
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -10865,10 +11032,10 @@ class CpsTabComponent {
|
|
|
10865
11032
|
this.badgeTooltip = '';
|
|
10866
11033
|
this.active = false;
|
|
10867
11034
|
}
|
|
10868
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10869
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
11035
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11036
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
10870
11037
|
}
|
|
10871
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTabComponent, decorators: [{
|
|
10872
11039
|
type: Component,
|
|
10873
11040
|
args: [{ imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
|
|
10874
11041
|
}], propDecorators: { label: [{
|
|
@@ -11090,8 +11257,8 @@ class CpsTabGroupComponent {
|
|
|
11090
11257
|
parseFloat(style.borderRightWidth);
|
|
11091
11258
|
return width;
|
|
11092
11259
|
}
|
|
11093
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11094
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cps-tabs\"\n [class]=\"headerClass\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n @if (!backBtnVisible) {\n <div\n class=\"nav-btn nav-btn-back\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n }\n <ul #tabsList class=\"cps-tabs-list\">\n @for (tab of tabs; track tab; let tabIndex = $index) {\n @if (tab.tooltipText) {\n <li\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n @if (!tab.tooltipText) {\n <li\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n }\n }\n </ul>\n @if (!forwardBtnVisible) {\n <div\n class=\"nav-btn nav-btn-forward\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n }\n</div>\n<div\n class=\"cps-tab-content-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n @for (tab of tabs; track tab) {\n @if (tab.active) {\n <div class=\"cps-tab-content\">\n @if (animationType === 'slide') {\n <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n @if (animationType === 'fade') {\n <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n }\n </div>\n }\n }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n @if (tab.icon) {\n <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n }\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\n @if (tab.badgeValue) {\n @if (tab.badgeTooltip) {\n <div class=\"cps-tab-badge\" [cpsTooltip]=\"tab.badgeTooltip\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n @if (!tab.badgeTooltip) {\n <div class=\"cps-tab-badge\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n }\n }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
|
|
11095
11262
|
trigger('slideInOut', [
|
|
11096
11263
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
11097
11264
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -11119,7 +11286,7 @@ class CpsTabGroupComponent {
|
|
|
11119
11286
|
])
|
|
11120
11287
|
] }); }
|
|
11121
11288
|
}
|
|
11122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTabGroupComponent, decorators: [{
|
|
11123
11290
|
type: Component,
|
|
11124
11291
|
args: [{ imports: [CommonModule, CpsIconComponent, CpsTooltipDirective], selector: 'cps-tab-group', animations: [
|
|
11125
11292
|
trigger('slideInOut', [
|
|
@@ -11489,10 +11656,10 @@ class CpsTimepickerComponent {
|
|
|
11489
11656
|
_getRange(startFrom, until) {
|
|
11490
11657
|
return Array.from({ length: until + 1 - startFrom }, (_, k) => k + startFrom);
|
|
11491
11658
|
}
|
|
11492
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTimepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], ngImport: i0, template: "<div class=\"cps-timepicker\">\n @if (label) {\n <div\n class=\"cps-timepicker-label\"\n [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-timepicker-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 }\n </div>\n }\n <div class=\"cps-timepicker-body\">\n <cps-autocomplete\n #hoursField\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"hoursOptions\"\n [withOptionsAliases]=\"!use24HourTime\"\n [useOptionsAliasesWhenNoMatch]=\"true\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.hours\"\n (valueChanged)=\"updateHours($event)\"\n [externalError]=\"hoursError\"\n placeholder=\"HH\"></cps-autocomplete>\n <span class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #minutesField\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"minutesOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.minutes\"\n (valueChanged)=\"updateMinutes($event)\"\n [externalError]=\"minutesError\"\n placeholder=\"MM\"></cps-autocomplete>\n @if (withSeconds) {\n <span class=\"cps-timepicker-delimiter\">:</span>\n }\n @if (withSeconds) {\n <cps-autocomplete\n #secondsField\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"secondsOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.seconds\"\n (valueChanged)=\"updateSeconds($event)\"\n [externalError]=\"secondsError\"\n placeholder=\"SS\"></cps-autocomplete>\n }\n @if (!use24HourTime) {\n <cps-button-toggle\n class=\"cps-timepicker-am-pm-selector\"\n [options]=\"dayPeriodOptions\"\n [disabled]=\"disabled\"\n [value]=\"value?.dayPeriod || 'AM'\"\n (valueChanged)=\"updateDayPeriod($event)\">\n </cps-button-toggle>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-timepicker-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-timepicker-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
|
|
11494
11661
|
}
|
|
11495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTimepickerComponent, decorators: [{
|
|
11496
11663
|
type: Component,
|
|
11497
11664
|
args: [{ selector: 'cps-timepicker', imports: [
|
|
11498
11665
|
CommonModule,
|
|
@@ -11684,10 +11851,10 @@ class CpsFileUploadComponent {
|
|
|
11684
11851
|
}
|
|
11685
11852
|
return false;
|
|
11686
11853
|
}
|
|
11687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
11854
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: "extensions", fileDesc: "fileDesc", width: "width", fileInfo: "fileInfo", fileProcessingCallback: "fileProcessingCallback", fileNameTooltipPosition: "fileNameTooltipPosition", fileNameTooltipOffset: ["fileNameTooltipOffset", "fileNameTooltipOffset", numberAttribute] }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: cvtWidth }\">\n <div\n class=\"cps-file-upload-dropzone\"\n [ngClass]=\"{\n 'dragged-over': isDragoverFile,\n 'with-uploads': uploadedFile?.name\n }\"\n (dragend)=\"isDragoverFile = false\"\n (dragenter)=\"isDragoverFile = true\"\n (dragleave)=\"isDragoverFile = false\"\n (dragover)=\"isDragoverFile = true\"\n (mouseleave)=\"isDragoverFile = false\"\n (drop)=\"tryUploadFile($event)\">\n <input\n #fileInput\n (change)=\"tryUploadFile($event)\"\n type=\"file\"\n [accept]=\"extensionsString\"\n title=\"\" />\n <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n <div class=\"cps-file-upload-dropzone-title\">\n Drag&Drop or choose a file to upload\n </div>\n @if (fileDesc || extensionsStringAsterisks) {\n <span class=\"cps-file-upload-dropzone-file-desc\"\n >{{ fileDesc }}\n {{\n extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n }}</span\n >\n }\n @if (fileInfo) {\n <div class=\"cps-file-upload-dropzone-content\">\n <cps-icon color=\"calm\" icon=\"info-circle\" size=\"xsmall\"></cps-icon>\n {{ fileInfo }}\n </div>\n }\n @if (isProcessingFile && uploadedFile) {\n <cps-progress-linear\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-file-upload-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n }\n </div>\n @if (uploadedFile) {\n <div class=\"cps-file-upload-uploaded-files\">\n <div class=\"cps-file-upload-uploaded-file\">\n <div class=\"cps-file-upload-uploaded-file-title\">\n <cps-icon\n class=\"cps-file-upload-uploaded-file-status-icon\"\n [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n [color]=\"isProcessingFile ? 'warn' : 'success'\">\n </cps-icon>\n <div\n class=\"cps-file-upload-uploaded-file-name\"\n cpsTooltip=\"{{ uploadedFile.name }}\"\n [tooltipPosition]=\"fileNameTooltipPosition\"\n [tooltipOffset]=\"fileNameTooltipOffset\"\n tooltipOpenOn=\"hover\">\n {{ uploadedFile.name }}\n </div>\n </div>\n @if (!isProcessingFile) {\n <cps-icon\n class=\"cps-file-upload-uploaded-file-remove-icon\"\n icon=\"remove\"\n color=\"error\"\n (click)=\"removeUploadedFile()\">\n </cps-icon>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:16px;font-size:1rem}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 60px)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer;flex-shrink:0;margin-left:8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
|
|
11689
11856
|
}
|
|
11690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
11857
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, decorators: [{
|
|
11691
11858
|
type: Component,
|
|
11692
11859
|
args: [{ selector: 'cps-file-upload', imports: [
|
|
11693
11860
|
CommonModule,
|
|
@@ -12122,10 +12289,10 @@ class CronValidationService {
|
|
|
12122
12289
|
];
|
|
12123
12290
|
return validMonths.includes(month.toUpperCase());
|
|
12124
12291
|
}
|
|
12125
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
12126
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
12292
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CronValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
12293
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CronValidationService, providedIn: 'root' }); }
|
|
12127
12294
|
}
|
|
12128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CronValidationService, decorators: [{
|
|
12129
12296
|
type: Injectable,
|
|
12130
12297
|
args: [{
|
|
12131
12298
|
providedIn: 'root'
|
|
@@ -13391,10 +13558,10 @@ class CpsSchedulerComponent {
|
|
|
13391
13558
|
const res = Number(value);
|
|
13392
13559
|
return isNaN(res) ? 0 : res;
|
|
13393
13560
|
}
|
|
13394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n <cps-button-toggle\n data-testid=\"schedule-type-toggle\"\n [options]=\"scheduleTypes\"\n [disabled]=\"disabled\"\n [label]=\"label\"\n [infoTooltip]=\"infoTooltip\"\n [(ngModel)]=\"activeScheduleType\"\n (ngModelChange)=\"setActiveScheduleType($event)\">\n </cps-button-toggle>\n</div>\n\n<div\n class=\"cps-scheduler-container\"\n [class.cps-scheduler-container-disabled]=\"disabled\">\n @switch (activeScheduleType) {\n @case ('Not set') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n }\n\n @case ('Minutes') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.minutes.minutes\"\n [options]=\"selectOptions.minutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n minute(s)\n </div>\n </div>\n }\n\n @case ('Hourly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-hours-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.hours\"\n [options]=\"selectOptions.hours\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n hour(s) on minute\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.minutes\"\n [options]=\"selectOptions.fullMinutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n </div>\n </div>\n }\n\n @case ('Daily') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.daily.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'everyDays', disabled: disabled }\"\n data-testid=\"daily-subtab-everyDays\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyDays'\n \">\n Every\n <cps-select\n width=\"70px\"\n data-testid=\"daily-every-days-input\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.daily.everyDays.days\"\n [options]=\"selectOptions.monthDays\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n day(s) at\n <cps-timepicker\n data-testid=\"daily-timepicker\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyDays)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n </cps-timepicker>\n </div>\n </cps-radio>\n <cps-radio\n data-testid=\"daily-subtab-everyWeekDay\"\n [option]=\"{ value: 'everyWeekDay', disabled: disabled }\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n data-testid=\"daily-weekday-config\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyWeekDay'\n \">\n Every working day at\n <cps-timepicker\n [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.daily.everyWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Weekly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n <div class=\"cps-scheduler-days-checkbox-group\">\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-MON\"\n label=\"Monday\"\n [(ngModel)]=\"state.weekly.MON\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-TUE\"\n label=\"Tuesday\"\n [(ngModel)]=\"state.weekly.TUE\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-WED\"\n label=\"Wednesday\"\n [(ngModel)]=\"state.weekly.WED\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-THU\"\n label=\"Thursday\"\n [(ngModel)]=\"state.weekly.THU\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-FRI\"\n label=\"Friday\"\n [(ngModel)]=\"state.weekly.FRI\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SAT\"\n label=\"Saturday\"\n [(ngModel)]=\"state.weekly.SAT\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SUN\"\n label=\"Sunday\"\n [(ngModel)]=\"state.weekly.SUN\">\n </cps-checkbox>\n </div>\n <div class=\"cps-scheduler-tab-pane-row\">\n at\n <cps-timepicker\n [disabled]=\"disabled\"\n data-testid=\"weekly-timepicker\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.weekly)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n </cps-timepicker>\n </div>\n </div>\n }\n\n @case ('Monthly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.monthly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificDay'\n \">\n On the\n <cps-select\n width=\"120px\"\n data-testid=\"monthly-day-select\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"70px\"\n data-testid=\"monthly-months-input\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) at\n <cps-timepicker\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.monthly.specificDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"monthly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.monthly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificWeekDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificWeekDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificWeekDay'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"monthly-week-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"130px\"\n data-testid=\"monthly-weekday-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"90px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n data-testid=\"monthly-weekday-months-input\"\n [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) starting in\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"monthly-weekday-start-month-select\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n data-testid=\"monthly-weekday-timepicker\"\n [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Yearly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.yearly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificMonthDay', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthDay'\n \">\n Every\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n [options]=\"selectOptions.months\"\n data-testid=\"yearly-month-select\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n on the\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-day-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"yearly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.yearly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificMonthWeek', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthWeek\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthWeek'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"yearly-week-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-weekday-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthWeek)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Advanced') {\n <div data-testid=\"advanced-config\">\n <form [formGroup]=\"form\">\n <cps-input\n label=\"\"\n data-testid=\"advanced-cron-input\"\n [disabled]=\"disabled\"\n width=\"500px\"\n placeholder=\"Please enter\"\n formControlName=\"advanced\"\n (valueChanged)=\"regenerateCron()\">\n </cps-input>\n </form>\n </div>\n }\n }\n\n @if (cron && showTimeZone) {\n <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n <cps-autocomplete\n label=\"Time zone\"\n data-testid=\"timezone-select\"\n [(ngModel)]=\"timeZone\"\n (valueChanged)=\"onTimeZoneChanged($event)\"\n [returnObject]=\"false\"\n width=\"300\"\n [options]=\"timeZoneOptions\">\n </cps-autocomplete>\n </div>\n }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n <cps-button-toggle\n data-testid=\"schedule-type-toggle\"\n [options]=\"scheduleTypes\"\n [disabled]=\"disabled\"\n [label]=\"label\"\n [infoTooltip]=\"infoTooltip\"\n [(ngModel)]=\"activeScheduleType\"\n (ngModelChange)=\"setActiveScheduleType($event)\">\n </cps-button-toggle>\n</div>\n\n<div\n class=\"cps-scheduler-container\"\n [class.cps-scheduler-container-disabled]=\"disabled\">\n @switch (activeScheduleType) {\n @case ('Not set') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n }\n\n @case ('Minutes') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.minutes.minutes\"\n [options]=\"selectOptions.minutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n minute(s)\n </div>\n </div>\n }\n\n @case ('Hourly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-hours-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.hours\"\n [options]=\"selectOptions.hours\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n hour(s) on minute\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.minutes\"\n [options]=\"selectOptions.fullMinutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n </div>\n </div>\n }\n\n @case ('Daily') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.daily.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'everyDays', disabled: disabled }\"\n data-testid=\"daily-subtab-everyDays\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyDays'\n \">\n Every\n <cps-select\n width=\"70px\"\n data-testid=\"daily-every-days-input\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.daily.everyDays.days\"\n [options]=\"selectOptions.monthDays\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n day(s) at\n <cps-timepicker\n data-testid=\"daily-timepicker\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyDays)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n </cps-timepicker>\n </div>\n </cps-radio>\n <cps-radio\n data-testid=\"daily-subtab-everyWeekDay\"\n [option]=\"{ value: 'everyWeekDay', disabled: disabled }\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n data-testid=\"daily-weekday-config\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyWeekDay'\n \">\n Every working day at\n <cps-timepicker\n [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.daily.everyWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Weekly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n <div class=\"cps-scheduler-days-checkbox-group\">\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-MON\"\n label=\"Monday\"\n [(ngModel)]=\"state.weekly.MON\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-TUE\"\n label=\"Tuesday\"\n [(ngModel)]=\"state.weekly.TUE\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-WED\"\n label=\"Wednesday\"\n [(ngModel)]=\"state.weekly.WED\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-THU\"\n label=\"Thursday\"\n [(ngModel)]=\"state.weekly.THU\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-FRI\"\n label=\"Friday\"\n [(ngModel)]=\"state.weekly.FRI\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SAT\"\n label=\"Saturday\"\n [(ngModel)]=\"state.weekly.SAT\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SUN\"\n label=\"Sunday\"\n [(ngModel)]=\"state.weekly.SUN\">\n </cps-checkbox>\n </div>\n <div class=\"cps-scheduler-tab-pane-row\">\n at\n <cps-timepicker\n [disabled]=\"disabled\"\n data-testid=\"weekly-timepicker\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.weekly)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n </cps-timepicker>\n </div>\n </div>\n }\n\n @case ('Monthly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.monthly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificDay'\n \">\n On the\n <cps-select\n width=\"120px\"\n data-testid=\"monthly-day-select\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"70px\"\n data-testid=\"monthly-months-input\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) at\n <cps-timepicker\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.monthly.specificDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"monthly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.monthly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificWeekDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificWeekDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificWeekDay'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"monthly-week-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"130px\"\n data-testid=\"monthly-weekday-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"90px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n data-testid=\"monthly-weekday-months-input\"\n [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) starting in\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"monthly-weekday-start-month-select\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n data-testid=\"monthly-weekday-timepicker\"\n [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Yearly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.yearly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificMonthDay', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthDay'\n \">\n Every\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n [options]=\"selectOptions.months\"\n data-testid=\"yearly-month-select\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n on the\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-day-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"yearly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.yearly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificMonthWeek', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthWeek\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthWeek'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"yearly-week-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-weekday-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthWeek)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Advanced') {\n <div data-testid=\"advanced-config\">\n <form [formGroup]=\"form\">\n <cps-input\n label=\"\"\n data-testid=\"advanced-cron-input\"\n [disabled]=\"disabled\"\n width=\"500px\"\n placeholder=\"Please enter\"\n formControlName=\"advanced\"\n (valueChanged)=\"regenerateCron()\">\n </cps-input>\n </form>\n </div>\n }\n }\n\n @if (cron && showTimeZone) {\n <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n <cps-autocomplete\n label=\"Time zone\"\n data-testid=\"timezone-select\"\n [(ngModel)]=\"timeZone\"\n (valueChanged)=\"onTimeZoneChanged($event)\"\n [returnObject]=\"false\"\n width=\"300\"\n [options]=\"timeZoneOptions\">\n </cps-autocomplete>\n </div>\n }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13396
13563
|
}
|
|
13397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
|
|
13398
13565
|
type: Component,
|
|
13399
13566
|
args: [{ selector: 'cps-scheduler', imports: [
|
|
13400
13567
|
FormsModule,
|
|
@@ -13531,10 +13698,10 @@ class CpsSwitchComponent {
|
|
|
13531
13698
|
focus() {
|
|
13532
13699
|
this._elementRef?.nativeElement?.querySelector('input')?.focus();
|
|
13533
13700
|
}
|
|
13534
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13535
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
13701
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSwitchComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSwitchComponent, isStandalone: true, selector: "cps-switch", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-switch-container\">\n <label class=\"cps-switch\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-switch-slider\"></span>\n </label>\n @if (label) {\n <span\n class=\"cps-switch-label\"\n [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n >{{ label }}</span\n >\n }\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-switch-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 }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
|
|
13536
13703
|
}
|
|
13537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSwitchComponent, decorators: [{
|
|
13538
13705
|
type: Component,
|
|
13539
13706
|
args: [{ imports: [CommonModule, CpsInfoCircleComponent], selector: 'cps-switch', template: "<div class=\"cps-switch-container\">\n <label class=\"cps-switch\">\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-switch-slider\"></span>\n </label>\n @if (label) {\n <span\n class=\"cps-switch-label\"\n [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n >{{ label }}</span\n >\n }\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-switch-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 }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
|
|
13540
13707
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -13601,10 +13768,10 @@ class CpsDividerComponent {
|
|
|
13601
13768
|
? `${convertSize(this.thickness())} ${this.type()} ${getCSSColor(this.color(), this.document)}`
|
|
13602
13769
|
: '';
|
|
13603
13770
|
}
|
|
13604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
13771
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDividerComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: CpsDividerComponent, isStandalone: true, selector: "cps-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-top": "borderTop()", "style.border-right": "borderRight()" }, classAttribute: "cps-divider" }, ngImport: i0, template: '', isInline: true, styles: [".cps-divider{display:block;margin:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13606
13773
|
}
|
|
13607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDividerComponent, decorators: [{
|
|
13608
13775
|
type: Component,
|
|
13609
13776
|
args: [{ selector: 'cps-divider', host: {
|
|
13610
13777
|
class: 'cps-divider',
|
|
@@ -13751,10 +13918,10 @@ class CpsDialogContentDirective {
|
|
|
13751
13918
|
constructor(viewContainerRef) {
|
|
13752
13919
|
this.viewContainerRef = viewContainerRef;
|
|
13753
13920
|
}
|
|
13754
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13755
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
13921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
13922
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsDialogContentDirective, isStandalone: true, selector: "[cpsDialogContent]", ngImport: i0 }); }
|
|
13756
13923
|
}
|
|
13757
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogContentDirective, decorators: [{
|
|
13758
13925
|
type: Directive,
|
|
13759
13926
|
args: [{
|
|
13760
13927
|
standalone: true,
|
|
@@ -14174,15 +14341,15 @@ class CpsDialogComponent {
|
|
|
14174
14341
|
this.onContainerDestroy();
|
|
14175
14342
|
this.componentRef?.destroy();
|
|
14176
14343
|
}
|
|
14177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: CpsDialogComponent, isStandalone: true, selector: "cps-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: CpsDialogContentDirective, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div\n #mask\n [ngClass]=\"{\n 'cps-dialog-mask': true,\n 'cps-dialog-overlay': config.modal !== false,\n 'cps-dialog-overlay-enter':\n config.modal !== false && !config.blurredBackground,\n 'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n config.modal !== false && config.blurredBackground,\n 'cps-dialog-left': position === 'left',\n 'cps-dialog-right': position === 'right',\n 'cps-dialog-top': position === 'top',\n 'cps-dialog-bottom': position === 'bottom',\n 'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n 'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n 'cps-dialog-bottom-left':\n position === 'bottomleft' || position === 'bottom-left',\n 'cps-dialog-bottom-right':\n position === 'bottomright' || position === 'bottom-right'\n }\"\n [class]=\"config.maskStyleClass || ''\">\n @if (visible) {\n <div\n #container\n [ngClass]=\"{\n 'cps-dialog': true,\n 'cps-dialog-resizable': resizable,\n 'cps-dialog-draggable': draggable && !maximized,\n 'cps-dialog-dragging': dragging,\n 'cps-dialog-maximized': maximized\n }\"\n [ngStyle]=\"config.style\"\n [class]=\"config.styleClass || ''\"\n [@animation]=\"{\n value: 'visible',\n params: {\n transform: transformOptions,\n transition:\n config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\"\n role=\"dialog\"\n [style.width]=\"config.width\"\n [style.height]=\"config.height\"\n [style.minWidth]=\"config.minWidth\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n @if (resizable && !maximized) {\n <div\n class=\"cps-dialog-resizable-handle\"\n style=\"z-index: 90\"\n (mousedown)=\"initResize($event)\"></div>\n }\n @if (config.showHeader !== false) {\n <div\n #header\n class=\"cps-dialog-header\"\n [ngClass]=\"{\n 'cps-dialog-header-left-bordered':\n config.showHeaderLeftBorder !== false,\n 'cps-dialog-header-bottom-bordered':\n config.showHeaderBottomBorder !== false\n }\"\n (mousedown)=\"initDrag($event)\">\n <div class=\"cps-dialog-header-left\">\n <div class=\"cps-dialog-header-icon\">\n @if (config.headerIcon) {\n <cps-icon\n [icon]=\"config.headerIcon\"\n [color]=\"config.headerIconColor || 'currentColor'\">\n </cps-icon>\n }\n </div>\n <span class=\"cps-dialog-header-title\">{{\n config.headerTitle\n }}</span>\n <div class=\"cps-dialog-header-info-circle\">\n @if (config.headerInfoTooltip) {\n <cps-info-circle\n size=\"small\"\n [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n [tooltipText]=\"config.headerInfoTooltip\">\n </cps-info-circle>\n }\n </div>\n </div>\n <div class=\"cps-dialog-header-action-buttons\">\n @if (maximizable) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n [icon]=\"maximized ? 'minimize' : 'maximize'\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"toggleMaximized()\">\n </cps-button>\n }\n @if (config.showCloseBtn !== false) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n icon=\"close-x-2\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"hide()\">\n </cps-button>\n }\n </div>\n </div>\n }\n <div\n #content\n class=\"cps-dialog-content\"\n [ngStyle]=\"config.contentStyle\"\n [class]=\"config.contentStyleClass || ''\">\n <ng-template cpsDialogContent></ng-template>\n </div>\n </div>\n }\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: CpsDialogContentDirective, selector: "[cpsDialogContent]" }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
|
|
14344
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: CpsDialogRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: CpsDialogConfig }, { token: i0.NgZone }, { token: i1$1.PrimeNG }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsDialogComponent, isStandalone: true, selector: "cps-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: CpsDialogContentDirective, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div\n #mask\n [ngClass]=\"{\n 'cps-dialog-mask': true,\n 'cps-dialog-overlay': config.modal !== false,\n 'cps-dialog-overlay-enter':\n config.modal !== false && !config.blurredBackground,\n 'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n config.modal !== false && config.blurredBackground,\n 'cps-dialog-left': position === 'left',\n 'cps-dialog-right': position === 'right',\n 'cps-dialog-top': position === 'top',\n 'cps-dialog-bottom': position === 'bottom',\n 'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n 'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n 'cps-dialog-bottom-left':\n position === 'bottomleft' || position === 'bottom-left',\n 'cps-dialog-bottom-right':\n position === 'bottomright' || position === 'bottom-right'\n }\"\n [class]=\"config.maskStyleClass || ''\">\n @if (visible) {\n <div\n #container\n [ngClass]=\"{\n 'cps-dialog': true,\n 'cps-dialog-resizable': resizable,\n 'cps-dialog-draggable': draggable && !maximized,\n 'cps-dialog-dragging': dragging,\n 'cps-dialog-maximized': maximized\n }\"\n [ngStyle]=\"config.style\"\n [class]=\"config.styleClass || ''\"\n [@animation]=\"{\n value: 'visible',\n params: {\n transform: transformOptions,\n transition:\n config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\"\n role=\"dialog\"\n [style.width]=\"config.width\"\n [style.height]=\"config.height\"\n [style.minWidth]=\"config.minWidth\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n @if (resizable && !maximized) {\n <div\n class=\"cps-dialog-resizable-handle\"\n style=\"z-index: 90\"\n (mousedown)=\"initResize($event)\"></div>\n }\n @if (config.showHeader !== false) {\n <div\n #header\n class=\"cps-dialog-header\"\n [ngClass]=\"{\n 'cps-dialog-header-left-bordered':\n config.showHeaderLeftBorder !== false,\n 'cps-dialog-header-bottom-bordered':\n config.showHeaderBottomBorder !== false\n }\"\n (mousedown)=\"initDrag($event)\">\n <div class=\"cps-dialog-header-left\">\n <div class=\"cps-dialog-header-icon\">\n @if (config.headerIcon) {\n <cps-icon\n [icon]=\"config.headerIcon\"\n [color]=\"config.headerIconColor || 'currentColor'\">\n </cps-icon>\n }\n </div>\n <span class=\"cps-dialog-header-title\">{{\n config.headerTitle\n }}</span>\n <div class=\"cps-dialog-header-info-circle\">\n @if (config.headerInfoTooltip) {\n <cps-info-circle\n size=\"small\"\n [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n [tooltipText]=\"config.headerInfoTooltip\">\n </cps-info-circle>\n }\n </div>\n </div>\n <div class=\"cps-dialog-header-action-buttons\">\n @if (maximizable) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n [icon]=\"maximized ? 'minimize' : 'maximize'\"\n [ariaLabel]=\"maximized ? 'Minimize dialog' : 'Maximize dialog'\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"toggleMaximized()\">\n </cps-button>\n }\n @if (config.showCloseBtn !== false) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n icon=\"close-x-2\"\n ariaLabel=\"Close dialog\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"hide()\">\n </cps-button>\n }\n </div>\n </div>\n }\n <div\n #content\n class=\"cps-dialog-content\"\n [ngStyle]=\"config.contentStyle\"\n [class]=\"config.contentStyleClass || ''\">\n <ng-template cpsDialogContent></ng-template>\n </div>\n </div>\n }\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: CpsDialogContentDirective, selector: "[cpsDialogContent]" }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
|
|
14179
14346
|
trigger('animation', [
|
|
14180
14347
|
transition('void => visible', [useAnimation(showAnimation)]),
|
|
14181
14348
|
transition('visible => void', [useAnimation(hideAnimation)])
|
|
14182
14349
|
])
|
|
14183
14350
|
], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
14184
14351
|
}
|
|
14185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogComponent, decorators: [{
|
|
14186
14353
|
type: Component,
|
|
14187
14354
|
args: [{ selector: 'cps-dialog', imports: [
|
|
14188
14355
|
CommonModule,
|
|
@@ -14196,7 +14363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
14196
14363
|
transition('void => visible', [useAnimation(showAnimation)]),
|
|
14197
14364
|
transition('visible => void', [useAnimation(hideAnimation)])
|
|
14198
14365
|
])
|
|
14199
|
-
], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div\n #mask\n [ngClass]=\"{\n 'cps-dialog-mask': true,\n 'cps-dialog-overlay': config.modal !== false,\n 'cps-dialog-overlay-enter':\n config.modal !== false && !config.blurredBackground,\n 'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n config.modal !== false && config.blurredBackground,\n 'cps-dialog-left': position === 'left',\n 'cps-dialog-right': position === 'right',\n 'cps-dialog-top': position === 'top',\n 'cps-dialog-bottom': position === 'bottom',\n 'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n 'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n 'cps-dialog-bottom-left':\n position === 'bottomleft' || position === 'bottom-left',\n 'cps-dialog-bottom-right':\n position === 'bottomright' || position === 'bottom-right'\n }\"\n [class]=\"config.maskStyleClass || ''\">\n @if (visible) {\n <div\n #container\n [ngClass]=\"{\n 'cps-dialog': true,\n 'cps-dialog-resizable': resizable,\n 'cps-dialog-draggable': draggable && !maximized,\n 'cps-dialog-dragging': dragging,\n 'cps-dialog-maximized': maximized\n }\"\n [ngStyle]=\"config.style\"\n [class]=\"config.styleClass || ''\"\n [@animation]=\"{\n value: 'visible',\n params: {\n transform: transformOptions,\n transition:\n config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\"\n role=\"dialog\"\n [style.width]=\"config.width\"\n [style.height]=\"config.height\"\n [style.minWidth]=\"config.minWidth\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n @if (resizable && !maximized) {\n <div\n class=\"cps-dialog-resizable-handle\"\n style=\"z-index: 90\"\n (mousedown)=\"initResize($event)\"></div>\n }\n @if (config.showHeader !== false) {\n <div\n #header\n class=\"cps-dialog-header\"\n [ngClass]=\"{\n 'cps-dialog-header-left-bordered':\n config.showHeaderLeftBorder !== false,\n 'cps-dialog-header-bottom-bordered':\n config.showHeaderBottomBorder !== false\n }\"\n (mousedown)=\"initDrag($event)\">\n <div class=\"cps-dialog-header-left\">\n <div class=\"cps-dialog-header-icon\">\n @if (config.headerIcon) {\n <cps-icon\n [icon]=\"config.headerIcon\"\n [color]=\"config.headerIconColor || 'currentColor'\">\n </cps-icon>\n }\n </div>\n <span class=\"cps-dialog-header-title\">{{\n config.headerTitle\n }}</span>\n <div class=\"cps-dialog-header-info-circle\">\n @if (config.headerInfoTooltip) {\n <cps-info-circle\n size=\"small\"\n [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n [tooltipText]=\"config.headerInfoTooltip\">\n </cps-info-circle>\n }\n </div>\n </div>\n <div class=\"cps-dialog-header-action-buttons\">\n @if (maximizable) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n [icon]=\"maximized ? 'minimize' : 'maximize'\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"toggleMaximized()\">\n </cps-button>\n }\n @if (config.showCloseBtn !== false) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n icon=\"close-x-2\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"hide()\">\n </cps-button>\n }\n </div>\n </div>\n }\n <div\n #content\n class=\"cps-dialog-content\"\n [ngStyle]=\"config.contentStyle\"\n [class]=\"config.contentStyleClass || ''\">\n <ng-template cpsDialogContent></ng-template>\n </div>\n </div>\n }\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"] }]
|
|
14366
|
+
], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div\n #mask\n [ngClass]=\"{\n 'cps-dialog-mask': true,\n 'cps-dialog-overlay': config.modal !== false,\n 'cps-dialog-overlay-enter':\n config.modal !== false && !config.blurredBackground,\n 'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n config.modal !== false && config.blurredBackground,\n 'cps-dialog-left': position === 'left',\n 'cps-dialog-right': position === 'right',\n 'cps-dialog-top': position === 'top',\n 'cps-dialog-bottom': position === 'bottom',\n 'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n 'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n 'cps-dialog-bottom-left':\n position === 'bottomleft' || position === 'bottom-left',\n 'cps-dialog-bottom-right':\n position === 'bottomright' || position === 'bottom-right'\n }\"\n [class]=\"config.maskStyleClass || ''\">\n @if (visible) {\n <div\n #container\n [ngClass]=\"{\n 'cps-dialog': true,\n 'cps-dialog-resizable': resizable,\n 'cps-dialog-draggable': draggable && !maximized,\n 'cps-dialog-dragging': dragging,\n 'cps-dialog-maximized': maximized\n }\"\n [ngStyle]=\"config.style\"\n [class]=\"config.styleClass || ''\"\n [@animation]=\"{\n value: 'visible',\n params: {\n transform: transformOptions,\n transition:\n config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n }\n }\"\n (@animation.start)=\"onAnimationStart($event)\"\n (@animation.done)=\"onAnimationEnd($event)\"\n role=\"dialog\"\n [style.width]=\"config.width\"\n [style.height]=\"config.height\"\n [style.minWidth]=\"config.minWidth\"\n [style.minHeight]=\"config.minHeight\"\n [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n @if (resizable && !maximized) {\n <div\n class=\"cps-dialog-resizable-handle\"\n style=\"z-index: 90\"\n (mousedown)=\"initResize($event)\"></div>\n }\n @if (config.showHeader !== false) {\n <div\n #header\n class=\"cps-dialog-header\"\n [ngClass]=\"{\n 'cps-dialog-header-left-bordered':\n config.showHeaderLeftBorder !== false,\n 'cps-dialog-header-bottom-bordered':\n config.showHeaderBottomBorder !== false\n }\"\n (mousedown)=\"initDrag($event)\">\n <div class=\"cps-dialog-header-left\">\n <div class=\"cps-dialog-header-icon\">\n @if (config.headerIcon) {\n <cps-icon\n [icon]=\"config.headerIcon\"\n [color]=\"config.headerIconColor || 'currentColor'\">\n </cps-icon>\n }\n </div>\n <span class=\"cps-dialog-header-title\">{{\n config.headerTitle\n }}</span>\n <div class=\"cps-dialog-header-info-circle\">\n @if (config.headerInfoTooltip) {\n <cps-info-circle\n size=\"small\"\n [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n [tooltipText]=\"config.headerInfoTooltip\">\n </cps-info-circle>\n }\n </div>\n </div>\n <div class=\"cps-dialog-header-action-buttons\">\n @if (maximizable) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n [icon]=\"maximized ? 'minimize' : 'maximize'\"\n [ariaLabel]=\"maximized ? 'Minimize dialog' : 'Maximize dialog'\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"toggleMaximized()\">\n </cps-button>\n }\n @if (config.showCloseBtn !== false) {\n <cps-button\n class=\"cps-dialog-header-action-button\"\n icon=\"close-x-2\"\n ariaLabel=\"Close dialog\"\n size=\"small\"\n width=\"32\"\n color=\"graphite\"\n type=\"borderless\"\n (clicked)=\"hide()\">\n </cps-button>\n }\n </div>\n </div>\n }\n <div\n #content\n class=\"cps-dialog-content\"\n [ngStyle]=\"config.contentStyle\"\n [class]=\"config.contentStyleClass || ''\">\n <ng-template cpsDialogContent></ng-template>\n </div>\n </div>\n }\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"] }]
|
|
14200
14367
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
14201
14368
|
type: Inject,
|
|
14202
14369
|
args: [DOCUMENT]
|
|
@@ -14228,10 +14395,10 @@ class CpsConfirmationComponent {
|
|
|
14228
14395
|
close(confirm) {
|
|
14229
14396
|
this._dialogRef?.close(confirm);
|
|
14230
14397
|
}
|
|
14231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
14398
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsConfirmationComponent, deps: [{ token: CpsDialogRef }, { token: CpsDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsConfirmationComponent, isStandalone: true, selector: "cps-confirmation", ngImport: i0, template: "<div class=\"cps-confirmation\">\n <span class=\"cps-confirmation-subtitle\" [innerHTML]=\"subtitle\"></span>\n <div class=\"cps-confirmation-buttons\">\n <cps-button\n type=\"outlined\"\n label=\"No\"\n (clicked)=\"close(false)\"\n color=\"prepared\">\n </cps-button>\n <cps-button\n data-testid=\"btn-yes\"\n label=\"Yes\"\n (clicked)=\"close(true)\"\n color=\"prepared\">\n </cps-button>\n </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:8px}:host .cps-confirmation-subtitle{font-size:16px;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:28px}\n"], dependencies: [{ kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }] }); }
|
|
14233
14400
|
}
|
|
14234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsConfirmationComponent, decorators: [{
|
|
14235
14402
|
type: Component,
|
|
14236
14403
|
args: [{ imports: [CpsButtonComponent], selector: 'cps-confirmation', template: "<div class=\"cps-confirmation\">\n <span class=\"cps-confirmation-subtitle\" [innerHTML]=\"subtitle\"></span>\n <div class=\"cps-confirmation-buttons\">\n <cps-button\n type=\"outlined\"\n label=\"No\"\n (clicked)=\"close(false)\"\n color=\"prepared\">\n </cps-button>\n <cps-button\n data-testid=\"btn-yes\"\n label=\"Yes\"\n (clicked)=\"close(true)\"\n color=\"prepared\">\n </cps-button>\n </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:8px}:host .cps-confirmation-subtitle{font-size:16px;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:28px}\n"] }]
|
|
14237
14404
|
}], ctorParameters: () => [{ type: CpsDialogRef }, { type: CpsDialogConfig }] });
|
|
@@ -14360,10 +14527,10 @@ class CpsDialogService {
|
|
|
14360
14527
|
callback(items[i]);
|
|
14361
14528
|
}
|
|
14362
14529
|
}
|
|
14363
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14364
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
14530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: i0.Injector }, { token: DOCUMENT }, { token: CpsDialogService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
14531
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogService, providedIn: 'root' }); }
|
|
14365
14532
|
}
|
|
14366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsDialogService, decorators: [{
|
|
14367
14534
|
type: Injectable,
|
|
14368
14535
|
args: [{ providedIn: 'root' }]
|
|
14369
14536
|
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: i0.Injector }, { type: Document, decorators: [{
|
|
@@ -14460,8 +14627,8 @@ class CpsToastComponent {
|
|
|
14460
14627
|
this.timeout = null;
|
|
14461
14628
|
}
|
|
14462
14629
|
}
|
|
14463
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
14630
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsToastComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14631
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsToastComponent, isStandalone: true, selector: "cps-toast", inputs: { config: "config", data: "data" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n (mouseenter)=\"clearTimeout()\"\n (mouseleave)=\"initiateTimeout()\"\n [class]=\"data.type\"\n [@toastState]=\"{\n value: 'visible'\n }\"\n [ngStyle]=\"{ 'max-width': maxWidth }\"\n class=\"cps-toast-content\">\n <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n <cps-icon\n [icon]=\"'toast-' + data.type\"\n [color]=\"filled ? '#fff' : color\"\n size=\"normal\"></cps-icon>\n </div>\n <div class=\"cps-toast-message\">\n <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n @if (data.details) {\n <p class=\"cps-toast-message-details\">\n {{ data.details }}\n </p>\n }\n </div>\n <div class=\"cps-toast-buttons\">\n <cps-button\n (clicked)=\"close()\"\n [color]=\"color\"\n ariaLabel=\"Close notification\"\n icon=\"close-x\"\n class=\"cps-toast-close-button\"\n width=\"40\"\n type=\"borderless\"></cps-button>\n </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{white-space:pre-line;margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
|
|
14465
14632
|
trigger('toastState', [
|
|
14466
14633
|
state('visible', style({
|
|
14467
14634
|
transform: 'translateY(0)',
|
|
@@ -14481,7 +14648,7 @@ class CpsToastComponent {
|
|
|
14481
14648
|
])
|
|
14482
14649
|
] }); }
|
|
14483
14650
|
}
|
|
14484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsToastComponent, decorators: [{
|
|
14485
14652
|
type: Component,
|
|
14486
14653
|
args: [{ imports: [CommonModule, CpsButtonComponent, CpsIconComponent], selector: 'cps-toast', animations: [
|
|
14487
14654
|
trigger('toastState', [
|
|
@@ -14501,7 +14668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
14501
14668
|
}))
|
|
14502
14669
|
])
|
|
14503
14670
|
])
|
|
14504
|
-
], template: "<div\n (mouseenter)=\"clearTimeout()\"\n (mouseleave)=\"initiateTimeout()\"\n [class]=\"data.type\"\n [@toastState]=\"{\n value: 'visible'\n }\"\n [ngStyle]=\"{ 'max-width': maxWidth }\"\n class=\"cps-toast-content\">\n <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n <cps-icon\n [icon]=\"'toast-' + data.type\"\n [color]=\"filled ? '#fff' : color\"\n size=\"normal\"></cps-icon>\n </div>\n <div class=\"cps-toast-message\">\n <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n @if (data.details) {\n <p class=\"cps-toast-message-details\">\n {{ data.details }}\n </p>\n }\n </div>\n <div class=\"cps-toast-buttons\">\n <cps-button\n (clicked)=\"close()\"\n [color]=\"color\"\n icon=\"close-x\"\n class=\"cps-toast-close-button\"\n width=\"40\"\n type=\"borderless\"></cps-button>\n </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{white-space:pre-line;margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\n"] }]
|
|
14671
|
+
], template: "<div\n (mouseenter)=\"clearTimeout()\"\n (mouseleave)=\"initiateTimeout()\"\n [class]=\"data.type\"\n [@toastState]=\"{\n value: 'visible'\n }\"\n [ngStyle]=\"{ 'max-width': maxWidth }\"\n class=\"cps-toast-content\">\n <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n <cps-icon\n [icon]=\"'toast-' + data.type\"\n [color]=\"filled ? '#fff' : color\"\n size=\"normal\"></cps-icon>\n </div>\n <div class=\"cps-toast-message\">\n <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n @if (data.details) {\n <p class=\"cps-toast-message-details\">\n {{ data.details }}\n </p>\n }\n </div>\n <div class=\"cps-toast-buttons\">\n <cps-button\n (clicked)=\"close()\"\n [color]=\"color\"\n ariaLabel=\"Close notification\"\n icon=\"close-x\"\n class=\"cps-toast-close-button\"\n width=\"40\"\n type=\"borderless\"></cps-button>\n </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{white-space:pre-line;margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\n"] }]
|
|
14505
14672
|
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { config: [{
|
|
14506
14673
|
type: Input
|
|
14507
14674
|
}], data: [{
|
|
@@ -14562,14 +14729,14 @@ class CpsNotificationContainerComponent {
|
|
|
14562
14729
|
ZIndexUtils.clear(this.container.nativeElement);
|
|
14563
14730
|
}
|
|
14564
14731
|
}
|
|
14565
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14566
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
14732
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsNotificationContainerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.PrimeNG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsNotificationContainerComponent, isStandalone: true, selector: "cps-notification-container", inputs: { position: "position" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n [ngClass]=\"{\n 'cps-notification-container-mask': true,\n 'cps-notification-container-left':\n position === CpsNotificationPosition.LEFT,\n 'cps-notification-container-right':\n position === CpsNotificationPosition.RIGHT,\n 'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n 'cps-notification-container-bottom':\n position === CpsNotificationPosition.BOTTOM,\n 'cps-notification-container-top-left':\n position === CpsNotificationPosition.TOPLEFT,\n 'cps-notification-container-top-right':\n position === CpsNotificationPosition.TOPRIGHT,\n 'cps-notification-container-bottom-left':\n position === CpsNotificationPosition.BOTTOMLEFT,\n 'cps-notification-container-bottom-right':\n position === CpsNotificationPosition.BOTTOMRIGHT\n }\">\n <div #container class=\"cps-notification-container\" role=\"notification\">\n <div\n #content\n class=\"cps-notification-container-content\"\n [ngStyle]=\"{\n 'align-items': [\n CpsNotificationPosition.RIGHT,\n CpsNotificationPosition.TOPRIGHT,\n CpsNotificationPosition.BOTTOMRIGHT\n ].includes(position)\n ? 'flex-end'\n : 'flex-start'\n }\">\n @for (notification of notifications; track notification; let i = $index) {\n <cps-toast\n [data]=\"notification.data\"\n [config]=\"notification.config\"\n @notificationAnimation\n (closed)=\"onCloseNotification(i)\">\n </cps-toast>\n }\n </div>\n </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:12px;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsToastComponent, selector: "cps-toast", inputs: ["config", "data"], outputs: ["closed"] }], animations: [
|
|
14567
14734
|
trigger('notificationAnimation', [
|
|
14568
14735
|
transition(':enter, :leave', [query('@*', animateChild())])
|
|
14569
14736
|
])
|
|
14570
14737
|
], encapsulation: i0.ViewEncapsulation.None }); }
|
|
14571
14738
|
}
|
|
14572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsNotificationContainerComponent, decorators: [{
|
|
14573
14740
|
type: Component,
|
|
14574
14741
|
args: [{ selector: 'cps-notification-container', imports: [CommonModule, SharedModule, CpsToastComponent], encapsulation: ViewEncapsulation.None, animations: [
|
|
14575
14742
|
trigger('notificationAnimation', [
|
|
@@ -14690,10 +14857,10 @@ class CpsNotificationService {
|
|
|
14690
14857
|
this._containersMap.delete(position);
|
|
14691
14858
|
}
|
|
14692
14859
|
}
|
|
14693
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
14694
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
14860
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsNotificationService, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
14861
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsNotificationService, providedIn: 'root' }); }
|
|
14695
14862
|
}
|
|
14696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
14863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsNotificationService, decorators: [{
|
|
14697
14864
|
type: Injectable,
|
|
14698
14865
|
args: [{ providedIn: 'root' }]
|
|
14699
14866
|
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: Document, decorators: [{
|