@evotor-dev/ui-kit 8.5.1 → 8.7.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/esm2022/lib/components/evo-chip/evo-chip.component.mjs +4 -3
- package/esm2022/lib/components/evo-input/evo-input.component.mjs +15 -14
- package/fesm2022/evotor-dev-ui-kit.mjs +17 -15
- package/fesm2022/evotor-dev-ui-kit.mjs.map +1 -1
- package/lib/components/evo-chip/evo-chip.component.d.ts +2 -1
- package/lib/components/evo-input/evo-input.component.d.ts +6 -5
- package/package.json +1 -1
- package/styles/components/evo-chip.scss +42 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Injectable, PLATFORM_ID, ɵstringify as _stringify, Directive, Input, EventEmitter, Output, HostListener, Optional, ViewContainerRef, TemplateRef, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, inject, SecurityContext, Component, ChangeDetectionStrategy, HostBinding, Pipe, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, input, booleanAttribute, ComponentRef, computed,
|
|
2
|
+
import { InjectionToken, Injectable, PLATFORM_ID, ɵstringify as _stringify, Directive, Input, EventEmitter, Output, HostListener, Optional, ViewContainerRef, TemplateRef, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, inject, SecurityContext, Component, ChangeDetectionStrategy, HostBinding, Pipe, output, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, input, booleanAttribute, ComponentRef, computed, viewChild, signal, ChangeDetectorRef, DestroyRef, EnvironmentInjector, NgZone, createComponent, Injector, ApplicationRef, ComponentFactoryResolver, makeEnvironmentProviders, Host, ContentChildren, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { isPlatformBrowser, CommonModule, AsyncPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle, Location, NgFor } from '@angular/common';
|
|
5
5
|
import * as i1$2 from '@angular/forms';
|
|
@@ -1010,8 +1010,8 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1010
1010
|
this.unmask = false;
|
|
1011
1011
|
this.clearable = false;
|
|
1012
1012
|
this.maskValidation = false;
|
|
1013
|
-
|
|
1014
|
-
this.
|
|
1013
|
+
this.blur = output();
|
|
1014
|
+
this.onFocus = output();
|
|
1015
1015
|
this.size = EvoInputSizes.normal;
|
|
1016
1016
|
this.theme = EvoInputTheme.default;
|
|
1017
1017
|
this.customTooltipChecked = false;
|
|
@@ -1192,15 +1192,18 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1192
1192
|
focus() {
|
|
1193
1193
|
this.inputElement.nativeElement.focus();
|
|
1194
1194
|
}
|
|
1195
|
-
|
|
1196
|
-
if (
|
|
1197
|
-
|
|
1195
|
+
onInputFocus(event) {
|
|
1196
|
+
if (this.uiStates.isFocused) {
|
|
1197
|
+
return;
|
|
1198
1198
|
}
|
|
1199
|
+
this.uiStates.isFocused = true;
|
|
1200
|
+
this.onTouched();
|
|
1201
|
+
this.onFocus.emit(event);
|
|
1199
1202
|
}
|
|
1200
|
-
|
|
1203
|
+
onInputBlur(event) {
|
|
1201
1204
|
this.uiStates.isFocused = false;
|
|
1202
1205
|
this.onTouched();
|
|
1203
|
-
this.blur.emit();
|
|
1206
|
+
this.blur.emit(event);
|
|
1204
1207
|
}
|
|
1205
1208
|
// eslint-disable-next-line
|
|
1206
1209
|
onTooltipClick(event) {
|
|
@@ -1264,7 +1267,7 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1264
1267
|
return null;
|
|
1265
1268
|
}
|
|
1266
1269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoInputComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: COMPOSITION_BUFFER_MODE, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1267
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoInputComponent, isStandalone: true, selector: "evo-input", inputs: { autoFocus: "autoFocus", dataCp: ["data-cp", "dataCp"], icon: "icon", mask: "mask", placeholder: "placeholder", tooltip: "tooltip", type: "type", disabled: "disabled", loading: "loading", prefix: "prefix", autocomplete: "autocomplete", inputDebounce: "inputDebounce", unmask: "unmask", clearable: "clearable", maskValidation: "maskValidation", setValue: ["value", "setValue"], setSize: ["size", "setSize"], setTheme: ["theme", "setTheme"] }, outputs: { blur: "blur" }, providers: [
|
|
1270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoInputComponent, isStandalone: true, selector: "evo-input", inputs: { autoFocus: "autoFocus", dataCp: ["data-cp", "dataCp"], icon: "icon", mask: "mask", placeholder: "placeholder", tooltip: "tooltip", type: "type", disabled: "disabled", loading: "loading", prefix: "prefix", autocomplete: "autocomplete", inputDebounce: "inputDebounce", unmask: "unmask", clearable: "clearable", maskValidation: "maskValidation", setValue: ["value", "setValue"], setSize: ["size", "setSize"], setTheme: ["theme", "setTheme"] }, outputs: { blur: "blur", onFocus: "onFocus" }, providers: [
|
|
1268
1271
|
{
|
|
1269
1272
|
provide: NG_VALUE_ACCESSOR,
|
|
1270
1273
|
useExisting: forwardRef(() => EvoInputComponent),
|
|
@@ -1275,7 +1278,7 @@ class EvoInputComponent extends EvoBaseControl {
|
|
|
1275
1278
|
useExisting: forwardRef(() => EvoInputComponent),
|
|
1276
1279
|
multi: true,
|
|
1277
1280
|
},
|
|
1278
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"evo-input\" [evoUiClass]=\"inputClass\">\n <div class=\"evo-input__prefix-content\">\n <ng-content select=\"[evoInputPrefixContent]\" />\n </div>\n <div class=\"evo-input__prefix-icon\">\n <ng-content select=\"[evoInputIcon]\" />\n </div>\n\n @if (prefix) {\n <span class=\"evo-input__prefix\" [evoUiClass]=\"{focused: (!isDisabled && !!value) || uiStates.isFocused}\">\n {{ prefix }}\n </span>\n }\n\n <input\n #input\n type=\"{{ type }}\"\n placeholder=\"{{ placeholder }}\"\n class=\"evo-input__field\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.data-cp]=\"dataCp\"\n [disabled]=\"isDisabled\"\n (focus)=\"
|
|
1281
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"evo-input\" [evoUiClass]=\"inputClass\">\n <div class=\"evo-input__prefix-content\">\n <ng-content select=\"[evoInputPrefixContent]\" />\n </div>\n <div class=\"evo-input__prefix-icon\">\n <ng-content select=\"[evoInputIcon]\" />\n </div>\n\n @if (prefix) {\n <span class=\"evo-input__prefix\" [evoUiClass]=\"{focused: (!isDisabled && !!value) || uiStates.isFocused}\">\n {{ prefix }}\n </span>\n }\n\n <input\n #input\n type=\"{{ type }}\"\n placeholder=\"{{ placeholder }}\"\n class=\"evo-input__field\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.data-cp]=\"dataCp\"\n [disabled]=\"isDisabled\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionstart)=\"_compositionStart()\"\n (compositionend)=\"_compositionEnd($event.target.value)\"\n />\n\n @if (loading) {\n <div class=\"evo-input__loading-spinner\"></div>\n } @else {\n @if (isClearable) {\n <div class=\"evo-input__clearable\" (click)=\"onClear()\">\n <evo-icon shape=\"decline\" class=\"evo-input__icon-clear\" />\n </div>\n }\n @if (hasAdditional) {\n <div class=\"evo-input__additional\">\n @if (tooltip || uiStates.hasCustomTooltip) {\n <evo-icon\n shape=\"help\"\n class=\"evo-input__tooltip\"\n (mouseenter)=\"showTooltip()\"\n (mouseleave)=\"hideTooltip()\"\n (click)=\"onTooltipClick($event)\"\n />\n }\n @if (icon) {\n <div class=\"evo-input__icon\">\n <img [attr.src]=\"icon\" />\n </div>\n }\n </div>\n }\n }\n\n @if (!customTooltipChecked || uiStates.isTooltipVisible) {\n <div\n #tooltipContainer\n [hidden]=\"!customTooltipChecked\"\n [ngClass]=\"{'evo-input__tooltip-container': tooltip}\"\n (click)=\"onTooltipClick($event)\"\n (mouseenter)=\"showTooltip()\"\n (mouseleave)=\"hideTooltip()\"\n >\n {{ tooltip }}\n <ng-content select=\"[tooltip]\" />\n </div>\n }\n</label>\n\n@if (showErrors) {\n <evo-control-error [errors]=\"control.errors\" [errorsMessages]=\"errorsMessages\" />\n}\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%}}:host{display:inline-block;--evo-input-prefix-content-margin: 0 12px}.evo-input{--evo-input-padding-left: 16px;--evo-input-padding-right: 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: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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 .evo-input__field{--evo-input-padding-left: 8px;--evo-input-padding-right: 8px}.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: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--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:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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 .evo-input__field:last-child{--evo-input-padding-right: 16px}.evo-input_size-small{height:32px}.evo-input_size-small .evo-input__tooltip,.evo-input_size-small .evo-input__loading-spinner{flex:0 0 16px;width:16px;height:16px;margin:0 10px}.evo-input_size-small .evo-input__icon{margin-right:10px}.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_size-small .evo-input__prefix-icon{width:16px;height:16px}.evo-input_size-small .evo-input__prefix-icon:empty{display:none}.evo-input_size-small .evo-input__icon-clear{width:16px;height:16px}.evo-input__prefix-icon{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-left:12px;fill:#91b1b8}.evo-input__prefix-icon:empty{display:none}.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:0 var(--evo-input-padding-right) 0 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:20px;font-size:16px;transition:color .2s}.evo-input__prefix_focused{color:#000}.evo-input__prefix:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__tooltip,.evo-input__icon-clear{width:24px;height:24px;margin:0 10px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon{margin:0 20px 0 10px}.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:10px}.evo-input__additional+.evo-input__loading-spinner{margin-left:0}.evo-input__loading-spinner{margin:0 20px;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "component", type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }] }); }
|
|
1279
1282
|
}
|
|
1280
1283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoInputComponent, decorators: [{
|
|
1281
1284
|
type: Component,
|
|
@@ -1290,7 +1293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
1290
1293
|
useExisting: forwardRef(() => EvoInputComponent),
|
|
1291
1294
|
multi: true,
|
|
1292
1295
|
},
|
|
1293
|
-
], standalone: true, imports: [EvoUiClassDirective, EvoIconComponent, NgClass, EvoControlErrorComponent], template: "<label class=\"evo-input\" [evoUiClass]=\"inputClass\">\n <div class=\"evo-input__prefix-content\">\n <ng-content select=\"[evoInputPrefixContent]\" />\n </div>\n <div class=\"evo-input__prefix-icon\">\n <ng-content select=\"[evoInputIcon]\" />\n </div>\n\n @if (prefix) {\n <span class=\"evo-input__prefix\" [evoUiClass]=\"{focused: (!isDisabled && !!value) || uiStates.isFocused}\">\n {{ prefix }}\n </span>\n }\n\n <input\n #input\n type=\"{{ type }}\"\n placeholder=\"{{ placeholder }}\"\n class=\"evo-input__field\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.data-cp]=\"dataCp\"\n [disabled]=\"isDisabled\"\n (focus)=\"
|
|
1296
|
+
], standalone: true, imports: [EvoUiClassDirective, EvoIconComponent, NgClass, EvoControlErrorComponent], template: "<label class=\"evo-input\" [evoUiClass]=\"inputClass\">\n <div class=\"evo-input__prefix-content\">\n <ng-content select=\"[evoInputPrefixContent]\" />\n </div>\n <div class=\"evo-input__prefix-icon\">\n <ng-content select=\"[evoInputIcon]\" />\n </div>\n\n @if (prefix) {\n <span class=\"evo-input__prefix\" [evoUiClass]=\"{focused: (!isDisabled && !!value) || uiStates.isFocused}\">\n {{ prefix }}\n </span>\n }\n\n <input\n #input\n type=\"{{ type }}\"\n placeholder=\"{{ placeholder }}\"\n class=\"evo-input__field\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.data-cp]=\"dataCp\"\n [disabled]=\"isDisabled\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionstart)=\"_compositionStart()\"\n (compositionend)=\"_compositionEnd($event.target.value)\"\n />\n\n @if (loading) {\n <div class=\"evo-input__loading-spinner\"></div>\n } @else {\n @if (isClearable) {\n <div class=\"evo-input__clearable\" (click)=\"onClear()\">\n <evo-icon shape=\"decline\" class=\"evo-input__icon-clear\" />\n </div>\n }\n @if (hasAdditional) {\n <div class=\"evo-input__additional\">\n @if (tooltip || uiStates.hasCustomTooltip) {\n <evo-icon\n shape=\"help\"\n class=\"evo-input__tooltip\"\n (mouseenter)=\"showTooltip()\"\n (mouseleave)=\"hideTooltip()\"\n (click)=\"onTooltipClick($event)\"\n />\n }\n @if (icon) {\n <div class=\"evo-input__icon\">\n <img [attr.src]=\"icon\" />\n </div>\n }\n </div>\n }\n }\n\n @if (!customTooltipChecked || uiStates.isTooltipVisible) {\n <div\n #tooltipContainer\n [hidden]=\"!customTooltipChecked\"\n [ngClass]=\"{'evo-input__tooltip-container': tooltip}\"\n (click)=\"onTooltipClick($event)\"\n (mouseenter)=\"showTooltip()\"\n (mouseleave)=\"hideTooltip()\"\n >\n {{ tooltip }}\n <ng-content select=\"[tooltip]\" />\n </div>\n }\n</label>\n\n@if (showErrors) {\n <evo-control-error [errors]=\"control.errors\" [errorsMessages]=\"errorsMessages\" />\n}\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%}}:host{display:inline-block;--evo-input-prefix-content-margin: 0 12px}.evo-input{--evo-input-padding-left: 16px;--evo-input-padding-right: 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: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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 .evo-input__field{--evo-input-padding-left: 8px;--evo-input-padding-right: 8px}.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: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--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:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);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 .evo-input__field:last-child{--evo-input-padding-right: 16px}.evo-input_size-small{height:32px}.evo-input_size-small .evo-input__tooltip,.evo-input_size-small .evo-input__loading-spinner{flex:0 0 16px;width:16px;height:16px;margin:0 10px}.evo-input_size-small .evo-input__icon{margin-right:10px}.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_size-small .evo-input__prefix-icon{width:16px;height:16px}.evo-input_size-small .evo-input__prefix-icon:empty{display:none}.evo-input_size-small .evo-input__icon-clear{width:16px;height:16px}.evo-input__prefix-icon{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-left:12px;fill:#91b1b8}.evo-input__prefix-icon:empty{display:none}.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:0 var(--evo-input-padding-right) 0 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:20px;font-size:16px;transition:color .2s}.evo-input__prefix_focused{color:#000}.evo-input__prefix:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__tooltip,.evo-input__icon-clear{width:24px;height:24px;margin:0 10px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon{margin:0 20px 0 10px}.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:10px}.evo-input__additional+.evo-input__loading-spinner{margin-left:0}.evo-input__loading-spinner{margin:0 20px;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}\n"] }]
|
|
1294
1297
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
1295
1298
|
type: Optional
|
|
1296
1299
|
}, {
|
|
@@ -1327,8 +1330,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
1327
1330
|
type: Input
|
|
1328
1331
|
}], maskValidation: [{
|
|
1329
1332
|
type: Input
|
|
1330
|
-
}], blur: [{
|
|
1331
|
-
type: Output
|
|
1332
1333
|
}], inputElement: [{
|
|
1333
1334
|
type: ViewChild,
|
|
1334
1335
|
args: ['input', { static: true }]
|
|
@@ -2215,6 +2216,7 @@ var EvoChipTheme;
|
|
|
2215
2216
|
(function (EvoChipTheme) {
|
|
2216
2217
|
EvoChipTheme["grey"] = "grey";
|
|
2217
2218
|
EvoChipTheme["white"] = "white";
|
|
2219
|
+
EvoChipTheme["custom"] = "custom";
|
|
2218
2220
|
})(EvoChipTheme || (EvoChipTheme = {}));
|
|
2219
2221
|
class EvoChipComponent extends EvoBaseControl {
|
|
2220
2222
|
constructor() {
|
|
@@ -2297,7 +2299,7 @@ class EvoChipComponent extends EvoBaseControl {
|
|
|
2297
2299
|
useExisting: forwardRef(() => EvoChipComponent),
|
|
2298
2300
|
multi: true,
|
|
2299
2301
|
},
|
|
2300
|
-
], usesInheritance: true, ngImport: i0, template: "<label class=\"chip\" [evoUiClass]=\"classes\">\n @switch (type) {\n @case (templateVariables?.chipTypes.checkbox) {\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n @case (templateVariables?.chipTypes.radio) {\n <input\n type=\"radio\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n }\n\n <div class=\"chip__label\" [evoUiClass]=\"{disabled: disabled}\">\n <span class=\"chip__text\">\n <ng-content />\n </span>\n\n @if ((type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined) {\n <div class=\"chip__counter\">\n <span class=\"chip__counter-value\">\n {{ counter }}\n </span>\n </div>\n }\n\n @if (closable) {\n <button\n type=\"button\"\n class=\"chip__close\"\n [disabled]=\"disabled\"\n [title]=\"closeTitle\"\n (click)=\"onCloseClick($event)\"\n >\n <evo-icon shape=\"decline\" />\n </button>\n }\n </div>\n</label>\n", styles: [".chip{position:relative;display:inline-flex;max-width:100%}.chip__label{display:flex;align-items:center;max-width:inherit;height:32px;margin:0;padding:3px 12px;overflow:hidden;color:#0986e2;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;background-color:#f4f6f8;border-radius:16px;cursor:pointer;transition:color .3s,background-color .3s;-webkit-user-select:none;user-select:none}.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip input:disabled+.chip__label,.chip .chip__label_disabled{color:#fff!important;background-color:#c6c6c6!important}.chip input:checked+.chip__label{color:#fff;background-color:#0986e2}.chip input:checked+.chip__label:focus,.chip input:checked+.chip__label:hover{background-color:#3a9ee8}.chip input:checked+.chip__label:active{background-color:#0879cb}.chip input:not(:checked)+.chip__label{color:#0986e2}.chip_theme-white:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#fff}.chip_theme-white:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-white:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#fdfdfe}.chip_theme-white:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-grey:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#f4f6f8}.chip_theme-grey:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-grey:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#f6f8f9}.chip_theme-grey:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_type-label .chip__label{color:#fff;background-color:#0986e2;cursor:default}.chip__text{display:inline-block;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chip__counter{display:flex;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-right:-5px;margin-left:8px;overflow:hidden;color:#fff;font-weight:700;font-size:12px;background-color:#f05023;border-radius:9px}.chip__counter-value{margin:0 3px;line-height:16px}.chip__close{position:relative;display:block;width:24px;height:24px;margin:0 -9px 0 8px;padding:0;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .3s}.chip__close:not(:disabled):hover{opacity:.8}.chip__close:not(:disabled):active{opacity:.9}.chip__close evo-icon{z-index:1;display:block;width:100%;height:100%;fill:currentColor}:host{display:inline-block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }] }); }
|
|
2302
|
+
], usesInheritance: true, ngImport: i0, template: "<label class=\"chip\" [evoUiClass]=\"classes\">\n @switch (type) {\n @case (templateVariables?.chipTypes.checkbox) {\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n @case (templateVariables?.chipTypes.radio) {\n <input\n type=\"radio\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n }\n\n <div class=\"chip__label\" [evoUiClass]=\"{disabled: disabled}\">\n <span class=\"chip__text\">\n <ng-content />\n </span>\n\n @if ((type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined) {\n <div class=\"chip__counter\">\n <span class=\"chip__counter-value\">\n {{ counter }}\n </span>\n </div>\n }\n\n @if (closable) {\n <button\n type=\"button\"\n class=\"chip__close\"\n [disabled]=\"disabled\"\n [title]=\"closeTitle\"\n (click)=\"onCloseClick($event)\"\n >\n <evo-icon shape=\"decline\" />\n </button>\n }\n </div>\n</label>\n", styles: [".chip{position:relative;display:inline-flex;max-width:100%}.chip__label{display:flex;align-items:center;max-width:inherit;height:32px;margin:0;padding:3px 12px;overflow:hidden;color:#0986e2;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;background-color:#f4f6f8;border-radius:16px;cursor:pointer;transition:color .3s,background-color .3s;-webkit-user-select:none;user-select:none}.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip input:disabled+.chip__label,.chip .chip__label_disabled{color:#fff!important;background-color:#c6c6c6!important}.chip input:checked+.chip__label{color:#fff;background-color:#0986e2}.chip input:checked+.chip__label:focus,.chip input:checked+.chip__label:hover{background-color:#3a9ee8}.chip input:checked+.chip__label:active{background-color:#0879cb}.chip input:not(:checked)+.chip__label{color:#0986e2}.chip_theme-white:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#fff}.chip_theme-white:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-white:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#fdfdfe}.chip_theme-white:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-grey:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#f4f6f8}.chip_theme-grey:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-grey:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#f6f8f9}.chip_theme-grey:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-custom:not(.chip_type-label) input:not(:checked)+.chip__label{color:var(--evo-chip-color, #0986E2);background-color:var(--evo-chip-background-color, #F4F6F8)}.chip_theme-custom:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-custom:not(.chip_type-label) input:not(:checked):hover+.chip__label{color:var(--evo-chip-color-hover, #0986E2);background-color:var(--evo-chip-background-color-hover, #F6F8F9)}.chip_theme-custom:not(.chip_type-label) input:not(:checked):active+.chip__label{color:var(--evo-chip-color-active, #0986E2);background-color:var(--evo-chip-background-color-active, #DCDDDF)}.chip_theme-custom:not(.chip_type-label) input:checked+.chip__label{color:var(--evo-chip-checked-color, #FFFFFF)!important;background-color:var(--evo-chip-checked-background-color, #0986E2)!important}.chip_theme-custom:not(.chip_type-label) input:checked:focus+.chip__label,.chip_theme-custom:not(.chip_type-label) input:checked:hover+.chip__label{color:var(--evo-chip-color-hover, #0986E2)!important;background-color:var(--evo-chip-checked-background-color-hover, #3A9EE8)!important}.chip_theme-custom:not(.chip_type-label) input:checked:active+.chip__label{color:var(--evo-chip-color-active, #0986E2)!important;background-color:var(--evo-chip-checked-background-color-active, #0879CB)!important}.chip_type-label .chip__label{color:#fff;background-color:#0986e2;cursor:default}.chip__text{display:inline-block;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chip__counter{display:flex;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-right:-5px;margin-left:8px;overflow:hidden;color:#fff;font-weight:700;font-size:12px;background-color:#f05023;border-radius:9px}.chip__counter-value{margin:0 3px;line-height:16px}.chip__close{position:relative;display:block;width:24px;height:24px;margin:0 -9px 0 8px;padding:0;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .3s}.chip__close:not(:disabled):hover{opacity:.8}.chip__close:not(:disabled):active{opacity:.9}.chip__close evo-icon{z-index:1;display:block;width:100%;height:100%;fill:currentColor}:host{display:inline-block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }] }); }
|
|
2301
2303
|
}
|
|
2302
2304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoChipComponent, decorators: [{
|
|
2303
2305
|
type: Component,
|
|
@@ -2307,7 +2309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
|
|
|
2307
2309
|
useExisting: forwardRef(() => EvoChipComponent),
|
|
2308
2310
|
multi: true,
|
|
2309
2311
|
},
|
|
2310
|
-
], standalone: true, imports: [EvoUiClassDirective, FormsModule, EvoIconComponent], template: "<label class=\"chip\" [evoUiClass]=\"classes\">\n @switch (type) {\n @case (templateVariables?.chipTypes.checkbox) {\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n @case (templateVariables?.chipTypes.radio) {\n <input\n type=\"radio\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n }\n\n <div class=\"chip__label\" [evoUiClass]=\"{disabled: disabled}\">\n <span class=\"chip__text\">\n <ng-content />\n </span>\n\n @if ((type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined) {\n <div class=\"chip__counter\">\n <span class=\"chip__counter-value\">\n {{ counter }}\n </span>\n </div>\n }\n\n @if (closable) {\n <button\n type=\"button\"\n class=\"chip__close\"\n [disabled]=\"disabled\"\n [title]=\"closeTitle\"\n (click)=\"onCloseClick($event)\"\n >\n <evo-icon shape=\"decline\" />\n </button>\n }\n </div>\n</label>\n", styles: [".chip{position:relative;display:inline-flex;max-width:100%}.chip__label{display:flex;align-items:center;max-width:inherit;height:32px;margin:0;padding:3px 12px;overflow:hidden;color:#0986e2;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;background-color:#f4f6f8;border-radius:16px;cursor:pointer;transition:color .3s,background-color .3s;-webkit-user-select:none;user-select:none}.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip input:disabled+.chip__label,.chip .chip__label_disabled{color:#fff!important;background-color:#c6c6c6!important}.chip input:checked+.chip__label{color:#fff;background-color:#0986e2}.chip input:checked+.chip__label:focus,.chip input:checked+.chip__label:hover{background-color:#3a9ee8}.chip input:checked+.chip__label:active{background-color:#0879cb}.chip input:not(:checked)+.chip__label{color:#0986e2}.chip_theme-white:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#fff}.chip_theme-white:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-white:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#fdfdfe}.chip_theme-white:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-grey:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#f4f6f8}.chip_theme-grey:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-grey:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#f6f8f9}.chip_theme-grey:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_type-label .chip__label{color:#fff;background-color:#0986e2;cursor:default}.chip__text{display:inline-block;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chip__counter{display:flex;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-right:-5px;margin-left:8px;overflow:hidden;color:#fff;font-weight:700;font-size:12px;background-color:#f05023;border-radius:9px}.chip__counter-value{margin:0 3px;line-height:16px}.chip__close{position:relative;display:block;width:24px;height:24px;margin:0 -9px 0 8px;padding:0;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .3s}.chip__close:not(:disabled):hover{opacity:.8}.chip__close:not(:disabled):active{opacity:.9}.chip__close evo-icon{z-index:1;display:block;width:100%;height:100%;fill:currentColor}:host{display:inline-block;max-width:100%}\n"] }]
|
|
2312
|
+
], standalone: true, imports: [EvoUiClassDirective, FormsModule, EvoIconComponent], template: "<label class=\"chip\" [evoUiClass]=\"classes\">\n @switch (type) {\n @case (templateVariables?.chipTypes.checkbox) {\n <input\n type=\"checkbox\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n @case (templateVariables?.chipTypes.radio) {\n <input\n type=\"radio\"\n [disabled]=\"disabled\"\n [ngModel]=\"value\"\n [value]=\"inheritedValue\"\n [name]=\"name\"\n (ngModelChange)=\"onInputChange($event)\"\n />\n }\n }\n\n <div class=\"chip__label\" [evoUiClass]=\"{disabled: disabled}\">\n <span class=\"chip__text\">\n <ng-content />\n </span>\n\n @if ((type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined) {\n <div class=\"chip__counter\">\n <span class=\"chip__counter-value\">\n {{ counter }}\n </span>\n </div>\n }\n\n @if (closable) {\n <button\n type=\"button\"\n class=\"chip__close\"\n [disabled]=\"disabled\"\n [title]=\"closeTitle\"\n (click)=\"onCloseClick($event)\"\n >\n <evo-icon shape=\"decline\" />\n </button>\n }\n </div>\n</label>\n", styles: [".chip{position:relative;display:inline-flex;max-width:100%}.chip__label{display:flex;align-items:center;max-width:inherit;height:32px;margin:0;padding:3px 12px;overflow:hidden;color:#0986e2;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600;background-color:#f4f6f8;border-radius:16px;cursor:pointer;transition:color .3s,background-color .3s;-webkit-user-select:none;user-select:none}.chip input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chip input:disabled+.chip__label,.chip .chip__label_disabled{color:#fff!important;background-color:#c6c6c6!important}.chip input:checked+.chip__label{color:#fff;background-color:#0986e2}.chip input:checked+.chip__label:focus,.chip input:checked+.chip__label:hover{background-color:#3a9ee8}.chip input:checked+.chip__label:active{background-color:#0879cb}.chip input:not(:checked)+.chip__label{color:#0986e2}.chip_theme-white:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#fff}.chip_theme-white:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-white:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#fdfdfe}.chip_theme-white:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-grey:not(.chip_type-label) input:not(:checked)+.chip__label{background-color:#f4f6f8}.chip_theme-grey:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-grey:not(.chip_type-label) input:not(:checked):hover+.chip__label{background-color:#f6f8f9}.chip_theme-grey:not(.chip_type-label) input:not(:checked):active+.chip__label{background-color:#dcdddf}.chip_theme-custom:not(.chip_type-label) input:not(:checked)+.chip__label{color:var(--evo-chip-color, #0986E2);background-color:var(--evo-chip-background-color, #F4F6F8)}.chip_theme-custom:not(.chip_type-label) input:not(:checked):focus+.chip__label,.chip_theme-custom:not(.chip_type-label) input:not(:checked):hover+.chip__label{color:var(--evo-chip-color-hover, #0986E2);background-color:var(--evo-chip-background-color-hover, #F6F8F9)}.chip_theme-custom:not(.chip_type-label) input:not(:checked):active+.chip__label{color:var(--evo-chip-color-active, #0986E2);background-color:var(--evo-chip-background-color-active, #DCDDDF)}.chip_theme-custom:not(.chip_type-label) input:checked+.chip__label{color:var(--evo-chip-checked-color, #FFFFFF)!important;background-color:var(--evo-chip-checked-background-color, #0986E2)!important}.chip_theme-custom:not(.chip_type-label) input:checked:focus+.chip__label,.chip_theme-custom:not(.chip_type-label) input:checked:hover+.chip__label{color:var(--evo-chip-color-hover, #0986E2)!important;background-color:var(--evo-chip-checked-background-color-hover, #3A9EE8)!important}.chip_theme-custom:not(.chip_type-label) input:checked:active+.chip__label{color:var(--evo-chip-color-active, #0986E2)!important;background-color:var(--evo-chip-checked-background-color-active, #0879CB)!important}.chip_type-label .chip__label{color:#fff;background-color:#0986e2;cursor:default}.chip__text{display:inline-block;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chip__counter{display:flex;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-right:-5px;margin-left:8px;overflow:hidden;color:#fff;font-weight:700;font-size:12px;background-color:#f05023;border-radius:9px}.chip__counter-value{margin:0 3px;line-height:16px}.chip__close{position:relative;display:block;width:24px;height:24px;margin:0 -9px 0 8px;padding:0;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .3s}.chip__close:not(:disabled):hover{opacity:.8}.chip__close:not(:disabled):active{opacity:.9}.chip__close evo-icon{z-index:1;display:block;width:100%;height:100%;fill:currentColor}:host{display:inline-block;max-width:100%}\n"] }]
|
|
2311
2313
|
}], propDecorators: { type: [{
|
|
2312
2314
|
type: Input
|
|
2313
2315
|
}], theme: [{
|