cps-ui-kit 0.6.0 → 0.7.0

package/fesm2015/cps-ui-kit.mjs

@@ -6,6 +6,8 @@ import { Subscription } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { isEqual, find } from 'lodash-es';
+import * as i2$1 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
 
 const isSameDomain = (styleSheet) => {
     if (!styleSheet.href) {
@@ -304,17 +306,21 @@ class CpsInputComponent {
         this.loading = false;
         this.clearable = false;
         this.prefixIcon = '';
+        this.prefixIconClickable = false;
         this.prefixIconSize = '18px';
         this.prefixText = '';
         this.hideDetails = false;
         this.persistentClear = false;
-        this.valueChanged = new EventEmitter();
-        this._statusChangesSubscription = new Subscription();
-        this._value = '';
         this.error = '';
+        this.valueChanged = new EventEmitter();
+        this.focused = new EventEmitter();
+        this.prefixIconClicked = new EventEmitter();
+        this.blurred = new EventEmitter();
         this.currentType = '';
         this.prefixWidth = '';
         this.cvtWidth = '';
+        this._statusChangesSubscription = new Subscription();
+        this._value = '';
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -349,6 +355,8 @@ class CpsInputComponent {
     }
     _checkErrors() {
         var _a, _b, _c;
+        if (!this._control)
+            return;
         const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
         if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
             this.error = '';
@@ -403,6 +411,15 @@ class CpsInputComponent {
         var _a, _b;
         (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
         this._checkErrors();
+        this.blurred.emit();
+    }
+    onClickPrefixIcon() {
+        if (!this.prefixIconClickable)
+            return;
+        this.prefixIconClicked.emit();
+    }
+    onFocus() {
+        this.focused.emit();
     }
     focus() {
         var _a, _b, _c;
@@ -410,10 +427,10 @@ class CpsInputComponent {
     }
 }
 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 });
-CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", placeholder: "placeholder", hint: "hint", disabled: "disabled", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"input-container\">\n  <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n    label\n  }}</label>\n\n  <div\n    class=\"input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      '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\n    <div class=\"prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"prefix-icon\">\n        <cps-icon [icon]=\"prefixIcon\" [size]=\"prefixIconSize\"></cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"action-btns\">\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=\"input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host .input-container{gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .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 .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{background-color:#f7f7f7;opacity:1}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap input:focus+.prefix+.action-btns>.clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap:hover .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild)}:host .input-container .input-wrap .input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .input-container .persistent-clear .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .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"] }] });
+CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", placeholder: "placeholder", hint: "hint", 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=\"input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n    label\n  }}</label>\n\n  <div\n    class=\"input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      '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=\"prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"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=\"prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"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=\"input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .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 .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap input:disabled+.prefix>.prefix-icon{color:var(--cps-color-text-dark)}:host .input-container .input-wrap input:focus+.prefix+.action-btns>.clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap:hover .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .input-container .input-wrap .input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .input-container .persistent-clear .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], selector: 'cps-input', template: "<div class=\"input-container\">\n  <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n    label\n  }}</label>\n\n  <div\n    class=\"input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      '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\n    <div class=\"prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"prefix-icon\">\n        <cps-icon [icon]=\"prefixIcon\" [size]=\"prefixIconSize\"></cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"action-btns\">\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=\"input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host .input-container{gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .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 .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{background-color:#f7f7f7;opacity:1}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap input:focus+.prefix+.action-btns>.clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap:hover .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild)}:host .input-container .input-wrap .input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .input-container .persistent-clear .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], selector: 'cps-input', template: "<div class=\"input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <label class=\"label-text\" [ngClass]=\"{ 'label-text-disabled': disabled }\">{{\n    label\n  }}</label>\n\n  <div\n    class=\"input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      '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=\"prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"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=\"prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"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=\"input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"hint-text\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"error-text\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .input-container .input-wrap{position:relative;overflow:hidden}:host .input-container .input-wrap:hover input:enabled{border:1px solid var(--cps-color-calm)}:host .input-container .input-wrap-error input{border-color:#c33!important}:host .input-container .input-wrap-error input:not(:focus){background:#fef3f2!important}:host .input-container .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 .input-container .input-wrap input:focus{border:1px solid var(--cps-color-calm);outline:0}:host .input-container .input-wrap input:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .input-container .input-wrap input:focus+.prefix>.prefix-icon,:host .input-container .input-wrap input:hover+.prefix>.prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap input:disabled+.prefix>.prefix-icon{color:var(--cps-color-text-dark)}:host .input-container .input-wrap input:focus+.prefix+.action-btns>.clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap:hover .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .input-wrap .action-btns{display:flex;align-items:center;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .input-container .input-wrap .action-btns .clear-btn{cursor:pointer;color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .input-container .input-wrap .action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .input-container .input-wrap .action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .input-container .input-wrap .action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .input-container .input-wrap .action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix{height:-webkit-fill-available;display:flex;align-items:center;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}:host .input-container .input-wrap .prefix:hover .prefix-icon{color:var(--cps-color-calm)}:host .input-container .input-wrap .prefix-icon{transition-duration:.2s;height:-webkit-fill-available;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .input-container .input-wrap .prefix-text{color:var(--cps-color-text-mild);cursor:default}:host .input-container .input-wrap .input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .input-container .persistent-clear .action-btns .clear-btn cps-icon{opacity:.5}:host .input-container .password.clearable>input{padding-right:3.8rem}:host .input-container .password>input,:host .input-container .clearable>input{padding-right:2.2rem}:host .input-container .hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .input-container .label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .input-container .label-text-disabled{color:var(--cps-color-text-mild)}:host .input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.NgControl, decorators: [{
                         type: Self
@@ -438,6 +455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], prefixIcon: [{
                 type: Input
+            }], prefixIconClickable: [{
+                type: Input
             }], prefixIconSize: [{
                 type: Input
             }], prefixText: [{
@@ -446,10 +465,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], persistentClear: [{
                 type: Input
+            }], error: [{
+                type: Input
             }], value: [{
                 type: Input
             }], valueChanged: [{
                 type: Output
+            }], focused: [{
+                type: Output
+            }], prefixIconClicked: [{
+                type: Output
+            }], blurred: [{
+                type: Output
             }], prefixTextSpan: [{
                 type: ViewChild,
                 args: ['prefixTextSpan']
@@ -512,27 +539,40 @@ class ClickOutsideDirective {
     // eslint-disable-next-line no-useless-constructor
     constructor(elementRef) {
         this.elementRef = elementRef;
+        this.skipTargets = [];
         this.clickOutside = new EventEmitter();
     }
     onClick(target) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (!((_c = (_b = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('focused')))
             return;
-        const clickedInside = (_e = (_d = this.elementRef) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.contains(target);
+        for (const clss of this.skipTargets) {
+            if ((_d = target === null || target === void 0 ? void 0 : target.classList) === null || _d === void 0 ? void 0 : _d.contains(clss)) {
+                this.clickOutside.emit();
+                return;
+            }
+        }
+        // if an element was detached from the dom, we are not clicking outside
+        if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
+            return;
+        }
+        const clickedInside = (_f = (_e = this.elementRef) === null || _e === void 0 ? void 0 : _e.nativeElement) === null || _f === void 0 ? void 0 : _f.contains(target);
         if (!clickedInside) {
             this.clickOutside.emit();
         }
     }
 }
 ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", inputs: { skipTargets: "skipTargets" }, outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[clickOutside]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { skipTargets: [{
+                type: Input
+            }], clickOutside: [{
                 type: Output
             }], onClick: [{
                 type: HostListener,
@@ -879,7 +919,7 @@ class CpsSelectComponent {
     }
 }
 CpsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\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-select-label\">{{ label }} </label>\n  <div\n    class=\"cps-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear\n    }\"\n    (clickOutside)=\"onClickOutside(selectContainer)\">\n    <div class=\"cps-select-box\" (click)=\"onBoxClick(selectContainer)\">\n      <div class=\"cps-select-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-select-box-placeholder\"\n          *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue : options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && value)))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear(selectContainer, $event)\"></cps-icon>\n        </span>\n        <span class=\"cps-select-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <div class=\"cps-select-options\">\n      <div\n        class=\"cps-select-options-option select-all-option\"\n        [class.allselected]=\"value?.length === options.length\"\n        *ngIf=\"multiple && selectAll\"\n        (click)=\"toggleAll()\">\n        <span class=\"cps-select-options-option-left\">\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">Select all</span>\n        </span>\n      </div>\n      <div\n        class=\"cps-select-options-option\"\n        *ngFor=\"let option of options\"\n        (click)=\"onOptionClick(option, selectContainer)\"\n        [class.selected]=\"\n          option\n            | checkOptionSelected\n              : value\n              : multiple\n              : returnObject\n              : optionValue\n        \">\n        <span class=\"cps-select-options-option-left\">\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">{{\n            option[optionLabel]\n          }}</span>\n        </span>\n\n        <span class=\"cps-select-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=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-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-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-select .cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}:host .cps-select .cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\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: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", 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: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
+CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\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-select-label\">{{ label }} </label>\n  <div\n    class=\"cps-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear\n    }\"\n    (clickOutside)=\"onClickOutside(selectContainer)\">\n    <div class=\"cps-select-box\" (click)=\"onBoxClick(selectContainer)\">\n      <div class=\"cps-select-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-select-box-placeholder\"\n          *ngIf=\"(!value && !multiple) || (value?.length < 1 && multiple)\">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"(value && !multiple) || (value?.length > 0 && multiple)\">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue : options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && value)))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear(selectContainer, $event)\"></cps-icon>\n        </span>\n        <span class=\"cps-select-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <div class=\"cps-select-options\">\n      <div\n        class=\"cps-select-options-option select-all-option\"\n        [class.allselected]=\"value?.length === options.length\"\n        *ngIf=\"multiple && selectAll\"\n        (click)=\"toggleAll()\">\n        <span class=\"cps-select-options-option-left\">\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">Select all</span>\n        </span>\n      </div>\n      <div\n        class=\"cps-select-options-option\"\n        *ngFor=\"let option of options\"\n        (click)=\"onOptionClick(option, selectContainer)\"\n        [class.selected]=\"\n          option\n            | checkOptionSelected\n              : value\n              : multiple\n              : returnObject\n              : optionValue\n        \">\n        <span class=\"cps-select-options-option-left\">\n          <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n          </span>\n          <span class=\"cps-select-options-option-label\">{{\n            option[optionLabel]\n          }}</span>\n        </span>\n\n        <span class=\"cps-select-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=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-select-container{position:relative}:host .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select.active .cps-select-options{display:block}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select.active .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-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-select .cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-select .cps-select-options .cps-select-options-option:hover{background:#f8f4f5}:host .cps-select .cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}:host .cps-select .cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-select .cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-select .cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-select .cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-select .cps-select-options .cps-select-options-option.selected,:host .cps-select .cps-select-options .cps-select-options-option.allselected{font-weight:600}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}:host .cps-select .cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,:host .cps-select .cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}:host .cps-select .cps-select-options .cps-select-options-option.selected{background:#efe4e7}:host .cps-select .cps-select-options .cps-select-options-option.highlighten{background:#f5eeef}:host .cps-select .cps-select-options .cps-select-options-option.selected.highlighten{background:#e6d4d9}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:#c33!important;background:#fef3f2!important}:host .cps-select .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}\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: "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: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -1347,7 +1387,7 @@ class CpsAutocompleteComponent {
     }
 }
 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 });
-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], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], ngImport: i0, template: "<div\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 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.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!important}: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]", 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" }] });
+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], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], ngImport: i0, template: "<div\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 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -1360,7 +1400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         LabelByValuePipe,
                         CombineLabelsPipe,
                         CheckOptionSelectedPipe
-                    ], providers: [LabelByValuePipe], selector: 'cps-autocomplete', template: "<div\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 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.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!important}: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"] }]
+                    ], providers: [LabelByValuePipe], selector: 'cps-autocomplete', template: "<div\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 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"] }]
         }], ctorParameters: function () {
         return [{ type: i1.NgControl, decorators: [{
                         type: Self
@@ -1792,6 +1832,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+class CpsDatepickerComponent {
+    set value(value) {
+        this._value = value;
+        this.stringDate = this._dateToString(value);
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control) {
+        this._control = _control;
+        this.label = '';
+        this.disabled = false;
+        this.width = '100%';
+        this.placeholder = 'MM/DD/YYYY';
+        this.hint = '';
+        this.clearable = true;
+        this.hideDetails = false;
+        this.persistentClear = false;
+        this.showTodayButton = true;
+        this.openOnInputFocus = false;
+        this.valueChanged = new EventEmitter();
+        this.stringDate = '';
+        this.isOpened = false;
+        this.topPos = '57px';
+        this.error = '';
+        this.cvtWidth = '';
+        this._statusChangesSubscription = new Subscription();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (!this.label)
+            this.topPos = '41px';
+        this.cvtWidth = convertSize(this.width);
+        this._statusChangesSubscription = (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.subscribe(() => {
+            this._checkErrors();
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._statusChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onInputValueChanged(val) {
+        this.stringDate = val;
+        if (!val) {
+            this._updateValue(null);
+            return;
+        }
+        const dt = this._stringToDate(val);
+        if (dt)
+            this._updateValue(dt);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    _updateValue(value) {
+        if (this.value === value)
+            return;
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    _updateValueFromInputString() {
+        if (!this.stringDate) {
+            this._updateValue(null);
+        }
+        else {
+            this._updateValue(this._stringToDate(this.stringDate));
+        }
+    }
+    _checkDateFormat(dateString) {
+        if (!/^\d\d\/\d\d\/\d\d\d\d$/.test(dateString)) {
+            return false;
+        }
+        const parts = dateString.split('/').map((p) => parseInt(p, 10));
+        parts[0] -= 1;
+        const d = new Date(parts[2], parts[0], parts[1]);
+        return (d.getMonth() === parts[0] &&
+            d.getDate() === parts[1] &&
+            d.getFullYear() === parts[2]);
+    }
+    _checkDateInRange(date, minDate, maxDate) {
+        if (!minDate && !maxDate)
+            return true;
+        if (minDate && maxDate) {
+            return (date.getTime() >= minDate.getTime() &&
+                date.getTime() <= maxDate.getTime());
+        }
+        if (minDate) {
+            return date.getTime() >= minDate.getTime();
+        }
+        return date.getTime() <= maxDate.getTime();
+    }
+    _dateToString(dateVal) {
+        if (!dateVal)
+            return '';
+        let month = '' + (dateVal.getMonth() + 1);
+        if (month.length < 2)
+            month = '0' + month;
+        let day = '' + dateVal.getDate();
+        if (day.length < 2)
+            day = '0' + day;
+        const year = dateVal.getFullYear();
+        return `${month}/${day}/${year}`;
+    }
+    _stringToDate(dateString) {
+        if (!this._checkDateFormat(dateString))
+            return null;
+        const [month, day, year] = dateString.split('/');
+        const dt = new Date(`${year}-${month}-${day}`);
+        const inRange = this._checkDateInRange(dt, this.minDate, this.maxDate);
+        return inRange ? dt : null;
+    }
+    _checkErrors() {
+        var _a, _b, _c;
+        if (this.stringDate && !this._stringToDate(this.stringDate)) {
+            this.error = 'Date is invalid';
+            return;
+        }
+        const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
+        if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
+            this.error = '';
+            return;
+        }
+        if ('required' in errors) {
+            this.error = 'Field is required';
+            return;
+        }
+        const errArr = Object.values(errors);
+        if (errArr.length < 1) {
+            this.error = '';
+            return;
+        }
+        const message = errArr.find((msg) => typeof msg === 'string');
+        this.error = message || 'Unknown error';
+    }
+    onSelectCalendarDate(dateVal) {
+        this.toggleCalendar(false);
+        this._dateToString(dateVal);
+    }
+    onInputBlur() {
+        var _a, _b;
+        if (this.isOpened)
+            return;
+        (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
+        this._updateValueFromInputString();
+        this._checkErrors();
+    }
+    onClickCalendarIcon() {
+        if (this.disabled)
+            return;
+        if (this.isOpened)
+            this._updateValueFromInputString();
+        this.toggleCalendar();
+    }
+    onClickOutside() {
+        if (this.disabled || !this.isOpened)
+            return;
+        this._updateValueFromInputString();
+        this.toggleCalendar(false);
+    }
+    onInputFocus() {
+        if (this.openOnInputFocus)
+            this.toggleCalendar(true);
+    }
+    toggleCalendar(show) {
+        var _a, _b;
+        if (this.disabled || this.isOpened === show)
+            return;
+        if (typeof show === 'boolean') {
+            this.isOpened = show;
+        }
+        else
+            this.isOpened = !this.isOpened;
+        if (!this.isOpened) {
+            (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
+            this._checkErrors();
+        }
+    }
+}
+CpsDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+CpsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\"\n  (clickOutside)=\"onClickOutside()\"\n  [skipTargets]=\"['label-text', 'error-text', 'hint-text']\">\n  <cps-input\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [persistentClear]=\"persistentClear\"\n    [error]=\"error\"></cps-input>\n  <div\n    class=\"cps-datepicker-calendar\"\n    [style.top]=\"topPos\"\n    [style.display]=\"isOpened ? 'block' : 'none'\">\n    <p-calendar\n      [(ngModel)]=\"value\"\n      [showIcon]=\"true\"\n      [showButtonBar]=\"showTodayButton\"\n      [inline]=\"true\"\n      (onSelect)=\"onSelectCalendarDate($event)\"\n      [showOtherMonths]=\"false\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\">\n    </p-calendar>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker .cps-datepicker-calendar{-webkit-user-select:none;user-select:none;display:none;z-index:1001;border-radius:8px;position:absolute;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker{width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-element.p-disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm)}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding-top:.5rem;border-top:1px solid #dee2e6}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table th,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button{background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "placeholder", "hint", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CpsInputComponent,
+                        CalendarModule,
+                        CommonModule,
+                        FormsModule,
+                        ClickOutsideDirective
+                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\"\n  (clickOutside)=\"onClickOutside()\"\n  [skipTargets]=\"['label-text', 'error-text', 'hint-text']\">\n  <cps-input\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [persistentClear]=\"persistentClear\"\n    [error]=\"error\"></cps-input>\n  <div\n    class=\"cps-datepicker-calendar\"\n    [style.top]=\"topPos\"\n    [style.display]=\"isOpened ? 'block' : 'none'\">\n    <p-calendar\n      [(ngModel)]=\"value\"\n      [showIcon]=\"true\"\n      [showButtonBar]=\"showTodayButton\"\n      [inline]=\"true\"\n      (onSelect)=\"onSelectCalendarDate($event)\"\n      [showOtherMonths]=\"false\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\">\n    </p-calendar>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker .cps-datepicker-calendar{-webkit-user-select:none;user-select:none;display:none;z-index:1001;border-radius:8px;position:absolute;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker{width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-element.p-disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm)}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding-top:.5rem;border-top:1px solid #dee2e6}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:#efe4e7;font-weight:700}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table th,:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button{background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:#f8f4f5}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button:active{background-color:#efe4e7}:host .cps-datepicker .cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], hideDetails: [{
+                type: Input
+            }], persistentClear: [{
+                type: Input
+            }], showTodayButton: [{
+                type: Input
+            }], openOnInputFocus: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of cps-ui-kit
  */
@@ -1800,5 +2080,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CpsAutocompleteComponent, CpsButtonComponent, CpsCheckboxComponent, CpsChipComponent, CpsIconComponent, CpsInputComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsIconComponent, CpsInputComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
 //# sourceMappingURL=cps-ui-kit.mjs.map