@evotor-dev/ui-kit 6.18.0 → 6.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/evotor-dev-ui-kit.umd.js +101 -123
- package/bundles/evotor-dev-ui-kit.umd.js.map +1 -1
- package/esm2015/lib/components/evo-autocomplete/components/evo-autocomplete/evo-autocomplete.component.js +7 -3
- package/esm2015/lib/components/evo-checkbox/evo-checkbox.component.js +10 -16
- package/esm2015/lib/components/evo-chip/evo-chip.component.js +33 -29
- package/esm2015/lib/components/evo-input/evo-input.component.js +11 -9
- package/esm2015/lib/components/evo-textarea/evo-textarea.component.js +35 -26
- package/esm2015/lib/components/evo-textarea/evo-textarea.module.js +5 -22
- package/esm2015/lib/components/evo-toggle/evo-toggle.component.js +13 -15
- package/fesm2015/evotor-dev-ui-kit.js +99 -105
- package/fesm2015/evotor-dev-ui-kit.js.map +1 -1
- package/lib/components/evo-autocomplete/components/evo-autocomplete/evo-autocomplete.component.d.ts +1 -0
- package/lib/components/evo-checkbox/evo-checkbox.component.d.ts +4 -6
- package/lib/components/evo-chip/evo-chip.component.d.ts +9 -5
- package/lib/components/evo-input/evo-input.component.d.ts +3 -2
- package/lib/components/evo-textarea/evo-textarea.component.d.ts +10 -8
- package/lib/components/evo-textarea/evo-textarea.module.d.ts +3 -4
- package/lib/components/evo-toggle/evo-toggle.component.d.ts +4 -5
- package/package.json +1 -1
|
@@ -1155,6 +1155,8 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1155
1155
|
this.destroy$ = new Subject();
|
|
1156
1156
|
/** Whether the user is creating a composition string (IME events). */
|
|
1157
1157
|
this._composing = false;
|
|
1158
|
+
this.onChange = (_value) => { };
|
|
1159
|
+
this.onTouched = () => { };
|
|
1158
1160
|
}
|
|
1159
1161
|
set setValue(value) {
|
|
1160
1162
|
this._value = value;
|
|
@@ -1181,7 +1183,6 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1181
1183
|
set value(value) {
|
|
1182
1184
|
if (value || this._value) {
|
|
1183
1185
|
this._value = this.removePrefix(value);
|
|
1184
|
-
this.onChange(this.prefix + (this._value || ''));
|
|
1185
1186
|
this.changeDetector.markForCheck();
|
|
1186
1187
|
}
|
|
1187
1188
|
}
|
|
@@ -1243,7 +1244,7 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1243
1244
|
}
|
|
1244
1245
|
return e.target.value;
|
|
1245
1246
|
}), enterZone(this.zone), tap((value) => {
|
|
1246
|
-
this.value
|
|
1247
|
+
this.onInputChange(value);
|
|
1247
1248
|
}), takeUntil(this.destroy$)).subscribe();
|
|
1248
1249
|
});
|
|
1249
1250
|
}
|
|
@@ -1274,12 +1275,6 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1274
1275
|
}
|
|
1275
1276
|
}
|
|
1276
1277
|
}
|
|
1277
|
-
onChange(value) {
|
|
1278
|
-
// this is intentional
|
|
1279
|
-
}
|
|
1280
|
-
onTouched() {
|
|
1281
|
-
// this is intentional
|
|
1282
|
-
}
|
|
1283
1278
|
ngAfterViewInit() {
|
|
1284
1279
|
if (this.autoFocus) {
|
|
1285
1280
|
this.inputElement.nativeElement.focus();
|
|
@@ -1311,6 +1306,13 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1311
1306
|
this.disabled = state;
|
|
1312
1307
|
this.changeDetector.detectChanges();
|
|
1313
1308
|
}
|
|
1309
|
+
onInputChange(value) {
|
|
1310
|
+
if (value || this._value) {
|
|
1311
|
+
this._value = this.removePrefix(value);
|
|
1312
|
+
this.onChange(this.prefix + (this._value || ''));
|
|
1313
|
+
this.changeDetector.markForCheck();
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1314
1316
|
onFocus() {
|
|
1315
1317
|
if (!this.uiStates.isFocused) {
|
|
1316
1318
|
this.uiStates.isFocused = true;
|
|
@@ -1747,7 +1749,6 @@ class EvoAutocompleteComponent {
|
|
|
1747
1749
|
set value(value) {
|
|
1748
1750
|
if (value !== this._value) {
|
|
1749
1751
|
this._value = value;
|
|
1750
|
-
this._onChange(value);
|
|
1751
1752
|
}
|
|
1752
1753
|
}
|
|
1753
1754
|
getMultipleInlineItemsLabels(items) {
|
|
@@ -1862,6 +1863,11 @@ class EvoAutocompleteComponent {
|
|
|
1862
1863
|
this.isFocused = false;
|
|
1863
1864
|
this.blurEvent.emit(event);
|
|
1864
1865
|
}
|
|
1866
|
+
handleChange(value) {
|
|
1867
|
+
this._value = value;
|
|
1868
|
+
this._onChange(value);
|
|
1869
|
+
this.changeEvent.emit(value);
|
|
1870
|
+
}
|
|
1865
1871
|
onClearClick() {
|
|
1866
1872
|
this.ngSelectComponent.handleClearClick();
|
|
1867
1873
|
}
|
|
@@ -1892,7 +1898,7 @@ class EvoAutocompleteComponent {
|
|
|
1892
1898
|
}
|
|
1893
1899
|
}
|
|
1894
1900
|
EvoAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl }], target: i0.ɵɵFactoryTarget.Component });
|
|
1895
|
-
EvoAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoAutocompleteComponent, selector: "evo-autocomplete", inputs: { size: "size", isOpen: "isOpen", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", markFirst: "markFirst", placeholder: "placeholder", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: "loading", closeOnSelect: "closeOnSelect", hideSelected: "hideSelected", selectOnTab: "selectOnTab", openOnEnter: "openOnEnter", maxSelectedItems: "maxSelectedItems", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", virtualScroll: "virtualScroll", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", searchFn: "searchFn", clearOnBackspace: "clearOnBackspace", typeahead: "typeahead", multiple: "multiple", multipleInline: "multipleInline", addTag: "addTag", clearable: "clearable", errorsMessages: "errorsMessages", compareWith: "compareWith", _notFoundText: ["notFoundText", "_notFoundText"], editQuery: "editQuery", searchable: "searchable", setSelectbox: ["isSelectbox", "setSelectbox"], setTheme: ["theme", "setTheme"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, queries: [{ propertyName: "labelTemp", first: true, predicate: ["labelTemp"], descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemp", first: true, predicate: ["multiLabelTemp"], descendants: true, read: TemplateRef }, { propertyName: "optionTemp", first: true, predicate: ["optionTemp"], descendants: true, read: TemplateRef }, { propertyName: "optgroupTemp", first: true, predicate: ["optgroupTemp"], descendants: true, read: TemplateRef }, { propertyName: "headerTemp", first: true, predicate: ["headerTemp"], descendants: true, read: TemplateRef }, { propertyName: "footerTemp", first: true, predicate: ["footerTemp"], descendants: true, read: TemplateRef }, { propertyName: "notFoundTemp", first: true, predicate: ["notFoundTemp"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n <ng-select\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [markFirst]=\"markFirst\"\n [placeholder]=\"placeholder\"\n [notFoundText]=\"notFoundText\"\n [typeToSearchText]=\"typeToSearchText\"\n [addTagText]=\"addTagText\"\n [loadingText]=\"loadingText\"\n [clearAllText]=\"clearAllText\"\n [dropdownPosition]=\"dropdownPosition\"\n [appendTo]=\"appendTo\"\n [loading]=\"loading\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"hideSelected\"\n [selectOnTab]=\"selectOnTab\"\n [openOnEnter]=\"openOnEnter\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [virtualScroll]=\"virtualScroll\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [searchFn]=\"searchFn\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [typeahead]=\"typeahead\"\n [multiple]=\"multiple || multipleInline\"\n [addTag]=\"addTag\"\n [searchable]=\"searchable\"\n [clearable]=\"clearable\"\n [isOpen]=\"isOpen\"\n [editableSearchTerm]=\"editQuery\"\n [disabled]=\"control.disabled\"\n [compareWith]=\"compareWith\"\n [(ngModel)]=\"value\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (change)=\"changeEvent.emit($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scrollEvent.emit($event)\"\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n >\n <!-- Selected Item Template -->\n <ng-template *ngIf=\"labelTemp\" ng-label-tmp let-item=\"item\">\n <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"></ng-template>\n </ng-template>\n\n <!-- Overall Label For All Selected Items Template -->\n <ng-template *ngIf=\"multiLabelTemp\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"evo-autocomplete__label\">\n <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: { items: items, clear: clear }\"></ng-template>\n </div>\n </ng-template>\n\n <!-- Options header template -->\n <ng-template *ngIf=\"headerTemp\" ng-header-tmp>\n <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n\n <!-- Option Template -->\n <ng-template\n *ngIf=\"optionTemp\"\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n let-search=\"searchTerm\"\n let-item$=\"item$\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionTemp; context: { item: item, index: index, searchTerm: search, item$: item$}\"\n ></ng-template>\n </ng-template>\n\n <ng-container *ngIf=\"multipleInline && !multiLabelTemp\">\n <ng-template ng-multi-label-tmp let-items=\"items\">\n <div class=\"ng-value evo-autocomplete__label\">{{ getMultipleInlineItemsLabels(items) }}</div>\n </ng-template>\n </ng-container>\n\n <!-- Options group template -->\n <ng-template *ngIf=\"optgroupTemp\" ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\"></ng-template>\n </ng-template>\n\n <!-- Search Text Templates -->\n <ng-template ng-typetosearch-tmp>\n <div *ngIf=\"typeToSearchText\" class=\"ng-option disabled\">{{typeToSearchText}}</div>\n </ng-template>\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <div class=\"ng-option disabled\">{{loadingText}}</div>\n </ng-template>\n\n <ng-container *ngIf=\"notFoundTemp; else defaultNotFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template #defaultNotFoundTemplate>\n <ng-template ng-notfound-tmp>\n <div class=\"ng-option disabled\">{{notFoundText}}</div>\n </ng-template>\n </ng-template>\n\n <!-- Options footer template -->\n <ng-template *ngIf=\"footerTemp\" ng-footer-tmp>\n <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n </ng-select>\n <evo-control-error\n *ngIf=\"hasErrors && errorsMessages\"\n [errors]=\"control.errors\"\n [errorsMessages]=\"errorsMessages\"\n ></evo-control-error>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}@keyframes evo-ellipsis-animation{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: normal;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #91B1B8;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 12px;position:relative;display:block}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 12px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:8px var(--inner-input-padding-right) 8px 12px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete .ng-select-container:has(.ng-clear:not(:empty)){--inner-input-padding-right: 0}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 8px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox{--inner-input-padding-right: 0}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 8px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;padding:4px var(--inner-input-padding-right) 4px 12px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-border-radius: 4px;--evo-input-line-height: 24px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected{--inner-option-background: #FFFFFF}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected.ng-option-marked{--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵh, selector: "[ng-label-tmp]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.ɵi, selector: "[ng-multi-label-tmp]" }, { type: i2$1.ɵj, selector: "[ng-header-tmp]" }, { type: i2$1.ɵf, selector: "[ng-option-tmp]" }, { type: i2$1.ɵg, selector: "[ng-optgroup-tmp]" }, { type: i2$1.ɵm, selector: "[ng-typetosearch-tmp]" }, { type: i2$1.ɵn, selector: "[ng-loadingtext-tmp]" }, { type: i2$1.ɵl, selector: "[ng-notfound-tmp]" }, { type: i2$1.ɵk, selector: "[ng-footer-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1901
|
+
EvoAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoAutocompleteComponent, selector: "evo-autocomplete", inputs: { size: "size", isOpen: "isOpen", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", markFirst: "markFirst", placeholder: "placeholder", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: "loading", closeOnSelect: "closeOnSelect", hideSelected: "hideSelected", selectOnTab: "selectOnTab", openOnEnter: "openOnEnter", maxSelectedItems: "maxSelectedItems", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", virtualScroll: "virtualScroll", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", searchFn: "searchFn", clearOnBackspace: "clearOnBackspace", typeahead: "typeahead", multiple: "multiple", multipleInline: "multipleInline", addTag: "addTag", clearable: "clearable", errorsMessages: "errorsMessages", compareWith: "compareWith", _notFoundText: ["notFoundText", "_notFoundText"], editQuery: "editQuery", searchable: "searchable", setSelectbox: ["isSelectbox", "setSelectbox"], setTheme: ["theme", "setTheme"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, queries: [{ propertyName: "labelTemp", first: true, predicate: ["labelTemp"], descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemp", first: true, predicate: ["multiLabelTemp"], descendants: true, read: TemplateRef }, { propertyName: "optionTemp", first: true, predicate: ["optionTemp"], descendants: true, read: TemplateRef }, { propertyName: "optgroupTemp", first: true, predicate: ["optgroupTemp"], descendants: true, read: TemplateRef }, { propertyName: "headerTemp", first: true, predicate: ["headerTemp"], descendants: true, read: TemplateRef }, { propertyName: "footerTemp", first: true, predicate: ["footerTemp"], descendants: true, read: TemplateRef }, { propertyName: "notFoundTemp", first: true, predicate: ["notFoundTemp"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n <ng-select\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [markFirst]=\"markFirst\"\n [placeholder]=\"placeholder\"\n [notFoundText]=\"notFoundText\"\n [typeToSearchText]=\"typeToSearchText\"\n [addTagText]=\"addTagText\"\n [loadingText]=\"loadingText\"\n [clearAllText]=\"clearAllText\"\n [dropdownPosition]=\"dropdownPosition\"\n [appendTo]=\"appendTo\"\n [loading]=\"loading\"\n [closeOnSelect]=\"closeOnSelect\"\n [hideSelected]=\"hideSelected\"\n [selectOnTab]=\"selectOnTab\"\n [openOnEnter]=\"openOnEnter\"\n [maxSelectedItems]=\"maxSelectedItems\"\n [groupBy]=\"groupBy\"\n [groupValue]=\"groupValue\"\n [bufferAmount]=\"bufferAmount\"\n [virtualScroll]=\"virtualScroll\"\n [selectableGroup]=\"selectableGroup\"\n [selectableGroupAsModel]=\"selectableGroupAsModel\"\n [searchFn]=\"searchFn\"\n [clearOnBackspace]=\"clearOnBackspace\"\n [typeahead]=\"typeahead\"\n [multiple]=\"multiple || multipleInline\"\n [addTag]=\"addTag\"\n [searchable]=\"searchable\"\n [clearable]=\"clearable\"\n [isOpen]=\"isOpen\"\n [editableSearchTerm]=\"editQuery\"\n [disabled]=\"control.disabled\"\n [compareWith]=\"compareWith\"\n [(ngModel)]=\"value\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (change)=\"handleChange($event)\"\n (open)=\"openEvent.emit($event)\"\n (close)=\"closeEvent.emit($event)\"\n (search)=\"searchEvent.emit($event)\"\n (clear)=\"clearEvent.emit($event)\"\n (add)=\"addEvent.emit($event)\"\n (remove)=\"removeEvent.emit($event)\"\n (scroll)=\"scrollEvent.emit($event)\"\n (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n >\n <!-- Selected Item Template -->\n <ng-template *ngIf=\"labelTemp\" ng-label-tmp let-item=\"item\">\n <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"></ng-template>\n </ng-template>\n\n <!-- Overall Label For All Selected Items Template -->\n <ng-template *ngIf=\"multiLabelTemp\" ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"evo-autocomplete__label\">\n <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: { items: items, clear: clear }\"></ng-template>\n </div>\n </ng-template>\n\n <!-- Options header template -->\n <ng-template *ngIf=\"headerTemp\" ng-header-tmp>\n <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n\n <!-- Option Template -->\n <ng-template\n *ngIf=\"optionTemp\"\n ng-option-tmp\n let-item=\"item\"\n let-index=\"index\"\n let-search=\"searchTerm\"\n let-item$=\"item$\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionTemp; context: { item: item, index: index, searchTerm: search, item$: item$}\"\n ></ng-template>\n </ng-template>\n\n <ng-container *ngIf=\"multipleInline && !multiLabelTemp\">\n <ng-template ng-multi-label-tmp let-items=\"items\">\n <div class=\"ng-value evo-autocomplete__label\">{{ getMultipleInlineItemsLabels(items) }}</div>\n </ng-template>\n </ng-container>\n\n <!-- Options group template -->\n <ng-template *ngIf=\"optgroupTemp\" ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\"></ng-template>\n </ng-template>\n\n <!-- Search Text Templates -->\n <ng-template ng-typetosearch-tmp>\n <div *ngIf=\"typeToSearchText\" class=\"ng-option disabled\">{{typeToSearchText}}</div>\n </ng-template>\n <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n <div class=\"ng-option disabled\">{{loadingText}}</div>\n </ng-template>\n\n <ng-container *ngIf=\"notFoundTemp; else defaultNotFoundTemplate\">\n <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\"></ng-template>\n </ng-template>\n </ng-container>\n <ng-template #defaultNotFoundTemplate>\n <ng-template ng-notfound-tmp>\n <div class=\"ng-option disabled\">{{notFoundText}}</div>\n </ng-template>\n </ng-template>\n\n <!-- Options footer template -->\n <ng-template *ngIf=\"footerTemp\" ng-footer-tmp>\n <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\"></ng-template>\n </ng-template>\n </ng-select>\n <evo-control-error\n *ngIf=\"hasErrors && errorsMessages\"\n [errors]=\"control.errors\"\n [errorsMessages]=\"errorsMessages\"\n ></evo-control-error>\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}@keyframes evo-ellipsis-animation{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: normal;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #91B1B8;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 12px;position:relative;display:block}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 12px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:8px var(--inner-input-padding-right) 8px 12px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete .ng-select-container:has(.ng-clear:not(:empty)){--inner-input-padding-right: 0}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 8px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox{--inner-input-padding-right: 0}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 8px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z%22 %2F%3E%3C%2Fsvg%3E\");background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;padding:4px var(--inner-input-padding-right) 4px 12px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-border-radius: 4px;--evo-input-line-height: 24px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container:hover{border:1px solid #9B9B9B}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected{--inner-option-background: #FFFFFF}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected.ng-option-marked{--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.ɵh, selector: "[ng-label-tmp]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.ɵi, selector: "[ng-multi-label-tmp]" }, { type: i2$1.ɵj, selector: "[ng-header-tmp]" }, { type: i2$1.ɵf, selector: "[ng-option-tmp]" }, { type: i2$1.ɵg, selector: "[ng-optgroup-tmp]" }, { type: i2$1.ɵm, selector: "[ng-typetosearch-tmp]" }, { type: i2$1.ɵn, selector: "[ng-loadingtext-tmp]" }, { type: i2$1.ɵl, selector: "[ng-notfound-tmp]" }, { type: i2$1.ɵk, selector: "[ng-footer-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1896
1902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoAutocompleteComponent, decorators: [{
|
|
1897
1903
|
type: Component,
|
|
1898
1904
|
args: [{
|
|
@@ -2051,36 +2057,30 @@ class EvoCheckboxComponent extends EvoBaseControl {
|
|
|
2051
2057
|
this.indeterminateChange = new EventEmitter();
|
|
2052
2058
|
this.indeterminate = undefined;
|
|
2053
2059
|
this.disabled = false;
|
|
2060
|
+
this.value = false;
|
|
2054
2061
|
}
|
|
2055
2062
|
set setIndeterminate(value) {
|
|
2056
2063
|
this.indeterminate = value;
|
|
2057
2064
|
}
|
|
2058
|
-
onChange(
|
|
2059
|
-
}
|
|
2060
|
-
onTouched() {
|
|
2061
|
-
}
|
|
2062
|
-
get value() {
|
|
2063
|
-
return this._value;
|
|
2064
|
-
}
|
|
2065
|
-
set value(value) {
|
|
2066
|
-
this._value = value;
|
|
2067
|
-
this.onChange(value);
|
|
2068
|
-
this.cdr.detectChanges();
|
|
2069
|
-
}
|
|
2065
|
+
onChange(_value) { }
|
|
2066
|
+
onTouched() { }
|
|
2070
2067
|
get checkboxClass() {
|
|
2071
2068
|
return {
|
|
2072
|
-
|
|
2069
|
+
invalid: this.currentState[EvoControlStates.invalid],
|
|
2073
2070
|
};
|
|
2074
2071
|
}
|
|
2075
2072
|
onInputChange(value) {
|
|
2076
2073
|
this.value = value;
|
|
2074
|
+
this.onChange(value);
|
|
2077
2075
|
if (this.indeterminate === true) {
|
|
2078
2076
|
this.indeterminate = false;
|
|
2079
2077
|
this.indeterminateChange.emit(false);
|
|
2080
2078
|
}
|
|
2079
|
+
this.cdr.markForCheck();
|
|
2081
2080
|
}
|
|
2082
2081
|
writeValue(value) {
|
|
2083
2082
|
this.value = value;
|
|
2083
|
+
this.cdr.markForCheck();
|
|
2084
2084
|
}
|
|
2085
2085
|
registerOnChange(fn) {
|
|
2086
2086
|
this.onChange = fn;
|
|
@@ -2090,7 +2090,7 @@ class EvoCheckboxComponent extends EvoBaseControl {
|
|
|
2090
2090
|
}
|
|
2091
2091
|
setDisabledState(state) {
|
|
2092
2092
|
this.disabled = state;
|
|
2093
|
-
this.cdr.
|
|
2093
|
+
this.cdr.markForCheck();
|
|
2094
2094
|
}
|
|
2095
2095
|
}
|
|
2096
2096
|
EvoCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoCheckboxComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -2798,14 +2798,17 @@ var EvoChipTheme;
|
|
|
2798
2798
|
EvoChipTheme["white"] = "white";
|
|
2799
2799
|
})(EvoChipTheme || (EvoChipTheme = {}));
|
|
2800
2800
|
class EvoChipComponent extends EvoBaseControl {
|
|
2801
|
-
constructor() {
|
|
2802
|
-
super(
|
|
2801
|
+
constructor(injector, cdr) {
|
|
2802
|
+
super(injector);
|
|
2803
|
+
this.injector = injector;
|
|
2804
|
+
this.cdr = cdr;
|
|
2803
2805
|
this.closeTitle = '';
|
|
2804
2806
|
this.close = new EventEmitter();
|
|
2805
2807
|
this.templateVariables = {
|
|
2806
2808
|
chipTypes: EvoChipType,
|
|
2807
2809
|
chipThemes: EvoChipTheme,
|
|
2808
2810
|
};
|
|
2811
|
+
this.destroy$ = new Subject();
|
|
2809
2812
|
}
|
|
2810
2813
|
set setInitialValue(value) {
|
|
2811
2814
|
this.inheritedValue = value;
|
|
@@ -2813,37 +2816,33 @@ class EvoChipComponent extends EvoBaseControl {
|
|
|
2813
2816
|
get classes() {
|
|
2814
2817
|
var _a, _b;
|
|
2815
2818
|
const states = {
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2819
|
+
touched: (_a = this.control) === null || _a === void 0 ? void 0 : _a.touched,
|
|
2820
|
+
valid: this.currentState[EvoControlStates.valid],
|
|
2821
|
+
invalid: this.currentState[EvoControlStates.invalid],
|
|
2822
|
+
disabled: (_b = this.control) === null || _b === void 0 ? void 0 : _b.disabled,
|
|
2820
2823
|
};
|
|
2821
|
-
const result = Object.keys(states)
|
|
2822
|
-
.filter((key) => states[key]);
|
|
2824
|
+
const result = Object.keys(states).filter((key) => states[key]);
|
|
2823
2825
|
result.push(`theme-${this.theme || EvoChipTheme.grey}`);
|
|
2824
2826
|
result.push(`type-${this.type}`);
|
|
2825
2827
|
return result;
|
|
2826
2828
|
}
|
|
2827
|
-
get value() {
|
|
2828
|
-
return this._value;
|
|
2829
|
-
}
|
|
2830
|
-
set value(value) {
|
|
2831
|
-
this._value = value;
|
|
2832
|
-
this.onChange(value);
|
|
2833
|
-
this.onTouched();
|
|
2834
|
-
}
|
|
2835
2829
|
ngOnInit() {
|
|
2836
2830
|
this.initDefaultParams();
|
|
2837
2831
|
}
|
|
2838
2832
|
ngAfterViewInit() {
|
|
2839
2833
|
if (this.control) {
|
|
2840
|
-
this.control.valueChanges.subscribe(() => {
|
|
2834
|
+
this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
2841
2835
|
this.writeValue(this.control.value);
|
|
2842
2836
|
});
|
|
2843
2837
|
}
|
|
2844
2838
|
}
|
|
2839
|
+
ngOnDestroy() {
|
|
2840
|
+
this.destroy$.next();
|
|
2841
|
+
this.destroy$.complete();
|
|
2842
|
+
}
|
|
2845
2843
|
writeValue(value) {
|
|
2846
|
-
this.
|
|
2844
|
+
this.value = value;
|
|
2845
|
+
this.cdr.markForCheck();
|
|
2847
2846
|
}
|
|
2848
2847
|
registerOnChange(fn) {
|
|
2849
2848
|
this.onChange = fn;
|
|
@@ -2851,8 +2850,15 @@ class EvoChipComponent extends EvoBaseControl {
|
|
|
2851
2850
|
registerOnTouched(fn) {
|
|
2852
2851
|
this.onTouched = fn;
|
|
2853
2852
|
}
|
|
2853
|
+
setDisabledState(state) {
|
|
2854
|
+
this.disabled = state;
|
|
2855
|
+
this.cdr.markForCheck();
|
|
2856
|
+
}
|
|
2854
2857
|
onInputChange(value) {
|
|
2855
2858
|
this.value = value;
|
|
2859
|
+
this.onChange(value);
|
|
2860
|
+
this.onTouched();
|
|
2861
|
+
this.cdr.markForCheck();
|
|
2856
2862
|
}
|
|
2857
2863
|
onCloseClick(e) {
|
|
2858
2864
|
this.close.emit(e);
|
|
@@ -2865,12 +2871,10 @@ class EvoChipComponent extends EvoBaseControl {
|
|
|
2865
2871
|
this.theme = EvoChipTheme.grey;
|
|
2866
2872
|
}
|
|
2867
2873
|
}
|
|
2868
|
-
onChange(
|
|
2869
|
-
}
|
|
2870
|
-
onTouched() {
|
|
2871
|
-
}
|
|
2874
|
+
onChange(_value) { }
|
|
2875
|
+
onTouched() { }
|
|
2872
2876
|
}
|
|
2873
|
-
EvoChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoChipComponent, deps:
|
|
2877
|
+
EvoChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoChipComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2874
2878
|
EvoChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoChipComponent, selector: "evo-chip", inputs: { type: "type", theme: "theme", counter: "counter", disabled: "disabled", name: "name", closable: "closable", closeTitle: "closeTitle", setInitialValue: ["value", "setInitialValue"] }, outputs: { close: "close" }, providers: [
|
|
2875
2879
|
{
|
|
2876
2880
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -2883,9 +2887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
2883
2887
|
args: [{
|
|
2884
2888
|
selector: 'evo-chip',
|
|
2885
2889
|
templateUrl: 'evo-chip.component.html',
|
|
2886
|
-
styleUrls: [
|
|
2887
|
-
'evo-chip.component.scss',
|
|
2888
|
-
],
|
|
2890
|
+
styleUrls: ['evo-chip.component.scss'],
|
|
2889
2891
|
providers: [
|
|
2890
2892
|
{
|
|
2891
2893
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -2894,7 +2896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
2894
2896
|
},
|
|
2895
2897
|
],
|
|
2896
2898
|
}]
|
|
2897
|
-
}], propDecorators: { type: [{
|
|
2899
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
|
|
2898
2900
|
type: Input
|
|
2899
2901
|
}], theme: [{
|
|
2900
2902
|
type: Input
|
|
@@ -6657,42 +6659,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6657
6659
|
}] });
|
|
6658
6660
|
|
|
6659
6661
|
class EvoTextareaComponent extends EvoBaseControl {
|
|
6660
|
-
constructor() {
|
|
6661
|
-
super(
|
|
6662
|
+
constructor(injector, cdr) {
|
|
6663
|
+
super(injector);
|
|
6664
|
+
this.injector = injector;
|
|
6665
|
+
this.cdr = cdr;
|
|
6662
6666
|
this.size = 'normal';
|
|
6663
6667
|
this.placeholder = '';
|
|
6664
6668
|
this.rows = 3;
|
|
6665
6669
|
this.blur = new EventEmitter();
|
|
6666
|
-
this.
|
|
6667
|
-
this.
|
|
6670
|
+
this.value = '';
|
|
6671
|
+
this._focused = false;
|
|
6672
|
+
this._disabled = false;
|
|
6668
6673
|
this.onChange = (_) => { };
|
|
6669
6674
|
this.onTouched = () => { };
|
|
6670
6675
|
}
|
|
6671
|
-
get value() {
|
|
6672
|
-
return this._value;
|
|
6673
|
-
}
|
|
6674
6676
|
get textareaClasses() {
|
|
6675
6677
|
return {
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
|
|
6678
|
+
focused: this._focused,
|
|
6679
|
+
disabled: this._disabled,
|
|
6680
|
+
valid: this.currentState[EvoControlStates.valid],
|
|
6681
|
+
invalid: this.currentState[EvoControlStates.invalid],
|
|
6680
6682
|
[`size_${this.size}`]: this.size !== 'normal',
|
|
6681
6683
|
};
|
|
6682
6684
|
}
|
|
6683
|
-
|
|
6684
|
-
|
|
6685
|
+
handleOnChange(event) {
|
|
6686
|
+
const target = event.target;
|
|
6687
|
+
this.value = target.value;
|
|
6685
6688
|
this.onChange(this.value);
|
|
6686
6689
|
}
|
|
6687
6690
|
onFocus() {
|
|
6688
|
-
if (!this.
|
|
6689
|
-
this.
|
|
6691
|
+
if (!this._focused && !this._disabled) {
|
|
6692
|
+
this._focused = true;
|
|
6693
|
+
this.cdr.markForCheck();
|
|
6690
6694
|
}
|
|
6691
6695
|
}
|
|
6692
6696
|
onBlur() {
|
|
6693
|
-
this.
|
|
6697
|
+
this._focused = false;
|
|
6698
|
+
if (this.value) {
|
|
6699
|
+
this.value = this.value.trim();
|
|
6700
|
+
}
|
|
6694
6701
|
this.onTouched();
|
|
6695
6702
|
this.blur.emit();
|
|
6703
|
+
this.cdr.markForCheck();
|
|
6696
6704
|
}
|
|
6697
6705
|
registerOnChange(fn) {
|
|
6698
6706
|
this.onChange = fn;
|
|
@@ -6701,20 +6709,23 @@ class EvoTextareaComponent extends EvoBaseControl {
|
|
|
6701
6709
|
this.onTouched = fn;
|
|
6702
6710
|
}
|
|
6703
6711
|
setDisabledState(isDisabled) {
|
|
6704
|
-
this.
|
|
6712
|
+
this._disabled = isDisabled;
|
|
6713
|
+
this.cdr.markForCheck();
|
|
6705
6714
|
}
|
|
6706
6715
|
writeValue(value) {
|
|
6707
|
-
|
|
6716
|
+
console.log(value);
|
|
6717
|
+
this.value = value !== null && value !== void 0 ? value : '';
|
|
6718
|
+
this.cdr.markForCheck();
|
|
6708
6719
|
}
|
|
6709
6720
|
}
|
|
6710
|
-
EvoTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaComponent, deps:
|
|
6721
|
+
EvoTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6711
6722
|
EvoTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoTextareaComponent, selector: "evo-textarea", inputs: { size: "size", placeholder: "placeholder", rows: "rows" }, outputs: { blur: "blur" }, providers: [
|
|
6712
6723
|
{
|
|
6713
6724
|
provide: NG_VALUE_ACCESSOR,
|
|
6714
6725
|
useExisting: forwardRef(() => EvoTextareaComponent),
|
|
6715
6726
|
multi: true,
|
|
6716
6727
|
},
|
|
6717
|
-
], usesInheritance: true, ngImport: i0, template: "<textarea
|
|
6728
|
+
], usesInheritance: true, ngImport: i0, template: "<textarea\n class=\"evo-textarea\"\n [evoUiClass]=\"textareaClasses\"\n [placeholder]=\"placeholder\"\n [rows]=\"rows\"\n [value]=\"value\"\n (input)=\"handleOnChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n></textarea>\n<evo-control-error\n *ngIf=\"control?.invalid && control?.dirty && control?.touched\"\n [errors]=\"control?.errors\"\n [errorsMessages]=\"errorsMessages\"\n></evo-control-error>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}@keyframes evo-ellipsis-animation{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}:host{display:inline-block;--evo-input-prefix-content-margin: 4px 8px 4px 4px}.evo-input{--evo-input-padding-left: 12px;--evo-input-padding-right: 12px;--evo-input-padding-top: 8px;--evo-input-padding-bottom: 8px;position:relative;cursor:text}.evo-input_focused{border:solid 1px #74706F}.evo-input_disabled{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}.evo-input_invalid{border-color:#ff1817!important}.evo-input_theme-default{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-default:hover{border:1px solid #9B9B9B}.evo-input_theme-default.evo-input_size-small{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-default.evo-input_size-small:hover{border:1px solid #9B9B9B}.evo-input_theme-default.evo-input_size-small .evo-input__field{--evo-input-padding-left: 12px;--evo-input-padding-right: 12px;--evo-input-padding-top: 4px;--evo-input-padding-bottom: 4px}.evo-input_theme-default.evo-input_size-small .evo-input__field:not(:last-child){--evo-input-padding-right: 0}.evo-input_theme-rounded{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-rounded:hover{border:1px solid #9B9B9B}.evo-input_theme-rounded.evo-input_size-small{--evo-input-border-radius: 4px;--evo-input-line-height: 24px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-rounded.evo-input_size-small:hover{border:1px solid #9B9B9B}.evo-input_theme-rounded.evo-input_size-small .evo-input__field{--evo-input-padding-left: 12px}.evo-input_theme-rounded.evo-input_size-small .evo-input__field:last-child{--evo-input-padding-right: 12px}.evo-input_size-small{height:32px}.evo-input_size-small .evo-input__icon{margin-right:8px}.evo-input_size-small .evo-input__icon img{max-height:16px}.evo-input_size-small .evo-input__tooltip-container{top:100%}.evo-input_size-small .evo-input__tooltip-container:before{left:calc(100% - 28px)}@media (min-width: 1200px){.evo-input_size-small .evo-input__tooltip-container{top:calc(100% + 4px)}.evo-input_size-small .evo-input__tooltip-container:before{left:calc(50% - 6px)}}.evo-input__prefix-icon{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-left:8px;fill:#91b1b8}.evo-input__prefix-icon:empty{display:none}.evo-input__prefix-icon:not(:empty)~.evo-input__field{--evo-input-padding-left: 8px}.evo-input__prefix-content{display:inline-flex;flex-shrink:0;justify-content:center;align-items:center;margin:var(--evo-input-prefix-content-margin)}.evo-input__prefix-content:empty{display:none}.evo-input__prefix-content:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__field{width:100%;height:100%;margin:0;padding:var(--evo-input-padding-top) var(--evo-input-padding-right) var(--evo-input-padding-bottom) var(--evo-input-padding-left);color:inherit;font-weight:inherit;font-size:inherit;border:none;border-radius:inherit;outline:none}.evo-input__field::-webkit-input-placeholder{color:#9b9b9b}.evo-input__field::-moz-placeholder{color:#9b9b9b;opacity:1}.evo-input__field:-ms-input-placeholder{color:#9b9b9b}.evo-input__field:disabled{color:#b0b0b0;background-color:#f9fafb!important}.evo-input__field:not(:last-child){--evo-input-padding-right: 0}.evo-input__prefix{padding-left:12px;transition:color .2s;color:#9b9b9b}.evo-input__prefix:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__tooltip{flex:0 0 24px;width:24px;height:24px;margin:0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon-clear{width:24px;height:24px;margin:0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon{margin:0 8px}.evo-input__icon img{display:block;width:100%;max-width:60px;height:auto;max-height:22px}.evo-input__tooltip-container{position:absolute;top:calc(100% - 2px);left:0;z-index:1;display:flex;width:100%;padding:10px 10px 10px 20px;color:#212121;line-height:normal;white-space:normal;background-color:#fff8e6;border-radius:4px;box-shadow:0 4px 12px #0003;cursor:default}.evo-input__tooltip-container[hidden]{display:none!important}.evo-input__tooltip-container:before{position:absolute;top:-20px;left:calc(100% - 34px);border:10px solid transparent;border-bottom-color:#fff8e6;pointer-events:none;content:\"\"}@media (min-width: 1200px){.evo-input__tooltip-container{left:calc(50% - 22px)}.evo-input__tooltip-container:before{left:calc(50% - 12px)}}.evo-input__clearable{display:flex;justify-content:center;align-items:center}.evo-input__clearable+.evo-input__additional{margin-left:-10px}.evo-input__additional{display:flex;justify-content:center;align-items:center}.evo-input__additional:not(:last-child) .evo-input__icon{margin-right:8px}.evo-input__additional+.evo-input__loading-spinner{margin-left:0}.evo-input__loading-spinner{flex:0 0 24px;width:24px;height:24px;margin:0 8px;--evo-circular-loader-color: #91B1B8}:host{display:inline-block;vertical-align:top}.evo-textarea{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:normal;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;width:100%;height:auto;padding:8px 12px;white-space:normal;transition:box-shadow .3s,border .3s;resize:vertical}.evo-textarea:hover{border:1px solid #9B9B9B}.evo-textarea_focused{border:solid 1px #74706F}.evo-textarea_disabled{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}.evo-textarea_invalid{border-color:#ff1817!important}.evo-textarea_size_small{padding:4px 12px}.evo-textarea::placeholder{color:#9b9b9b}.evo-textarea[disabled]{white-space:normal;background:#F9FAFB}\n"], components: [{ type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6718
6729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaComponent, decorators: [{
|
|
6719
6730
|
type: Component,
|
|
6720
6731
|
args: [{
|
|
@@ -6728,8 +6739,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6728
6739
|
multi: true,
|
|
6729
6740
|
},
|
|
6730
6741
|
],
|
|
6742
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6731
6743
|
}]
|
|
6732
|
-
}], propDecorators: { size: [{
|
|
6744
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
|
|
6733
6745
|
type: Input
|
|
6734
6746
|
}], placeholder: [{
|
|
6735
6747
|
type: Input
|
|
@@ -6742,28 +6754,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6742
6754
|
class EvoTextareaModule {
|
|
6743
6755
|
}
|
|
6744
6756
|
EvoTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
6745
|
-
EvoTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaModule, declarations: [EvoTextareaComponent], imports: [CommonModule,
|
|
6746
|
-
|
|
6747
|
-
ReactiveFormsModule,
|
|
6748
|
-
EvoUiKitModule,
|
|
6749
|
-
EvoControlErrorModule], exports: [EvoTextareaComponent] });
|
|
6750
|
-
EvoTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaModule, imports: [[
|
|
6751
|
-
CommonModule,
|
|
6752
|
-
FormsModule,
|
|
6753
|
-
ReactiveFormsModule,
|
|
6754
|
-
EvoUiKitModule,
|
|
6755
|
-
EvoControlErrorModule,
|
|
6756
|
-
]] });
|
|
6757
|
+
EvoTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaModule, declarations: [EvoTextareaComponent], imports: [CommonModule, EvoUiKitModule, EvoControlErrorModule], exports: [EvoTextareaComponent] });
|
|
6758
|
+
EvoTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaModule, imports: [[CommonModule, EvoUiKitModule, EvoControlErrorModule]] });
|
|
6757
6759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoTextareaModule, decorators: [{
|
|
6758
6760
|
type: NgModule,
|
|
6759
6761
|
args: [{
|
|
6760
|
-
imports: [
|
|
6761
|
-
CommonModule,
|
|
6762
|
-
FormsModule,
|
|
6763
|
-
ReactiveFormsModule,
|
|
6764
|
-
EvoUiKitModule,
|
|
6765
|
-
EvoControlErrorModule,
|
|
6766
|
-
],
|
|
6762
|
+
imports: [CommonModule, EvoUiKitModule, EvoControlErrorModule],
|
|
6767
6763
|
declarations: [EvoTextareaComponent],
|
|
6768
6764
|
exports: [EvoTextareaComponent],
|
|
6769
6765
|
}]
|
|
@@ -6950,18 +6946,10 @@ class EvoToggleComponent {
|
|
|
6950
6946
|
constructor(changeDetector) {
|
|
6951
6947
|
this.changeDetector = changeDetector;
|
|
6952
6948
|
this.isDisabled = false;
|
|
6949
|
+
this.value = false;
|
|
6953
6950
|
this.onChange = (_value) => { };
|
|
6954
6951
|
this.onTouched = () => { };
|
|
6955
6952
|
}
|
|
6956
|
-
get value() {
|
|
6957
|
-
return this._value;
|
|
6958
|
-
}
|
|
6959
|
-
set value(value) {
|
|
6960
|
-
if (value !== this._value) {
|
|
6961
|
-
this._value = value;
|
|
6962
|
-
this.onChange(value);
|
|
6963
|
-
}
|
|
6964
|
-
}
|
|
6965
6953
|
get totalClasses() {
|
|
6966
6954
|
const classes = [];
|
|
6967
6955
|
if (this.isDisabled) {
|
|
@@ -6969,10 +6957,16 @@ class EvoToggleComponent {
|
|
|
6969
6957
|
}
|
|
6970
6958
|
return classes;
|
|
6971
6959
|
}
|
|
6960
|
+
handleChange(value) {
|
|
6961
|
+
this.value = value;
|
|
6962
|
+
this.onChange(value);
|
|
6963
|
+
this.onTouched();
|
|
6964
|
+
this.changeDetector.markForCheck();
|
|
6965
|
+
}
|
|
6972
6966
|
writeValue(value) {
|
|
6973
|
-
if (value !== this.
|
|
6974
|
-
this.
|
|
6975
|
-
this.changeDetector.
|
|
6967
|
+
if (value !== this.value) {
|
|
6968
|
+
this.value = value;
|
|
6969
|
+
this.changeDetector.markForCheck();
|
|
6976
6970
|
}
|
|
6977
6971
|
}
|
|
6978
6972
|
registerOnChange(fn) {
|
|
@@ -6983,7 +6977,7 @@ class EvoToggleComponent {
|
|
|
6983
6977
|
}
|
|
6984
6978
|
setDisabledState(state) {
|
|
6985
6979
|
this.isDisabled = state;
|
|
6986
|
-
this.changeDetector.
|
|
6980
|
+
this.changeDetector.markForCheck();
|
|
6987
6981
|
}
|
|
6988
6982
|
}
|
|
6989
6983
|
EvoToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -6993,7 +6987,7 @@ EvoToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
6993
6987
|
useExisting: forwardRef(() => EvoToggleComponent),
|
|
6994
6988
|
multi: true,
|
|
6995
6989
|
},
|
|
6996
|
-
], ngImport: i0, template: "<label class=\"evo-toggle\" [evoUiClass]=\"totalClasses\">\n <input type=\"checkbox\" [
|
|
6990
|
+
], ngImport: i0, template: "<label class=\"evo-toggle\" [evoUiClass]=\"totalClasses\">\n <input type=\"checkbox\" [ngModel]=\"value\" [disabled]=\"isDisabled\" (ngModelChange)=\"handleChange($event)\" />\n <span class=\"slider\"></span>\n</label>\n", styles: [":host{position:relative;display:inline-block}.evo-toggle{display:flex;justify-content:center;align-items:center;width:40px;height:24px;cursor:pointer}.evo-toggle_disabled{cursor:default;opacity:.5}.evo-toggle input{display:none}.slider{position:absolute;display:inline-block;width:34px;height:14px;background-color:#c6c6c6;border-radius:16px;transition:background-color .3s;mix-blend-mode:normal}.slider:before{position:absolute;top:-3px;left:-3px;width:20px;height:20px;background-color:#f4f6f8;border-radius:50%;box-shadow:0 1px 3px #0003,0 2px 2px #0000001f,0 0 2px #00000024;transition:color .3s,background-color .3s,transform .3s;content:\"\"}input[type=checkbox]:checked+.slider{background:rgba(9,134,226,.5)}input[type=checkbox]:checked+.slider:before{right:0px;left:0px;background-color:#0986e2;transform:translate(18px);pointer-events:none}\n"], directives: [{ type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6997
6991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoToggleComponent, decorators: [{
|
|
6998
6992
|
type: Component,
|
|
6999
6993
|
args: [{
|