cps-ui-kit 0.21.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/esm2020/lib/base_components/cps-tree-dropdown-base.component.mjs +423 -0
- package/esm2020/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +13 -9
- package/esm2020/lib/components/cps-input/cps-input.component.mjs +3 -3
- package/esm2020/lib/components/cps-textarea/cps-textarea.component.mjs +3 -3
- package/esm2020/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.mjs +220 -0
- package/esm2020/lib/components/cps-tree-select/cps-tree-select.component.mjs +24 -415
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/cps-ui-kit.mjs +317 -70
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +309 -70
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/base_components/cps-tree-dropdown-base.component.d.ts +81 -0
- package/lib/components/cps-autocomplete/cps-autocomplete.component.d.ts +2 -1
- package/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.d.ts +39 -0
- package/lib/components/cps-tree-select/cps-tree-select.component.d.ts +11 -75
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -424,10 +424,10 @@ class CpsInputComponent {
|
|
|
424
424
|
}
|
|
425
425
|
}
|
|
426
426
|
CpsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
-
CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-input-label-text\"\n [ngClass]=\"{ 'cps-input-label-text-disabled': disabled }\"\n >{{ label }}</label\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 }\">\n <input\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-input-container .cps-input-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
|
|
427
|
+
CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-input-label-text\"\n [ngClass]=\"{ 'cps-input-label-text-disabled': disabled }\"\n >{{ label }}</label\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 }\">\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-input-container .cps-input-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
|
|
428
428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
|
|
429
429
|
type: Component,
|
|
430
|
-
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-input-label-text\"\n [ngClass]=\"{ 'cps-input-label-text-disabled': disabled }\"\n >{{ label }}</label\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 }\">\n <input\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-input-container .cps-input-label-text-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"] }]
|
|
430
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-input-label-text\"\n [ngClass]=\"{ 'cps-input-label-text-disabled': disabled }\"\n >{{ label }}</label\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 }\">\n <input\n spellcheck=\"false\"\n [type]=\"currentType\"\n [value]=\"value\"\n (input)=\"updateValueEvent($event)\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{\n width: cvtWidth,\n 'padding-left': prefixWidth || 'none'\n }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n\n <div class=\"cps-input-prefix\">\n <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n [style.cursor]=\"\n prefixIconClickable && !disabled ? 'pointer' : 'default'\n \"\n (click)=\"onClickPrefixIcon()\">\n </cps-icon>\n </span>\n\n <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n {{ prefixText }}\n </span>\n </div>\n\n <div class=\"cps-input-action-btns\" *ngIf=\"!disabled\">\n <span\n *ngIf=\"clearable\"\n [style.visibility]=\"\n persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n \"\n class=\"clear-btn\">\n <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n </span>\n\n <span\n *ngIf=\"type === 'password'\"\n class=\"password-show-btn\"\n [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n </span>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-input-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error-text\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:#c33!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap input{font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-input-container .cps-input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix:hover .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-input-container .cps-input-label-text-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"] }]
|
|
431
431
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
432
432
|
type: Self
|
|
433
433
|
}, {
|
|
@@ -986,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
986
986
|
args: ['selectContainer']
|
|
987
987
|
}] } });
|
|
988
988
|
|
|
989
|
-
class
|
|
989
|
+
class CpsTreeDropdownBaseComponent {
|
|
990
990
|
set options(options) {
|
|
991
991
|
if (options?.some((o) => o.inner)) {
|
|
992
992
|
this._options = options;
|
|
@@ -1004,11 +1004,11 @@ class CpsTreeSelectComponent {
|
|
|
1004
1004
|
get value() {
|
|
1005
1005
|
return this._value;
|
|
1006
1006
|
}
|
|
1007
|
-
constructor(
|
|
1008
|
-
this.
|
|
1007
|
+
constructor(control, cdRef) {
|
|
1008
|
+
this.control = control;
|
|
1009
1009
|
this.cdRef = cdRef;
|
|
1010
1010
|
this.label = '';
|
|
1011
|
-
this.placeholder = 'Please
|
|
1011
|
+
this.placeholder = 'Please enter';
|
|
1012
1012
|
this.hint = '';
|
|
1013
1013
|
this.multiple = false;
|
|
1014
1014
|
this.disabled = false;
|
|
@@ -1038,11 +1038,11 @@ class CpsTreeSelectComponent {
|
|
|
1038
1038
|
this.isOpened = false;
|
|
1039
1039
|
this.optionFocused = false;
|
|
1040
1040
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1041
|
-
this.onChange = (
|
|
1041
|
+
this.onChange = (event) => { };
|
|
1042
1042
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1043
1043
|
this.onTouched = () => { };
|
|
1044
|
-
if (this.
|
|
1045
|
-
this.
|
|
1044
|
+
if (this.control) {
|
|
1045
|
+
this.control.valueAccessor = this;
|
|
1046
1046
|
}
|
|
1047
1047
|
}
|
|
1048
1048
|
ngOnInit() {
|
|
@@ -1056,7 +1056,7 @@ class CpsTreeSelectComponent {
|
|
|
1056
1056
|
else {
|
|
1057
1057
|
this.treeSelection = this._valueToTreeSelection(this.value);
|
|
1058
1058
|
}
|
|
1059
|
-
this._statusChangesSubscription = this.
|
|
1059
|
+
this._statusChangesSubscription = this.control?.statusChanges?.subscribe(() => {
|
|
1060
1060
|
this._checkErrors();
|
|
1061
1061
|
});
|
|
1062
1062
|
}
|
|
@@ -1112,25 +1112,7 @@ class CpsTreeSelectComponent {
|
|
|
1112
1112
|
}
|
|
1113
1113
|
onSelectNode() {
|
|
1114
1114
|
if (!this.multiple) {
|
|
1115
|
-
this.
|
|
1116
|
-
}
|
|
1117
|
-
}
|
|
1118
|
-
onClickOutside(dd) {
|
|
1119
|
-
this._toggleOptions(dd, false);
|
|
1120
|
-
}
|
|
1121
|
-
onBoxClick(dd) {
|
|
1122
|
-
this._toggleOptions(dd);
|
|
1123
|
-
}
|
|
1124
|
-
onKeyDown(event, dd) {
|
|
1125
|
-
event.preventDefault();
|
|
1126
|
-
const code = event.keyCode;
|
|
1127
|
-
// escape
|
|
1128
|
-
if (code === 27) {
|
|
1129
|
-
this._toggleOptions(dd, false);
|
|
1130
|
-
}
|
|
1131
|
-
// click down arrow
|
|
1132
|
-
else if ([40].includes(code)) {
|
|
1133
|
-
this._initArrowsNavigaton();
|
|
1115
|
+
this.toggleOptions(this.treeContainer?.nativeElement, false);
|
|
1134
1116
|
}
|
|
1135
1117
|
}
|
|
1136
1118
|
onClickFullyExpandable(event, elem) {
|
|
@@ -1158,7 +1140,7 @@ class CpsTreeSelectComponent {
|
|
|
1158
1140
|
return key.replace('key-', '');
|
|
1159
1141
|
}
|
|
1160
1142
|
treeSelectionChanged(selection) {
|
|
1161
|
-
this.updateValue(this.
|
|
1143
|
+
this.updateValue(this.treeSelectionToValue(selection));
|
|
1162
1144
|
}
|
|
1163
1145
|
recalcVirtualListHeight() {
|
|
1164
1146
|
if (!this.virtualScroll)
|
|
@@ -1166,7 +1148,7 @@ class CpsTreeSelectComponent {
|
|
|
1166
1148
|
const currentLen = this.treeList?.serializedValue?.length || 0;
|
|
1167
1149
|
this.virtualListHeight = Math.min(this.virtualScrollItemSize * currentLen, 240);
|
|
1168
1150
|
}
|
|
1169
|
-
|
|
1151
|
+
toggleOptions(dd, show) {
|
|
1170
1152
|
if (this.disabled || !dd)
|
|
1171
1153
|
return;
|
|
1172
1154
|
if (typeof show === 'boolean') {
|
|
@@ -1184,7 +1166,7 @@ class CpsTreeSelectComponent {
|
|
|
1184
1166
|
this._updateOptions();
|
|
1185
1167
|
setTimeout(() => {
|
|
1186
1168
|
this.recalcVirtualListHeight();
|
|
1187
|
-
const selected = this.
|
|
1169
|
+
const selected = this.treeContainer.nativeElement.querySelector('.p-highlight');
|
|
1188
1170
|
if (selected) {
|
|
1189
1171
|
selected.scrollIntoView({
|
|
1190
1172
|
behavior: 'instant',
|
|
@@ -1213,9 +1195,9 @@ class CpsTreeSelectComponent {
|
|
|
1213
1195
|
if (!this.multiple)
|
|
1214
1196
|
return;
|
|
1215
1197
|
this.treeSelection = this.treeSelection.filter((v) => !isEqual(v, option));
|
|
1216
|
-
this.updateValue(this.
|
|
1198
|
+
this.updateValue(this.treeSelectionToValue(this.treeSelection));
|
|
1217
1199
|
}
|
|
1218
|
-
|
|
1200
|
+
initArrowsNavigaton() {
|
|
1219
1201
|
if (!this.isOpened)
|
|
1220
1202
|
return;
|
|
1221
1203
|
if (!this.optionFocused) {
|
|
@@ -1230,7 +1212,7 @@ class CpsTreeSelectComponent {
|
|
|
1230
1212
|
if ((!this.multiple && this.treeSelection) ||
|
|
1231
1213
|
(this.multiple && this.treeSelection?.length > 0)) {
|
|
1232
1214
|
if (this.openOnClear) {
|
|
1233
|
-
this.
|
|
1215
|
+
this.toggleOptions(dd, true);
|
|
1234
1216
|
}
|
|
1235
1217
|
const val = this.multiple ? [] : undefined;
|
|
1236
1218
|
this.treeSelection = val;
|
|
@@ -1239,8 +1221,8 @@ class CpsTreeSelectComponent {
|
|
|
1239
1221
|
this.optionFocused = false;
|
|
1240
1222
|
}
|
|
1241
1223
|
_checkErrors() {
|
|
1242
|
-
const errors = this.
|
|
1243
|
-
if (!this.
|
|
1224
|
+
const errors = this.control?.errors;
|
|
1225
|
+
if (!this.control?.control?.touched || !errors) {
|
|
1244
1226
|
this.error = '';
|
|
1245
1227
|
return;
|
|
1246
1228
|
}
|
|
@@ -1254,17 +1236,18 @@ class CpsTreeSelectComponent {
|
|
|
1254
1236
|
return;
|
|
1255
1237
|
}
|
|
1256
1238
|
const message = errArr.find((msg) => typeof msg === 'string');
|
|
1239
|
+
console.log('message', message);
|
|
1257
1240
|
this.error = message || 'Unknown error';
|
|
1258
1241
|
}
|
|
1259
1242
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1260
1243
|
setDisabledState(disabled) { }
|
|
1261
1244
|
onBlur() {
|
|
1262
|
-
this.
|
|
1245
|
+
this.control?.control?.markAsTouched();
|
|
1263
1246
|
this._checkErrors();
|
|
1264
1247
|
}
|
|
1265
1248
|
focus() {
|
|
1266
|
-
this.
|
|
1267
|
-
this.
|
|
1249
|
+
this.treeContainer?.nativeElement?.focus();
|
|
1250
|
+
this.toggleOptions(this.treeContainer?.nativeElement, true);
|
|
1268
1251
|
}
|
|
1269
1252
|
_expandToNodes(nodes) {
|
|
1270
1253
|
function getParentKey(key) {
|
|
@@ -1292,7 +1275,7 @@ class CpsTreeSelectComponent {
|
|
|
1292
1275
|
key,
|
|
1293
1276
|
styleClass: 'key-' + key
|
|
1294
1277
|
};
|
|
1295
|
-
if (o.
|
|
1278
|
+
if (o.isDirectory) {
|
|
1296
1279
|
inner.type = 'directory';
|
|
1297
1280
|
inner.selectable = false;
|
|
1298
1281
|
inner.styleClass += ' cps-tree-node-fully-expandable';
|
|
@@ -1322,7 +1305,7 @@ class CpsTreeSelectComponent {
|
|
|
1322
1305
|
}
|
|
1323
1306
|
return nodeMap;
|
|
1324
1307
|
}
|
|
1325
|
-
|
|
1308
|
+
treeSelectionToValue(selection) {
|
|
1326
1309
|
if (!selection)
|
|
1327
1310
|
return this.multiple ? [] : undefined;
|
|
1328
1311
|
if (this.multiple) {
|
|
@@ -1364,21 +1347,13 @@ class CpsTreeSelectComponent {
|
|
|
1364
1347
|
this.options = [...this.options];
|
|
1365
1348
|
}
|
|
1366
1349
|
}
|
|
1367
|
-
|
|
1368
|
-
CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { label: "label", placeholder: "placeholder", 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", options: "options", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe], viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "treeList", first: true, predicate: ["treeList"], descendants: true }], ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #selectContainer\n (keydown)=\"onKeyDown($event, selectContainer)\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"label\" class=\"cps-treeselect-label\">{{ label }} </label>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(selectContainer)\">\n <div class=\"cps-treeselect-box\" (click)=\"onBoxClick(selectContainer)\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(selectContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-treeselect-options\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"recalcVirtualListHeight()\"\n (onNodeCollapse)=\"recalcVirtualListHeight()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span class=\"cps-treeselect-option-label\">{{ node.label }}</span>\n </span>\n <span class=\"cps-treeselect-option-info\">{{ node.info }}</span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-options{display:block}: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 .cps-treeselect-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect.active .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeselect .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}:host .cps-treeselect .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)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] });
|
|
1369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type:
|
|
1350
|
+
CpsTreeDropdownBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeDropdownBaseComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1351
|
+
CpsTreeDropdownBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeDropdownBaseComponent, selector: "ng-component", inputs: { label: "label", placeholder: "placeholder", 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", options: "options", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: '', isInline: true });
|
|
1352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeDropdownBaseComponent, decorators: [{
|
|
1370
1353
|
type: Component,
|
|
1371
|
-
args: [{
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
TreeModule,
|
|
1375
|
-
ClickOutsideDirective,
|
|
1376
|
-
CpsIconComponent,
|
|
1377
|
-
CpsChipComponent,
|
|
1378
|
-
CpsProgressLinearComponent,
|
|
1379
|
-
LabelByValuePipe,
|
|
1380
|
-
CombineLabelsPipe
|
|
1381
|
-
], providers: [LabelByValuePipe, CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #selectContainer\n (keydown)=\"onKeyDown($event, selectContainer)\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"label\" class=\"cps-treeselect-label\">{{ label }} </label>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(selectContainer)\">\n <div class=\"cps-treeselect-box\" (click)=\"onBoxClick(selectContainer)\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(selectContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-treeselect-options\">\n <p-tree\n #treeList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"recalcVirtualListHeight()\"\n (onNodeCollapse)=\"recalcVirtualListHeight()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span class=\"cps-treeselect-option-label\">{{ node.label }}</span>\n </span>\n <span class=\"cps-treeselect-option-info\">{{ node.info }}</span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-options{display:block}: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 .cps-treeselect-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect.active .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeselect .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}:host .cps-treeselect .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)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}\n"] }]
|
|
1354
|
+
args: [{
|
|
1355
|
+
template: ''
|
|
1356
|
+
}]
|
|
1382
1357
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1383
1358
|
type: Self
|
|
1384
1359
|
}, {
|
|
@@ -1426,12 +1401,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1426
1401
|
args: ['value']
|
|
1427
1402
|
}], valueChanged: [{
|
|
1428
1403
|
type: Output
|
|
1429
|
-
}]
|
|
1404
|
+
}] } });
|
|
1405
|
+
|
|
1406
|
+
class CpsTreeSelectComponent extends CpsTreeDropdownBaseComponent {
|
|
1407
|
+
constructor(control, cdRef) {
|
|
1408
|
+
super(control, cdRef);
|
|
1409
|
+
this.control = control;
|
|
1410
|
+
this.cdRef = cdRef;
|
|
1411
|
+
}
|
|
1412
|
+
ngOnInit() {
|
|
1413
|
+
super.ngOnInit();
|
|
1414
|
+
}
|
|
1415
|
+
ngAfterViewInit() {
|
|
1416
|
+
this.treeContainer = this.treeSelectContainer;
|
|
1417
|
+
this.treeList = this.treeSelectList;
|
|
1418
|
+
super.ngAfterViewInit();
|
|
1419
|
+
}
|
|
1420
|
+
ngOnDestroy() {
|
|
1421
|
+
super.ngOnDestroy();
|
|
1422
|
+
}
|
|
1423
|
+
onClickOutside(dd) {
|
|
1424
|
+
this.toggleOptions(dd, false);
|
|
1425
|
+
}
|
|
1426
|
+
onBoxClick(dd) {
|
|
1427
|
+
this.toggleOptions(dd);
|
|
1428
|
+
}
|
|
1429
|
+
onKeyDown(event, dd) {
|
|
1430
|
+
event.preventDefault();
|
|
1431
|
+
const code = event.keyCode;
|
|
1432
|
+
// escape
|
|
1433
|
+
if (code === 27) {
|
|
1434
|
+
this.toggleOptions(dd, false);
|
|
1435
|
+
}
|
|
1436
|
+
// click down arrow
|
|
1437
|
+
else if (code === 40) {
|
|
1438
|
+
this.initArrowsNavigaton();
|
|
1439
|
+
}
|
|
1440
|
+
}
|
|
1441
|
+
}
|
|
1442
|
+
CpsTreeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1443
|
+
CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", providers: [CombineLabelsPipe], viewQueries: [{ propertyName: "treeSelectContainer", first: true, predicate: ["treeSelectContainer"], descendants: true }, { propertyName: "treeSelectList", first: true, predicate: ["treeSelectList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #treeSelectContainer\n (keydown)=\"onKeyDown($event, treeSelectContainer)\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"label\" class=\"cps-treeselect-label\">{{ label }} </label>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(treeSelectContainer)\">\n <div class=\"cps-treeselect-box\" (click)=\"onBoxClick(treeSelectContainer)\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(treeSelectContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-treeselect-options\">\n <p-tree\n #treeSelectList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"recalcVirtualListHeight()\"\n (onNodeCollapse)=\"recalcVirtualListHeight()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span class=\"cps-treeselect-option-label\">{{ node.label }}</span>\n </span>\n <span class=\"cps-treeselect-option-info\">{{ node.info }}</span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-options{display:block}: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 .cps-treeselect-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect.active .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeselect .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}:host .cps-treeselect .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)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] });
|
|
1444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
|
|
1445
|
+
type: Component,
|
|
1446
|
+
args: [{ standalone: true, imports: [
|
|
1447
|
+
CommonModule,
|
|
1448
|
+
FormsModule,
|
|
1449
|
+
TreeModule,
|
|
1450
|
+
ClickOutsideDirective,
|
|
1451
|
+
CpsIconComponent,
|
|
1452
|
+
CpsChipComponent,
|
|
1453
|
+
CpsProgressLinearComponent,
|
|
1454
|
+
CombineLabelsPipe
|
|
1455
|
+
], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeselect\"\n tabindex=\"0\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #treeSelectContainer\n (keydown)=\"onKeyDown($event, treeSelectContainer)\"\n (blur)=\"onBlur()\">\n <label *ngIf=\"label\" class=\"cps-treeselect-label\">{{ label }} </label>\n <div\n class=\"cps-treeselect-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(treeSelectContainer)\">\n <div class=\"cps-treeselect-box\" (click)=\"onBoxClick(treeSelectContainer)\">\n <div class=\"cps-treeselect-box-left\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeselect-box-placeholder\"\n *ngIf=\"\n (!treeSelection && !multiple) ||\n (treeSelection?.length < 1 && multiple)\n \">\n {{ placeholder }}\n </div>\n <div\n class=\"cps-treeselect-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple)\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n {{ treeSelection.label }}</span\n >\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <span class=\"text-group-item\">\n {{\n treeSelection | combineLabels : options : '' : 'label' : true\n }}\n </span>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [label]=\"val.label\">\n </cps-chip>\n </div>\n </div>\n </div>\n <span class=\"cps-treeselect-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeselect-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(treeSelectContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-treeselect-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n\n <div class=\"cps-treeselect-options\">\n <p-tree\n #treeSelectList\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"recalcVirtualListHeight()\"\n (onNodeCollapse)=\"recalcVirtualListHeight()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeselect-option\">\n <span class=\"cps-treeselect-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n </span>\n <span class=\"cps-treeselect-option-label\">{{ node.label }}</span>\n </span>\n <span class=\"cps-treeselect-option-info\">{{ node.info }}</span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeselect-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n {{ error }}\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-options{display:block}: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 .cps-treeselect-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect.active .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeselect .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}:host .cps-treeselect .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)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:#c33!important;background:#fef3f2!important}\n"] }]
|
|
1456
|
+
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1457
|
+
type: Optional
|
|
1458
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { treeSelectContainer: [{
|
|
1430
1459
|
type: ViewChild,
|
|
1431
|
-
args: ['
|
|
1432
|
-
}],
|
|
1460
|
+
args: ['treeSelectContainer']
|
|
1461
|
+
}], treeSelectList: [{
|
|
1433
1462
|
type: ViewChild,
|
|
1434
|
-
args: ['
|
|
1463
|
+
args: ['treeSelectList']
|
|
1435
1464
|
}] } });
|
|
1436
1465
|
|
|
1437
1466
|
class CpsAutocompleteComponent {
|
|
@@ -1466,6 +1495,7 @@ class CpsAutocompleteComponent {
|
|
|
1466
1495
|
this.prefixIcon = '';
|
|
1467
1496
|
this.prefixIconSize = '18px';
|
|
1468
1497
|
this.loading = false;
|
|
1498
|
+
this.emptyMessage = 'No results found';
|
|
1469
1499
|
this._value = undefined;
|
|
1470
1500
|
this.valueChanged = new EventEmitter();
|
|
1471
1501
|
this.error = '';
|
|
@@ -1561,6 +1591,7 @@ class CpsAutocompleteComponent {
|
|
|
1561
1591
|
if (!this.isOpened) {
|
|
1562
1592
|
this._toggleOptions(this.autocompleteContainer?.nativeElement, true);
|
|
1563
1593
|
}
|
|
1594
|
+
this._dehighlightOption();
|
|
1564
1595
|
this.backspaceClickedOnce = false;
|
|
1565
1596
|
const searchVal = (event?.target?.value || '').toLowerCase();
|
|
1566
1597
|
this.filteredOptions = this.options.filter((o) => o[this.optionLabel].toLowerCase().includes(searchVal));
|
|
@@ -1611,7 +1642,9 @@ class CpsAutocompleteComponent {
|
|
|
1611
1642
|
// enter
|
|
1612
1643
|
else if (code === 13) {
|
|
1613
1644
|
let idx = this.optionHighlightedIndex;
|
|
1614
|
-
if (this.multiple &&
|
|
1645
|
+
if (this.multiple &&
|
|
1646
|
+
this.selectAll &&
|
|
1647
|
+
this.filteredOptions.length === this.options.length) {
|
|
1615
1648
|
if (idx === 0) {
|
|
1616
1649
|
this.toggleAll();
|
|
1617
1650
|
return;
|
|
@@ -1620,6 +1653,8 @@ class CpsAutocompleteComponent {
|
|
|
1620
1653
|
idx--;
|
|
1621
1654
|
}
|
|
1622
1655
|
const option = this.filteredOptions[idx];
|
|
1656
|
+
if (this.filteredOptions.length !== this.options.length)
|
|
1657
|
+
this._dehighlightOption();
|
|
1623
1658
|
this._clickOption(option, dd);
|
|
1624
1659
|
}
|
|
1625
1660
|
// vertical arrows
|
|
@@ -1644,9 +1679,6 @@ class CpsAutocompleteComponent {
|
|
|
1644
1679
|
else if ([38, 40].includes(code)) {
|
|
1645
1680
|
event.preventDefault();
|
|
1646
1681
|
}
|
|
1647
|
-
else {
|
|
1648
|
-
this._dehighlightOption();
|
|
1649
|
-
}
|
|
1650
1682
|
}
|
|
1651
1683
|
focusInput() {
|
|
1652
1684
|
this.autocompleteContainer?.nativeElement?.querySelector('input')?.focus();
|
|
@@ -1762,6 +1794,7 @@ class CpsAutocompleteComponent {
|
|
|
1762
1794
|
if (len < 1)
|
|
1763
1795
|
return;
|
|
1764
1796
|
if (len === 1) {
|
|
1797
|
+
this.optionHighlightedIndex = 0;
|
|
1765
1798
|
this._highlightOption(optionItems[0]);
|
|
1766
1799
|
return;
|
|
1767
1800
|
}
|
|
@@ -1826,7 +1859,7 @@ class CpsAutocompleteComponent {
|
|
|
1826
1859
|
}
|
|
1827
1860
|
}
|
|
1828
1861
|
CpsAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1829
|
-
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], ngImport: i0, template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span data-cy-id=\"cps-autocomplete-options\" class=\"cps-autocomplete-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}: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 .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .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}:host .cps-autocomplete .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)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .chip{background-color:var(--cps-color-bg-mid)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
1862
|
+
CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], ngImport: i0, template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"\n multiple && selectAll && filteredOptions.length === options.length\n \"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n *ngIf=\"filteredOptions.length < 1\"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n >{{ option[optionLabel] }}</span\n >\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}: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 .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-empty{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .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}:host .cps-autocomplete .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)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}: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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
1830
1863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
|
|
1831
1864
|
type: Component,
|
|
1832
1865
|
args: [{ standalone: true, imports: [
|
|
@@ -1837,9 +1870,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1837
1870
|
CpsChipComponent,
|
|
1838
1871
|
CpsProgressLinearComponent,
|
|
1839
1872
|
LabelByValuePipe,
|
|
1840
|
-
CombineLabelsPipe,
|
|
1841
1873
|
CheckOptionSelectedPipe
|
|
1842
|
-
], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span data-cy-id=\"cps-autocomplete-options\" class=\"cps-autocomplete-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}: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 .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .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}:host .cps-autocomplete .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)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .chip{background-color:var(--cps-color-bg-mid)}\n"] }]
|
|
1874
|
+
], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"\n multiple && selectAll && filteredOptions.length === options.length\n \"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n *ngIf=\"filteredOptions.length < 1\"\n class=\"cps-autocomplete-options-empty\">\n {{ emptyMessage }}\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span\n data-cy-id=\"cps-autocomplete-options\"\n class=\"cps-autocomplete-options-option-label\"\n >{{ option[optionLabel] }}</span\n >\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}: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 .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-empty{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .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}:host .cps-autocomplete .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)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}: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)}\n"] }]
|
|
1843
1875
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
1844
1876
|
type: Self
|
|
1845
1877
|
}, {
|
|
@@ -1886,6 +1918,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1886
1918
|
type: Input
|
|
1887
1919
|
}], loading: [{
|
|
1888
1920
|
type: Input
|
|
1921
|
+
}], emptyMessage: [{
|
|
1922
|
+
type: Input
|
|
1889
1923
|
}], _value: [{
|
|
1890
1924
|
type: Input,
|
|
1891
1925
|
args: ['value']
|
|
@@ -1896,6 +1930,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1896
1930
|
args: ['autocompleteContainer']
|
|
1897
1931
|
}] } });
|
|
1898
1932
|
|
|
1933
|
+
class CpsTreeAutocompleteComponent extends CpsTreeDropdownBaseComponent {
|
|
1934
|
+
constructor(control, cdRef) {
|
|
1935
|
+
super(control, cdRef);
|
|
1936
|
+
this.control = control;
|
|
1937
|
+
this.cdRef = cdRef;
|
|
1938
|
+
this.emptyMessage = 'No results found';
|
|
1939
|
+
this.inputText = '';
|
|
1940
|
+
this.backspaceClickedOnce = false;
|
|
1941
|
+
this.activeSingle = false;
|
|
1942
|
+
}
|
|
1943
|
+
ngOnInit() {
|
|
1944
|
+
super.ngOnInit();
|
|
1945
|
+
}
|
|
1946
|
+
ngAfterViewInit() {
|
|
1947
|
+
this.treeContainer = this.treeAutocompleteContainer;
|
|
1948
|
+
this.treeList = this.treeAutocompleteList;
|
|
1949
|
+
super.ngAfterViewInit();
|
|
1950
|
+
}
|
|
1951
|
+
ngOnDestroy() {
|
|
1952
|
+
super.ngOnDestroy();
|
|
1953
|
+
}
|
|
1954
|
+
onSelectNode() {
|
|
1955
|
+
this.backspaceClickedOnce = false;
|
|
1956
|
+
this._clearInput();
|
|
1957
|
+
super.onSelectNode();
|
|
1958
|
+
}
|
|
1959
|
+
onClickOutside(dd) {
|
|
1960
|
+
this._closeAndClear(dd);
|
|
1961
|
+
}
|
|
1962
|
+
onBoxClick() {
|
|
1963
|
+
if (!this.multiple) {
|
|
1964
|
+
this.activeSingle = true;
|
|
1965
|
+
this.inputText = this._getValueLabel();
|
|
1966
|
+
this.treeAutocompleteList.resetFilter();
|
|
1967
|
+
}
|
|
1968
|
+
this.focus();
|
|
1969
|
+
this.optionFocused = false;
|
|
1970
|
+
}
|
|
1971
|
+
onContainerKeyDown(event, dd) {
|
|
1972
|
+
const code = event.keyCode;
|
|
1973
|
+
// escape
|
|
1974
|
+
if (code === 27) {
|
|
1975
|
+
this._closeAndClear(dd);
|
|
1976
|
+
}
|
|
1977
|
+
// click down arrow
|
|
1978
|
+
else if (code === 40) {
|
|
1979
|
+
this.initArrowsNavigaton();
|
|
1980
|
+
}
|
|
1981
|
+
}
|
|
1982
|
+
onInputKeyDown(event) {
|
|
1983
|
+
const code = event.keyCode;
|
|
1984
|
+
// backspace
|
|
1985
|
+
if (code === 8) {
|
|
1986
|
+
this._removeLastValue();
|
|
1987
|
+
event.stopPropagation();
|
|
1988
|
+
}
|
|
1989
|
+
// enter
|
|
1990
|
+
else if (code === 13) {
|
|
1991
|
+
if (!this.optionFocused) {
|
|
1992
|
+
this._confirmInput(event?.target?.value || '');
|
|
1993
|
+
event.stopPropagation();
|
|
1994
|
+
}
|
|
1995
|
+
}
|
|
1996
|
+
}
|
|
1997
|
+
remove(option) {
|
|
1998
|
+
super.remove(option);
|
|
1999
|
+
this._clearInput();
|
|
2000
|
+
setTimeout(() => {
|
|
2001
|
+
this.focusInput();
|
|
2002
|
+
}, 0);
|
|
2003
|
+
}
|
|
2004
|
+
_select(option) {
|
|
2005
|
+
function includes(array, val) {
|
|
2006
|
+
return array ? !!find(array, (item) => isEqual(item, val)) : false;
|
|
2007
|
+
}
|
|
2008
|
+
this.backspaceClickedOnce = false;
|
|
2009
|
+
if (this.multiple) {
|
|
2010
|
+
if (includes(this.treeSelection, option)) {
|
|
2011
|
+
this.treeSelection = this.treeSelection.filter((v) => !isEqual(v, option));
|
|
2012
|
+
}
|
|
2013
|
+
else {
|
|
2014
|
+
this.treeSelection.push(option);
|
|
2015
|
+
}
|
|
2016
|
+
}
|
|
2017
|
+
else {
|
|
2018
|
+
this.treeSelection = option;
|
|
2019
|
+
}
|
|
2020
|
+
this.updateValue(this.treeSelectionToValue(this.treeSelection));
|
|
2021
|
+
this._clearInput();
|
|
2022
|
+
setTimeout(() => {
|
|
2023
|
+
this.focusInput();
|
|
2024
|
+
}, 0);
|
|
2025
|
+
}
|
|
2026
|
+
clear(dd, event) {
|
|
2027
|
+
super.clear(dd, event);
|
|
2028
|
+
this._clearInput();
|
|
2029
|
+
setTimeout(() => {
|
|
2030
|
+
this.focusInput();
|
|
2031
|
+
}, 0);
|
|
2032
|
+
}
|
|
2033
|
+
focusInput() {
|
|
2034
|
+
this.treeAutocompleteContainer?.nativeElement
|
|
2035
|
+
?.querySelector('input')
|
|
2036
|
+
?.focus();
|
|
2037
|
+
}
|
|
2038
|
+
focus() {
|
|
2039
|
+
super.focus();
|
|
2040
|
+
this.focusInput();
|
|
2041
|
+
}
|
|
2042
|
+
onFilterOptions() {
|
|
2043
|
+
this.recalcVirtualListHeight();
|
|
2044
|
+
}
|
|
2045
|
+
filterOptions(event) {
|
|
2046
|
+
if (!this.isOpened) {
|
|
2047
|
+
this.toggleOptions(this.treeAutocompleteContainer?.nativeElement, true);
|
|
2048
|
+
}
|
|
2049
|
+
this.backspaceClickedOnce = false;
|
|
2050
|
+
const searchVal = (event?.target?.value || '').toLowerCase();
|
|
2051
|
+
if (!searchVal)
|
|
2052
|
+
this.treeAutocompleteList.resetFilter();
|
|
2053
|
+
else
|
|
2054
|
+
this.treeAutocompleteList._filter(searchVal);
|
|
2055
|
+
}
|
|
2056
|
+
_getValueLabel() {
|
|
2057
|
+
return this.treeSelection?.label || '';
|
|
2058
|
+
}
|
|
2059
|
+
_clearInput() {
|
|
2060
|
+
this.treeAutocompleteList.resetFilter();
|
|
2061
|
+
this.inputText = '';
|
|
2062
|
+
this.activeSingle = false;
|
|
2063
|
+
}
|
|
2064
|
+
_closeAndClear(dd) {
|
|
2065
|
+
this._clearInput();
|
|
2066
|
+
this.toggleOptions(dd, false);
|
|
2067
|
+
}
|
|
2068
|
+
_confirmInput(searchVal) {
|
|
2069
|
+
if (!this.isOpened)
|
|
2070
|
+
return;
|
|
2071
|
+
searchVal = searchVal.toLowerCase();
|
|
2072
|
+
if (!searchVal) {
|
|
2073
|
+
if (this.multiple)
|
|
2074
|
+
return;
|
|
2075
|
+
this.treeSelection = undefined;
|
|
2076
|
+
this.updateValue(undefined);
|
|
2077
|
+
this._closeAndClear(this.treeAutocompleteContainer?.nativeElement);
|
|
2078
|
+
return;
|
|
2079
|
+
}
|
|
2080
|
+
const found = this.treeAutocompleteList?.serializedValue?.find((sv) => sv?.node?.label?.toLowerCase() === searchVal);
|
|
2081
|
+
if (found) {
|
|
2082
|
+
this._select(found.node);
|
|
2083
|
+
this.toggleOptions(this.treeAutocompleteContainer?.nativeElement, this.multiple);
|
|
2084
|
+
}
|
|
2085
|
+
else {
|
|
2086
|
+
if (!this.multiple) {
|
|
2087
|
+
this.inputText = this._getValueLabel();
|
|
2088
|
+
this.treeAutocompleteList.resetFilter();
|
|
2089
|
+
return;
|
|
2090
|
+
}
|
|
2091
|
+
}
|
|
2092
|
+
this._clearInput();
|
|
2093
|
+
}
|
|
2094
|
+
_removeLastValue() {
|
|
2095
|
+
if (!this.multiple || this.inputText)
|
|
2096
|
+
return;
|
|
2097
|
+
if (this.treeSelection?.length) {
|
|
2098
|
+
if (this.backspaceClickedOnce) {
|
|
2099
|
+
this.treeSelection = this.treeSelection.filter((v, index) => index !== this.treeSelection.length - 1);
|
|
2100
|
+
this.updateValue(this.treeSelectionToValue(this.treeSelection));
|
|
2101
|
+
this.backspaceClickedOnce = false;
|
|
2102
|
+
}
|
|
2103
|
+
else
|
|
2104
|
+
this.backspaceClickedOnce = true;
|
|
2105
|
+
}
|
|
2106
|
+
else
|
|
2107
|
+
this.backspaceClickedOnce = false;
|
|
2108
|
+
setTimeout(() => {
|
|
2109
|
+
this.focusInput();
|
|
2110
|
+
}, 0);
|
|
2111
|
+
}
|
|
2112
|
+
}
|
|
2113
|
+
CpsTreeAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2114
|
+
CpsTreeAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage" }, viewQueries: [{ propertyName: "treeAutocompleteContainer", first: true, predicate: ["treeAutocompleteContainer"], descendants: true }, { propertyName: "treeAutocompleteList", first: true, predicate: ["treeAutocompleteList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n data-cy-id=\"cps-treeautocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #treeAutocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-treeautocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, treeAutocompleteContainer)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(treeAutocompleteContainer)\">\n <div class=\"cps-treeautocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(treeAutocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-treeautocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-treeautocomplete-options\">\n <p-tree\n #treeAutocompleteList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"recalcVirtualListHeight()\"\n (onNodeCollapse)=\"recalcVirtualListHeight()\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeautocomplete-option-check\">\n </span>\n <span class=\"cps-treeautocomplete-option-label\">{{\n node.label\n }}</span>\n </span>\n <span class=\"cps-treeautocomplete-option-info\">{{\n node.info\n }}</span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-options{display:block}: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 .cps-treeautocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeautocomplete.active .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeautocomplete .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}:host .cps-treeautocomplete .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)}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
|
|
2115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
|
|
2116
|
+
type: Component,
|
|
2117
|
+
args: [{ standalone: true, imports: [
|
|
2118
|
+
CommonModule,
|
|
2119
|
+
FormsModule,
|
|
2120
|
+
TreeModule,
|
|
2121
|
+
ClickOutsideDirective,
|
|
2122
|
+
CpsIconComponent,
|
|
2123
|
+
CpsChipComponent,
|
|
2124
|
+
CpsProgressLinearComponent
|
|
2125
|
+
], selector: 'cps-tree-autocomplete', template: "<div\n data-cy-id=\"cps-treeautocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-treeautocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #treeAutocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-treeautocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, treeAutocompleteContainer)\"\n class=\"cps-treeautocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(treeAutocompleteContainer)\">\n <div class=\"cps-treeautocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-treeautocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-treeautocomplete-box-items\"\n *ngIf=\"\n (treeSelection && !multiple) ||\n (treeSelection?.length > 0 && multiple);\n else treeAutocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n treeSelection.label\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n treeAutocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of treeSelection; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{ val.label }}{{ !last ? ',' : '' }}\n </div>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of treeSelection; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"remove(val)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"val.label\">\n </cps-chip>\n <ng-container\n *ngTemplateOutlet=\"treeAutocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-treeautocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && treeSelection?.length) ||\n (!multiple && treeSelection)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-treeautocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(treeAutocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-treeautocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-treeautocomplete-options\">\n <p-tree\n #treeAutocompleteList\n [emptyMessage]=\"emptyMessage\"\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n [scrollHeight]=\"virtualListHeight + 'px'\"\n (onNodeSelect)=\"onSelectNode()\"\n (onNodeExpand)=\"recalcVirtualListHeight()\"\n (onNodeCollapse)=\"recalcVirtualListHeight()\"\n (onFilter)=\"onFilterOptions()\"\n [value]=\"options\"\n [(selection)]=\"treeSelection\"\n (selectionChange)=\"treeSelectionChanged($event)\"\n [metaKeySelection]=\"multiple ? false : true\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n <ng-template let-node pTemplate=\"directory\">\n <span class=\"cps-treeautocomplete-directory-elem\">{{\n node.label\n }}</span>\n </ng-template>\n <ng-template let-node pTemplate=\"default\">\n <span class=\"cps-treeautocomplete-option\">\n <span class=\"cps-treeautocomplete-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-treeautocomplete-option-check\">\n </span>\n <span class=\"cps-treeautocomplete-option-label\">{{\n node.label\n }}</span>\n </span>\n <span class=\"cps-treeautocomplete-option-info\">{{\n node.info\n }}</span>\n </span>\n </ng-template>\n </p-tree>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"cps-treeautocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #treeAutocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-treeautocomplete-box-input\"\n spellcheck=\"false\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:white!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-options{display:block}: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 .cps-treeautocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeautocomplete.active .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeautocomplete .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}:host .cps-treeautocomplete .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)}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeautocomplete .cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:#c33!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}\n"] }]
|
|
2126
|
+
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
2127
|
+
type: Optional
|
|
2128
|
+
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { emptyMessage: [{
|
|
2129
|
+
type: Input
|
|
2130
|
+
}], treeAutocompleteContainer: [{
|
|
2131
|
+
type: ViewChild,
|
|
2132
|
+
args: ['treeAutocompleteContainer']
|
|
2133
|
+
}], treeAutocompleteList: [{
|
|
2134
|
+
type: ViewChild,
|
|
2135
|
+
args: ['treeAutocompleteList']
|
|
2136
|
+
}] } });
|
|
2137
|
+
|
|
1899
2138
|
class CpsProgressCircularComponent {
|
|
1900
2139
|
constructor() {
|
|
1901
2140
|
this.diameter = 40;
|
|
@@ -2722,10 +2961,10 @@ class CpsTextareaComponent {
|
|
|
2722
2961
|
}
|
|
2723
2962
|
}
|
|
2724
2963
|
CpsTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2725
|
-
CpsTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-textarea-label-text\"\n [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n >{{ label }}</label\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 [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 <span\n *ngIf=\"clearable && !disabled\"\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 </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n {{ error }}\n </div>\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:#c33!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:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;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-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
2964
|
+
CpsTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-textarea-label-text\"\n [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n >{{ label }}</label\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 <span\n *ngIf=\"clearable && !disabled\"\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 </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n {{ error }}\n </div>\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:#c33!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:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;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-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
2726
2965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTextareaComponent, decorators: [{
|
|
2727
2966
|
type: Component,
|
|
2728
|
-
args: [{ standalone: true, selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-textarea-label-text\"\n [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n >{{ label }}</label\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 [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 <span\n *ngIf=\"clearable && !disabled\"\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 </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n {{ error }}\n </div>\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:#c33!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:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;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-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-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"] }]
|
|
2967
|
+
args: [{ standalone: true, selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n <label\n class=\"cps-textarea-label-text\"\n [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n >{{ label }}</label\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 <span\n *ngIf=\"clearable && !disabled\"\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 </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n {{ error }}\n </div>\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:#c33!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:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;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-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-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"] }]
|
|
2729
2968
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
2730
2969
|
type: Self
|
|
2731
2970
|
}, {
|
|
@@ -2882,5 +3121,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2882
3121
|
* Generated bundle index. Do not edit.
|
|
2883
3122
|
*/
|
|
2884
3123
|
|
|
2885
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
3124
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2886
3125
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|