cps-ui-kit 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2020/lib/components/cps-autocomplete/cps-autocomplete.component.mjs +113 -105
  2. package/esm2020/lib/components/cps-select/cps-select.component.mjs +13 -3
  3. package/fesm2015/cps-ui-kit.mjs +128 -110
  4. package/fesm2015/cps-ui-kit.mjs.map +1 -1
  5. package/fesm2020/cps-ui-kit.mjs +124 -106
  6. package/fesm2020/cps-ui-kit.mjs.map +1 -1
  7. package/lib/components/cps-autocomplete/cps-autocomplete.component.d.ts +13 -13
  8. package/package.json +1 -1
package/fesm2015/cps-ui-kit.mjs CHANGED
@@ -710,7 +710,11 @@ class CpsSelectComponent {
710
710
  if (this.isOpened) {
711
711
  const selected = this.selectContainer.nativeElement.querySelector('.selected');
712
712
  if (selected)
713
- selected.scrollIntoView();
713
+ selected.scrollIntoView({
714
+ behavior: 'instant',
715
+ block: 'nearest',
716
+ inline: 'start'
717
+ });
714
718
  }
715
719
  }
716
720
  // private _filterOptions() {
@@ -782,7 +786,10 @@ class CpsSelectComponent {
782
786
  const parentRect = parent.getBoundingClientRect();
783
787
  const elRect = el.getBoundingClientRect();
784
788
  if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
785
- el.scrollIntoView();
789
+ el.scrollIntoView({
790
+ block: 'nearest',
791
+ inline: 'start'
792
+ });
786
793
  }
787
794
  }
788
795
  _navigateOptionsByArrows(up) {
@@ -821,6 +828,7 @@ class CpsSelectComponent {
821
828
  this._dehighlightOption();
822
829
  }
823
830
  onKeyDown(event, dd) {
831
+ event.preventDefault();
824
832
  const code = event.keyCode;
825
833
  // escape
826
834
  if (code === 27) {
@@ -830,6 +838,8 @@ class CpsSelectComponent {
830
838
  // enter
831
839
  else if (code === 13) {
832
840
  let idx = this.optionHighlightedIndex;
841
+ if (idx < 0)
842
+ return;
833
843
  if (this.multiple && this.selectAll) {
834
844
  if (idx === 0) {
835
845
  this.toggleAll();
@@ -992,13 +1002,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
992
1002
  }] } });
993
1003
 
994
1004
  class CpsAutocompleteComponent {
1005
+ get value() {
1006
+ return this._value;
1007
+ }
995
1008
  set value(value) {
996
1009
  this._value = value;
997
1010
  this.onChange(value);
998
1011
  }
999
- get value() {
1000
- return this._value;
1001
- }
1002
1012
  constructor(_control, _labelByValue) {
1003
1013
  this._control = _control;
1004
1014
  this._labelByValue = _labelByValue;
@@ -1025,7 +1035,6 @@ class CpsAutocompleteComponent {
1025
1035
  this.loading = false;
1026
1036
  this._value = undefined;
1027
1037
  this.valueChanged = new EventEmitter();
1028
- this._statusChangesSubscription = new Subscription();
1029
1038
  this.error = '';
1030
1039
  this.cvtWidth = '';
1031
1040
  this.isOpened = false;
@@ -1034,6 +1043,7 @@ class CpsAutocompleteComponent {
1034
1043
  this.backspaceClickedOnce = false;
1035
1044
  this.activeSingle = false;
1036
1045
  this.optionHighlightedIndex = -1;
1046
+ this._statusChangesSubscription = new Subscription();
1037
1047
  // eslint-disable-next-line @typescript-eslint/no-empty-function
1038
1048
  this.onChange = (event) => { };
1039
1049
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1057,25 +1067,6 @@ class CpsAutocompleteComponent {
1057
1067
  var _a;
1058
1068
  (_a = this._statusChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
1059
1069
  }
1060
- _toggleOptions(dd, show) {
1061
- if (this.disabled || !dd)
1062
- return;
1063
- this.backspaceClickedOnce = false;
1064
- if (typeof show === 'boolean') {
1065
- if (show)
1066
- dd.classList.add('active');
1067
- else
1068
- dd.classList.remove('active');
1069
- }
1070
- else
1071
- dd.classList.toggle('active');
1072
- this.isOpened = dd.classList.contains('active');
1073
- if (this.isOpened) {
1074
- const selected = this.autocompleteContainer.nativeElement.querySelector('.selected');
1075
- if (selected)
1076
- selected.scrollIntoView();
1077
- }
1078
- }
1079
1070
  select(option, byValue) {
1080
1071
  function includes(array, val) {
1081
1072
  return array ? !!find(array, (item) => isEqual(item, val)) : false;
@@ -1129,31 +1120,6 @@ class CpsAutocompleteComponent {
1129
1120
  this.focusInput();
1130
1121
  }, 0);
1131
1122
  }
1132
- _clickOption(option, dd) {
1133
- this.select(option, false);
1134
- if (!this.multiple) {
1135
- this._toggleOptions(dd, false);
1136
- }
1137
- }
1138
- _checkErrors() {
1139
- var _a, _b, _c;
1140
- const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
1141
- if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
1142
- this.error = '';
1143
- return;
1144
- }
1145
- if ('required' in errors) {
1146
- this.error = 'Field is required';
1147
- return;
1148
- }
1149
- const errArr = Object.values(errors);
1150
- if (errArr.length < 1) {
1151
- this.error = '';
1152
- return;
1153
- }
1154
- const message = errArr.find((msg) => typeof msg === 'string');
1155
- this.error = message || 'Unknown error';
1156
- }
1157
1123
  registerOnChange(fn) {
1158
1124
  this.onChange = fn;
1159
1125
  }
@@ -1172,18 +1138,6 @@ class CpsAutocompleteComponent {
1172
1138
  writeValue(value) {
1173
1139
  this.value = value;
1174
1140
  }
1175
- updateValue(value) {
1176
- this.writeValue(value);
1177
- this.onChange(value);
1178
- this.valueChanged.emit(value);
1179
- }
1180
- _getValueLabel() {
1181
- return this.value
1182
- ? this.returnObject
1183
- ? this.value[this.optionLabel]
1184
- : this._labelByValue.transform(this.value, this.options, this.optionValue, this.optionLabel)
1185
- : '';
1186
- }
1187
1141
  clear(dd, event) {
1188
1142
  var _a;
1189
1143
  event.stopPropagation();
@@ -1208,45 +1162,9 @@ class CpsAutocompleteComponent {
1208
1162
  (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
1209
1163
  this._checkErrors();
1210
1164
  }
1211
- _clearInput() {
1212
- this.filteredOptions = this.options;
1213
- this.inputText = '';
1214
- this.activeSingle = false;
1215
- }
1216
- _closeAndClear(dd) {
1217
- this._clearInput();
1218
- this._toggleOptions(dd, false);
1219
- this._dehighlightOption();
1220
- }
1221
1165
  onClickOutside(dd) {
1222
1166
  this._closeAndClear(dd);
1223
1167
  }
1224
- _getHTMLOptions() {
1225
- var _a, _b;
1226
- return (((_b = (_a = this.autocompleteContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.cps-autocomplete-options-option')) || []);
1227
- }
1228
- _dehighlightOption(el) {
1229
- if (el)
1230
- el.classList.remove('highlighten');
1231
- else {
1232
- if (this.optionHighlightedIndex < 0)
1233
- return;
1234
- const optionItems = this._getHTMLOptions();
1235
- optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
1236
- this.optionHighlightedIndex = -1;
1237
- }
1238
- }
1239
- _highlightOption(el) {
1240
- el.classList.add('highlighten');
1241
- const parent = el.parentElement;
1242
- if (!parent)
1243
- return;
1244
- const parentRect = parent.getBoundingClientRect();
1245
- const elRect = el.getBoundingClientRect();
1246
- if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
1247
- el.scrollIntoView();
1248
- }
1249
- }
1250
1168
  onBoxClick() {
1251
1169
  if (!this.multiple) {
1252
1170
  this.activeSingle = true;
@@ -1303,6 +1221,116 @@ class CpsAutocompleteComponent {
1303
1221
  this._dehighlightOption();
1304
1222
  }
1305
1223
  }
1224
+ focusInput() {
1225
+ var _a, _b, _c;
1226
+ (_c = (_b = (_a = this.autocompleteContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
1227
+ }
1228
+ focus() {
1229
+ var _a, _b, _c;
1230
+ (_b = (_a = this.autocompleteContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
1231
+ this.focusInput();
1232
+ this._toggleOptions((_c = this.autocompleteContainer) === null || _c === void 0 ? void 0 : _c.nativeElement, true);
1233
+ }
1234
+ _toggleOptions(dd, show) {
1235
+ if (this.disabled || !dd)
1236
+ return;
1237
+ this.backspaceClickedOnce = false;
1238
+ if (typeof show === 'boolean') {
1239
+ if (show)
1240
+ dd.classList.add('active');
1241
+ else
1242
+ dd.classList.remove('active');
1243
+ }
1244
+ else
1245
+ dd.classList.toggle('active');
1246
+ this.isOpened = dd.classList.contains('active');
1247
+ if (this.isOpened) {
1248
+ const selected = this.autocompleteContainer.nativeElement.querySelector('.selected');
1249
+ if (selected)
1250
+ selected.scrollIntoView({
1251
+ behavior: 'instant',
1252
+ block: 'nearest',
1253
+ inline: 'start'
1254
+ });
1255
+ }
1256
+ }
1257
+ _clickOption(option, dd) {
1258
+ this.select(option, false);
1259
+ if (!this.multiple) {
1260
+ this._toggleOptions(dd, false);
1261
+ }
1262
+ }
1263
+ _checkErrors() {
1264
+ var _a, _b, _c;
1265
+ const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
1266
+ if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
1267
+ this.error = '';
1268
+ return;
1269
+ }
1270
+ if ('required' in errors) {
1271
+ this.error = 'Field is required';
1272
+ return;
1273
+ }
1274
+ const errArr = Object.values(errors);
1275
+ if (errArr.length < 1) {
1276
+ this.error = '';
1277
+ return;
1278
+ }
1279
+ const message = errArr.find((msg) => typeof msg === 'string');
1280
+ console.log('message', message);
1281
+ this.error = message || 'Unknown error';
1282
+ }
1283
+ updateValue(value) {
1284
+ this.writeValue(value);
1285
+ this.onChange(value);
1286
+ this.valueChanged.emit(value);
1287
+ }
1288
+ _getValueLabel() {
1289
+ return this.value
1290
+ ? this.returnObject
1291
+ ? this.value[this.optionLabel]
1292
+ : this._labelByValue.transform(this.value, this.options, this.optionValue, this.optionLabel)
1293
+ : '';
1294
+ }
1295
+ _clearInput() {
1296
+ this.filteredOptions = this.options;
1297
+ this.inputText = '';
1298
+ this.activeSingle = false;
1299
+ }
1300
+ _closeAndClear(dd) {
1301
+ this._clearInput();
1302
+ this._toggleOptions(dd, false);
1303
+ this._dehighlightOption();
1304
+ }
1305
+ _getHTMLOptions() {
1306
+ var _a, _b;
1307
+ return (((_b = (_a = this.autocompleteContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.cps-autocomplete-options-option')) || []);
1308
+ }
1309
+ _dehighlightOption(el) {
1310
+ if (el)
1311
+ el.classList.remove('highlighten');
1312
+ else {
1313
+ if (this.optionHighlightedIndex < 0)
1314
+ return;
1315
+ const optionItems = this._getHTMLOptions();
1316
+ optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
1317
+ this.optionHighlightedIndex = -1;
1318
+ }
1319
+ }
1320
+ _highlightOption(el) {
1321
+ el.classList.add('highlighten');
1322
+ const parent = el.parentElement;
1323
+ if (!parent)
1324
+ return;
1325
+ const parentRect = parent.getBoundingClientRect();
1326
+ const elRect = el.getBoundingClientRect();
1327
+ if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
1328
+ el.scrollIntoView({
1329
+ block: 'nearest',
1330
+ inline: 'start'
1331
+ });
1332
+ }
1333
+ }
1306
1334
  _navigateOptionsByArrows(up) {
1307
1335
  if (!this.isOpened)
1308
1336
  return;
@@ -1375,19 +1403,9 @@ class CpsAutocompleteComponent {
1375
1403
  this.focusInput();
1376
1404
  }, 0);
1377
1405
  }
1378
- focusInput() {
1379
- var _a, _b, _c;
1380
- (_c = (_b = (_a = this.autocompleteContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
1381
- }
1382
- focus() {
1383
- var _a, _b, _c;
1384
- (_b = (_a = this.autocompleteContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
1385
- this.focusInput();
1386
- this._toggleOptions((_c = this.autocompleteContainer) === null || _c === void 0 ? void 0 : _c.nativeElement, true);
1387
- }
1388
1406
  }
1389
1407
  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 });
1390
- CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], ngImport: i0, template: "<div\n [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" }] });
1408
+ CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }], ngImport: i0, template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span data-cy-id=\"cps-autocomplete-options\" class=\"cps-autocomplete-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .chip{background-color:var(--cps-color-bg-mid)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
1391
1409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
1392
1410
  type: Component,
1393
1411
  args: [{ standalone: true, imports: [
@@ -1400,7 +1418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1400
1418
  LabelByValuePipe,
1401
1419
  CombineLabelsPipe,
1402
1420
  CheckOptionSelectedPipe
1403
- ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], 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"] }]
1421
+ ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n data-cy-id=\"cps-autocomplete\"\n [ngStyle]=\"{ width: cvtWidth }\"\n class=\"cps-autocomplete\"\n tabindex=\"1\"\n [ngClass]=\"{ disabled: disabled, error: error }\"\n #autocompleteContainer>\n <label *ngIf=\"label\" class=\"cps-autocomplete-label\">{{ label }}</label>\n <div\n (keydown)=\"onContainerKeyDown($event, autocompleteContainer)\"\n class=\"cps-autocomplete-container\"\n [class.focused]=\"isOpened\"\n [ngClass]=\"{\n 'persistent-clear': persistentClear\n }\"\n (clickOutside)=\"onClickOutside(autocompleteContainer)\">\n <div class=\"cps-autocomplete-box\" (click)=\"onBoxClick()\">\n <div class=\"cps-autocomplete-box-area\">\n <cps-icon\n *ngIf=\"prefixIcon\"\n [icon]=\"prefixIcon\"\n [size]=\"prefixIconSize\"\n class=\"prefix-icon\">\n </cps-icon>\n <div\n class=\"cps-autocomplete-box-items\"\n *ngIf=\"\n (value && !multiple) || (value?.length > 0 && multiple);\n else autocompleteInput\n \">\n <span *ngIf=\"!multiple\" class=\"single-item\">\n <div class=\"single-item-selection\">\n <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n returnObject\n ? value[optionLabel]\n : (value | labelByValue : options : optionValue : optionLabel)\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n autocompleteInput;\n context: {\n inputClass: 'single-item-input',\n inputStyle: activeSingle ? 'opacity: 1' : null\n }\n \">\n </ng-container>\n </span>\n\n <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n <div\n *ngFor=\"let val of value; let last = last\"\n class=\"text-group-item\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n {{\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n }}{{ !last ? ',' : '' }}\n </div>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n\n <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n <cps-chip\n *ngFor=\"let val of value; let last = last\"\n [disabled]=\"disabled\"\n [closable]=\"closableChips\"\n (closed)=\"select(val, true)\"\n [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n [label]=\"\n returnObject\n ? val[optionLabel]\n : (val | labelByValue : options : optionValue : optionLabel)\n \">\n </cps-chip>\n <ng-container *ngTemplateOutlet=\"autocompleteInput\"></ng-container>\n </div>\n </div>\n <span class=\"cps-autocomplete-box-icons\">\n <span\n *ngIf=\"clearable && !disabled\"\n [style.visibility]=\"\n persistentClear ||\n (!persistentClear &&\n ((multiple && value?.length) || (!multiple && value)))\n ? 'visible'\n : 'hidden'\n \"\n class=\"cps-autocomplete-box-clear-icon\">\n <cps-icon\n icon=\"delete\"\n size=\"small\"\n (click)=\"clear(autocompleteContainer, $event)\"></cps-icon>\n </span>\n <span class=\"cps-autocomplete-box-chevron\">\n <cps-icon\n icon=\"chevron-down\"\n size=\"small\"\n color=\"text-dark\"></cps-icon>\n </span>\n </span>\n </div>\n </div>\n\n <div class=\"cps-autocomplete-options\">\n <div\n class=\"cps-autocomplete-options-option select-all-option\"\n [class.allselected]=\"value?.length === options.length\"\n *ngIf=\"multiple && selectAll\"\n (click)=\"toggleAll()\">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span class=\"cps-autocomplete-options-option-label\">Select all</span>\n </span>\n </div>\n <div\n class=\"cps-autocomplete-options-option\"\n *ngFor=\"let option of filteredOptions\"\n (click)=\"onOptionClick(option, autocompleteContainer)\"\n [class.selected]=\"\n option\n | checkOptionSelected\n : value\n : multiple\n : returnObject\n : optionValue\n \">\n <span class=\"cps-autocomplete-options-option-left\">\n <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n </span>\n <span data-cy-id=\"cps-autocomplete-options\" class=\"cps-autocomplete-options-option-label\">{{\n option[optionLabel]\n }}</span>\n </span>\n\n <span class=\"cps-autocomplete-options-option-right\">{{\n option[optionInfo]\n }}</span>\n </div>\n </div>\n <cps-progress-linear\n *ngIf=\"loading\"\n height=\"3\"\n radius=\"4\"\n opacity=\"0.3\"\n class=\"autocomplete-progress-bar\"\n bgColor=\"transparent\">\n </cps-progress-linear>\n </div>\n <div *ngIf=\"!error && !hideDetails\" class=\"cps-autocomplete-hint\">\n {{ hint }}\n </div>\n <div *ngIf=\"error && !hideDetails\" class=\"cps-autocomplete-error\">\n {{ error }}\n </div>\n</div>\n\n<ng-template\n #autocompleteInput\n let-inputClass=\"inputClass\"\n let-inputStyle=\"inputStyle\">\n <input\n class=\"cps-autocomplete-box-input\"\n [class]=\"inputClass\"\n [style]=\"inputStyle\"\n [placeholder]=\"\n (!value && !multiple) || (value?.length < 1 && multiple)\n ? placeholder\n : ''\n \"\n (input)=\"filterOptions($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n [(ngModel)]=\"inputText\"\n (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;display:grid}:host .cps-autocomplete-container{position:relative}:host .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete.active .cps-autocomplete-options{display:block}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-text-lightest);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;margin-top:3px;margin-bottom:3px;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:2.5px;padding-right:4px;height:24px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-autocomplete.active .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:240px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option:hover{background:#f8f4f5}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected{background:#efe4e7}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:#f5eeef}:host .cps-autocomplete .cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:#e6d4d9}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:#c33!important;background:#fef3f2}:host .cps-autocomplete .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .chip{background-color:var(--cps-color-bg-mid)}\n"] }]
1404
1422
  }], ctorParameters: function () {
1405
1423
  return [{ type: i1.NgControl, decorators: [{
1406
1424
  type: Self