@evotor-dev/ui-kit 8.5.1 → 8.7.0

package/lib/components/evo-chip/evo-chip.component.d.ts

@@ -9,7 +9,8 @@ export declare enum EvoChipType {
 }
 export declare enum EvoChipTheme {
     grey = "grey",// default
-    white = "white"
+    white = "white",
+    custom = "custom"
 }
 export declare class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, OnInit, AfterViewInit {
     type: EvoChipType | string;

package/lib/components/evo-input/evo-input.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, Validator } from '@angular/forms';
 import { EvoBaseControl } from '../../common/evo-base-control';
 import * as i0 from "@angular/core";
@@ -31,7 +31,8 @@ export declare class EvoInputComponent extends EvoBaseControl implements Control
     unmask: boolean | 'typed';
     clearable: boolean;
     maskValidation: boolean;
-    blur: EventEmitter<any>;
+    readonly blur: import("@angular/core").OutputEmitterRef<Event>;
+    readonly onFocus: import("@angular/core").OutputEmitterRef<Event>;
     inputElement: ElementRef;
     tooltipElement: ElementRef;
     size: EvoInputSizes;
@@ -74,8 +75,8 @@ export declare class EvoInputComponent extends EvoBaseControl implements Control
     registerOnTouched(fn: any): void;
     setDisabledState(state: boolean): void;
     focus(): void;
-    onFocus(): void;
-    onBlur(): void;
+    onInputFocus(event: Event): void;
+    onInputBlur(event: Event): void;
     onTooltipClick(event: any): void;
     onClear(): void;
     hideTooltip(): void;
@@ -90,5 +91,5 @@ export declare class EvoInputComponent extends EvoBaseControl implements Control
         mask: boolean;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<EvoInputComponent, [null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EvoInputComponent, "evo-input", never, { "autoFocus": { "alias": "autoFocus"; "required": false; }; "dataCp": { "alias": "data-cp"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "inputDebounce": { "alias": "inputDebounce"; "required": false; }; "unmask": { "alias": "unmask"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "maskValidation": { "alias": "maskValidation"; "required": false; }; "setValue": { "alias": "value"; "required": false; }; "setSize": { "alias": "size"; "required": false; }; "setTheme": { "alias": "theme"; "required": false; }; }, { "blur": "blur"; }, never, ["[evoInputPrefixContent]", "[evoInputIcon]", "[tooltip]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EvoInputComponent, "evo-input", never, { "autoFocus": { "alias": "autoFocus"; "required": false; }; "dataCp": { "alias": "data-cp"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "inputDebounce": { "alias": "inputDebounce"; "required": false; }; "unmask": { "alias": "unmask"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "maskValidation": { "alias": "maskValidation"; "required": false; }; "setValue": { "alias": "value"; "required": false; }; "setSize": { "alias": "size"; "required": false; }; "setTheme": { "alias": "theme"; "required": false; }; }, { "blur": "blur"; "onFocus": "onFocus"; }, never, ["[evoInputPrefixContent]", "[evoInputIcon]", "[tooltip]"], true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evotor-dev/ui-kit",
-  "version": "8.5.1",
+  "version": "8.7.0",
   "homepage": "https://evotor.github.io/Evo-UI-Kit",
   "repository": {
     "type": "git",

package/styles/components/evo-chip.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 @import '../mixins.scss';
 
 .chip {
@@ -26,7 +26,9 @@
         border-radius: math.div($height, 2);
 
         cursor: pointer;
-        transition: color 0.3s, background-color 0.3s;
+        transition:
+            color 0.3s,
+            background-color 0.3s;
 
         user-select: none;
     }
@@ -97,6 +99,44 @@
         }
     }
 
+    &_theme-custom:not(&_type-label) {
+        input:not(:checked) {
+            & + #{$parent-selector}__label {
+                color: var(--evo-chip-color, $color-link);
+                background-color: var(--evo-chip-background-color, $color-background-grey);
+            }
+
+            &:focus + #{$parent-selector}__label,
+            &:hover + #{$parent-selector}__label {
+                color: var(--evo-chip-color-hover, $color-link);
+                background-color: var(--evo-chip-background-color-hover, $color-grey-hover);
+            }
+
+            &:active + #{$parent-selector}__label {
+                color: var(--evo-chip-color-active, $color-link);
+                background-color: var(--evo-chip-background-color-active, $color-grey-active);
+            }
+        }
+
+        input:checked {
+            & + #{$parent-selector}__label {
+                color: var(--evo-chip-checked-color, $color-white) !important;
+                background-color: var(--evo-chip-checked-background-color, $color-link) !important;
+            }
+
+            &:focus + #{$parent-selector}__label,
+            &:hover + #{$parent-selector}__label {
+                color: var(--evo-chip-color-hover, $color-link) !important;
+                background-color: var(--evo-chip-checked-background-color-hover, $color-link-hover) !important;
+            }
+
+            &:active + #{$parent-selector}__label {
+                color: var(--evo-chip-color-active, $color-link) !important;
+                background-color: var(--evo-chip-checked-background-color-active, $color-link-active) !important;
+            }
+        }
+    }
+
     &_type-label {
         #{$parent-selector}__label {
             color: $color-white;