@evotor-dev/ui-kit 6.5.0 → 6.6.0

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

@@ -0,0 +1,24 @@
+import { ElementRef } from '@angular/core';
+import { EvoButtonColor, EvoButtonSize, EvoButtonTheme } from '../../types';
+import * as i0 from "@angular/core";
+export declare class EvoButtonComponent {
+    private readonly elRef;
+    size: EvoButtonSize;
+    color: EvoButtonColor;
+    /**
+     * `theme` is a complex prop, that sets a number of inner parameters, described in `EvoButtonThemeParams`
+     */
+    set theme(value: EvoButtonTheme);
+    set disabled(value: boolean);
+    set loading(value: boolean);
+    private shape;
+    private _isOutline;
+    private _isDisabled;
+    private _isLoading;
+    constructor(elRef: ElementRef);
+    get isLoading(): boolean;
+    get buttonClasses(): string[];
+    get buttonStyles(): Record<string, string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EvoButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EvoButtonComponent, "button[evoButton], a[evoButton]", never, { "size": "size"; "color": "color"; "theme": "theme"; "disabled": "disabled"; "loading": "loading"; }, {}, never, ["*"]>;
+}

package/lib/components/evo-button/{evo-button.component.d.ts → components/evo-button-old/evo-button-old.component.d.ts}

@@ -1,9 +1,15 @@
 import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated use EvoButtonComponent
+ */
 export declare enum EvoButtonSizes {
     small = "small",
     large = "large"
 }
+/**
+ * @deprecated use EvoButtonColor with EvoButtonTheme
+ */
 export declare enum EvoButtonStyles {
     lined = "lined",
     darkblue = "darkblue",
@@ -13,7 +19,7 @@ export declare enum EvoButtonStyles {
     purple = "purple",
     red = "red"
 }
-export declare class EvoButtonComponent {
+export declare class EvoButtonOldComponent {
     private elRef;
     color: EvoButtonStyles;
     size: EvoButtonSizes;
@@ -28,6 +34,6 @@ export declare class EvoButtonComponent {
     get totalStyles(): {
         [styleKey: string]: any;
     };
-    static ɵfac: i0.ɵɵFactoryDeclaration<EvoButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EvoButtonComponent, "evo-button, button[evo-button]", never, { "color": "color"; "size": "size"; "disabled": "disabled"; "loading": "loading"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EvoButtonOldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EvoButtonOldComponent, "evo-button, button[evo-button]", never, { "color": "color"; "size": "size"; "disabled": "disabled"; "loading": "loading"; }, {}, never, ["*"]>;
 }

package/lib/components/evo-button/constants/evo-button-themes-map.d.ts

@@ -0,0 +1,2 @@
+import { EvoButtonTheme, EvoButtonThemeParams } from '../types';
+export declare const EVO_BUTTON_THEMES_MAP: Map<EvoButtonTheme, EvoButtonThemeParams>;

package/lib/components/evo-button/evo-button.module.d.ts

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./evo-button.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../../evo-ui-kit.module";
+import * as i1 from "./components/evo-button/evo-button.component";
+import * as i2 from "./components/evo-button-old/evo-button-old.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../../evo-ui-kit.module";
+import * as i5 from "../evo-loader/evo-loader.module";
 export declare class EvoButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EvoButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EvoButtonModule, [typeof i1.EvoButtonComponent], [typeof i2.CommonModule, typeof i3.EvoUiKitModule], [typeof i1.EvoButtonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EvoButtonModule, [typeof i1.EvoButtonComponent, typeof i2.EvoButtonOldComponent], [typeof i3.CommonModule, typeof i4.EvoUiKitModule, typeof i5.EvoLoaderModule], [typeof i1.EvoButtonComponent, typeof i2.EvoButtonOldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EvoButtonModule>;
 }

package/lib/components/evo-button/public-api.d.ts

@@ -1,2 +1,4 @@
 export * from './evo-button.module';
-export * from './evo-button.component';
+export * from './components/evo-button-old/evo-button-old.component';
+export * from './components/evo-button/evo-button.component';
+export * from './types';

package/lib/components/evo-button/types/evo-button-color.d.ts

@@ -0,0 +1,5 @@
+import { EvoColor } from '../../../common/types';
+/**
+ * Sync with $evo-button-colors SCSS variable
+ */
+export declare type EvoButtonColor = Extract<EvoColor, 'secondary' | 'success' | 'bonus' | 'link' | 'error' | 'white' | 'primary' | 'text'> | 'custom';

package/lib/components/evo-button/types/evo-button-shape.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Sync with $evo-button-shapes SCSS variable
+ */
+export declare type EvoButtonShape = 'rounded' | 'rectangle' | 'semi-rectangle';

package/lib/components/evo-button/types/evo-button-size.d.ts

@@ -0,0 +1,5 @@
+import { EvoSize } from '../../../common/types';
+/**
+ * Sync with $evo-button-sizes SCSS variable
+ */
+export declare type EvoButtonSize = Extract<EvoSize, 'small' | 'normal' | 'large'>;

package/lib/components/evo-button/types/evo-button-theme-params.d.ts

@@ -0,0 +1,5 @@
+import { EvoButtonShape } from './index';
+export declare type EvoButtonThemeParams = {
+    shape: EvoButtonShape;
+    isOutline: boolean;
+};

package/lib/components/evo-button/types/evo-button-theme.d.ts

@@ -0,0 +1 @@
+export declare type EvoButtonTheme = 'rounded-solid' | 'rounded-outline' | 'rectangle-outline' | 'semi-rectangle-solid';

package/lib/components/evo-button/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './evo-button-color';
+export * from './evo-button-size';
+export * from './evo-button-shape';
+export * from './evo-button-theme';
+export * from './evo-button-theme-params';

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

@@ -1,20 +1,20 @@
-import { OnInit } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { EvoIconsLibrary } from './classes/evo-icons-library';
 import * as i0 from "@angular/core";
-export declare class EvoIconComponent implements OnInit {
-    private sanitizer;
-    private iconsService;
-    shape: string;
+export declare class EvoIconComponent {
+    private readonly sanitizer;
+    private readonly iconsService;
+    set shape(shape: string);
+    get shape(): string;
     svgWidth: number;
     svgHeight: number;
     svgViewBox: string;
-    get viewBox(): string;
     content: SafeHtml;
+    get viewBox(): string;
     hostClass: boolean;
     get classes(): string[];
+    private _shape;
     constructor(sanitizer: DomSanitizer, iconsService: EvoIconsLibrary);
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EvoIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EvoIconComponent, "evo-icon", never, { "shape": "shape"; "svgWidth": "svgWidth"; "svgHeight": "svgHeight"; "svgViewBox": "svgViewBox"; }, {}, never, never>;
 }

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

@@ -1,6 +1,7 @@
 import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { EvoModalService, EvoModalState } from './evo-modal.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { EvoButtonColor, EvoButtonTheme } from '../evo-button';
 import * as i0 from "@angular/core";
 export declare enum EvoModalCloseTargets {
     BACKGROUND = "background",
@@ -9,14 +10,17 @@ export declare enum EvoModalCloseTargets {
     ESC = "escape"
 }
 export declare class EvoModalComponent implements OnInit, OnDestroy {
-    private modalService;
-    private elRef;
+    private readonly modalService;
+    private readonly elRef;
     get id(): string;
     set id(id: string);
     titleText: string;
     acceptText: string;
-    acceptButtonColor: string;
+    acceptButtonColor: EvoButtonColor;
+    acceptButtonTheme: EvoButtonTheme;
     declineText: string;
+    declineButtonColor: EvoButtonColor;
+    declineButtonTheme: EvoButtonTheme;
     asyncAccept: () => Observable<any>;
     modalState: EvoModalState;
     isAcceptLoading: boolean;
@@ -29,9 +33,9 @@ export declare class EvoModalComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     onBackgroundClick($event: any): void;
-    handleOnClose(agreement: boolean, closeTarget: EvoModalCloseTargets): import("rxjs").Subscription;
+    handleOnClose(agreement: boolean, closeTarget: EvoModalCloseTargets): Subscription;
     private subscribeModalEvents;
     private initKeyboardListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<EvoModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EvoModalComponent, "evo-modal", never, { "id": "id"; "titleText": "titleText"; "acceptText": "acceptText"; "acceptButtonColor": "acceptButtonColor"; "declineText": "declineText"; "asyncAccept": "asyncAccept"; }, {}, never, ["evo-icon", "*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EvoModalComponent, "evo-modal", never, { "id": "id"; "titleText": "titleText"; "acceptText": "acceptText"; "acceptButtonColor": "acceptButtonColor"; "acceptButtonTheme": "acceptButtonTheme"; "declineText": "declineText"; "declineButtonColor": "declineButtonColor"; "declineButtonTheme": "declineButtonTheme"; "asyncAccept": "asyncAccept"; }, {}, never, ["evo-icon", "*"]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evotor-dev/ui-kit",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "peerDependencies": {
     "@angular/common": ">=12.0.0 <13.0.0",
     "@angular/core": ">=12.0.0 <13.0.0",

package/styles/components/evo-button.scss

@@ -13,7 +13,7 @@ $dot-size: 10px;
     color: $color-white;
     font-weight: 500;
     font-size: 16px;
-    font-family: var(--font-secondary);
+    font-family: var(--evo-font-secondary);
     line-height: 1;
     white-space: nowrap;
     text-align: center;

package/styles/components/evo-chip.scss

@@ -19,9 +19,7 @@
         overflow: hidden;
         color: $color-link;
 
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 24px;
+        @include evo-text-paragraph(p4);
 
         background-color: $color-background-grey;
 

package/styles/components/evo-table.scss

@@ -1,11 +1,11 @@
-@import "../mixins";
+@import '../mixins';
 
 @mixin table {
     display: table;
     width: 100%;
 }
 
-@mixin table-row {
+@mixin table-row($hover: true) {
     display: table-row;
     padding: 16px;
 
@@ -13,14 +13,14 @@
         background-color: $color-background-grey;
     }
 
-
-    &:hover {
-        background-color: $color-highlight;
-    }
-
-    &_head {
+    @if $hover == true {
         &:hover {
-            background: none;
+            background-color: $color-highlight;
+        }
+        &_head {
+            &:hover {
+                background: none;
+            }
         }
     }
 }

package/styles/components/evo-title.scss

@@ -3,7 +3,7 @@
 .evo-title {
     color: $color-text;
     font-weight: 700;
-    font-family: var(--font-secondary);
+    font-family: var(--evo-font-secondary);
 
     &_h1 {
         @include h1;

package/styles/globals.scss

@@ -1,41 +1,47 @@
-@import "variables";
+@import 'variables';
 
 * {
     box-sizing: border-box;
 }
 
 body {
-    --font: 'Noto Sans', #{$font-fallback};
-    --font-secondary: #{$font-secondary};
+    --evo-font: #{$font};
+    --evo-font-secondary: #{$font-secondary};
 
     min-width: 320px;
     overflow-x: hidden;
     color: $color-text;
     font-weight: 400;
     font-size: 14px;
-    font-family: var(--font);
+    font-family: var(--evo-font);
     line-height: 1.4;
     background-color: $color-white;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 }
 
-input, button, select, textarea {
+input,
+button,
+select,
+textarea {
     font-size: inherit;
     font-family: inherit;
-    line-height: inherit
+    line-height: inherit;
 }
 
-a, button {
+a,
+button {
     outline: none !important;
 }
 
 a {
     color: $color-link;
     cursor: pointer !important;
-    transition: color .3s;
+    transition: color 0.3s;
 
-    &, &:hover, &:focus {
+    &,
+    &:hover,
+    &:focus {
         text-decoration: none;
     }
 }

package/styles/mixins/_evo-input-mixins.scss

@@ -0,0 +1,74 @@
+@import '../variables';
+
+/**
+ * size: normal | small
+ * theme: default | rounded
+ */
+@mixin evo-input($size: normal, $theme: default) {
+    --evo-input-height: 48px;
+    --evo-input-border-radius: 4px;
+    --evo-input-font-size: 16px;
+
+    @if ($size == small) {
+        @if ($theme == default) {
+            --evo-input-height: 32px;
+        } @else if ($theme == rounded) {
+            --evo-input-font-size: 14px;
+            --evo-input-height: 40px;
+        }
+    }
+
+    @if ($theme == rounded) {
+        --evo-input-border-radius: 256px;
+    }
+
+    display: flex;
+    align-items: center;
+    height: var(--evo-input-height);
+    color: $color-text;
+    font-weight: normal;
+    font-size: var(--evo-input-font-size);
+    font-family: var(--evo-font);
+    white-space: nowrap;
+    background-color: $color-white;
+    border: 1px solid $color-disabled;
+    border-radius: var(--evo-input-border-radius);
+    outline: none;
+    transition: color 0.3s, box-shadow 0.3s, background 0.3s, border 0.3s;
+}
+
+@mixin evo-input-focused {
+    border: solid 1px $color-secondary-lighter;
+}
+
+@mixin evo-input-disabled {
+    color: $color-disabled-text !important;
+    background-color: $color-background-grey-light !important;
+    border: 1px solid $color-disabled-light !important;
+    cursor: default;
+    pointer-events: none;
+}
+
+/**
+ * @deprecated
+ */
+@mixin evo-input-valid {
+}
+
+@mixin evo-input-invalid {
+    border-color: $color-error !important;
+}
+
+@mixin evo-input-states {
+    &_focused {
+        @include evo-input-focused;
+    }
+
+    &_disabled {
+        @include evo-input-disabled;
+    }
+
+    &_invalid {
+        @include evo-input-invalid;
+    }
+}

package/styles/{partials/typography/_typography-caption-mixin.scss → mixins/_evo-text-caption-mixin.scss}

@@ -1,13 +1,13 @@
 @use "sass:list";
 
-$evo-caption-styles: c1, c2, c3;
+$evo-text-caption-styles: c1, c2, c3;
 
-@mixin evo-caption($style) {
-    @if not list.index($evo-caption-styles, $style) {
-        @error "#{$style} is not a valid caption style. Use one of #{$evo-caption-styles}";
+@mixin evo-text-caption($style) {
+    @if not list.index($evo-text-caption-styles, $style) {
+        @error "#{$style} is not a valid caption style. Use one of #{$evo-text-caption-styles}";
     }
 
-    font-family: var(--font);
+    font-family: var(--evo-font);
     font-style: normal;
 
     @if $style == c1 {

package/styles/{partials/typography/_typography-field-typo-mixin.scss → mixins/_evo-text-field-mixin.scss}

@@ -2,12 +2,12 @@
 
 $evo-field-typo-styles: label, placeholder, placeholder-bold, hint, error;
 
-@mixin evo-field-typo($style) {
+@mixin evo-text-field($style) {
     @if not list.index($evo-field-typo-styles, $style) {
         @error "#{$style} is not a valid field typo style. Use one of #{$evo-field-typo-styles}";
     }
 
-    font-family: var(--font);
+    font-family: var(--evo-font);
     font-style: normal;
 
     @if $style == label {

package/styles/{partials/typography/_typography-header-mixin.scss → mixins/_evo-text-header-mixin.scss}

@@ -1,15 +1,15 @@
 @use "sass:list";
-@import "../../mixins";
-@import "./typography-header-mobile-mixin";
+@import 'media-mixins';
+@import 'evo-text-mobile-header-mixin';
 
-$evo-header-styles: h1, h2, h3, h4, h5;
+$evo-text-header-styles: h1, h2, h3, h4, h5;
 
-@mixin evo-header($style, $noMobile: false) {
-    @if not list.index($evo-header-styles, $style) {
-        @error "#{$style} is not a valid header style. Use one of #{$evo-header-styles}";
+@mixin evo-text-header($style, $autoMobile: true) {
+    @if not list.index($evo-text-header-styles, $style) {
+        @error "#{$style} is not a valid header style. Use one of #{$evo-text-header-styles}";
     }
 
-    font-family: var(--font-secondary);
+    font-family: var(--evo-font-secondary);
     font-style: normal;
     font-weight: 700;
 
@@ -17,45 +17,45 @@ $evo-header-styles: h1, h2, h3, h4, h5;
         font-size: 36px;
         line-height: 44px;
 
-        @if not $noMobile {
+        @if $autoMobile {
             @include media-mobile {
-                @include evo-header-mobile(h1-mobile);
+                @include evo-text-mobile-header(h1);
             }
         }
     } @else if $style == h2 {
         font-size: 30px;
         line-height: 38px;
 
-        @if not $noMobile {
+        @if $autoMobile {
             @include media-mobile {
-                @include evo-header-mobile(h2-mobile);
+                @include evo-text-mobile-header(h2);
             }
         }
     } @else if $style == h3 {
         font-size: 24px;
         line-height: 32px;
 
-        @if not $noMobile {
+        @if $autoMobile {
             @include media-mobile {
-                @include evo-header-mobile(h3-mobile);
+                @include evo-text-mobile-header(h3);
             }
         }
     } @else if $style == h4 {
         font-size: 18px;
         line-height: 26px;
 
-        @if not $noMobile {
+        @if $autoMobile {
             @include media-mobile {
-                @include evo-header-mobile(h4-mobile);
+                @include evo-text-mobile-header(h4);
             }
         }
     } @else if $style == h5 {
         font-size: 16px;
         line-height: 24px;
 
-        @if not $noMobile {
+        @if $autoMobile {
             @include media-mobile {
-                @include evo-header-mobile(h5-mobile);
+                @include evo-text-mobile-header(h5);
             }
         }
     }

package/styles/{partials/typography/_typography-header-mobile-mixin.scss → mixins/_evo-text-mobile-header-mixin.scss}

@@ -1,32 +1,32 @@
 @use "sass:list";
 
-$evo-header-mobile-styles: h1-mobile, h2-mobile, h3-mobile, h4-mobile, h5-mobile;
+$evo-text-mobile-header-styles: h1, h2, h3, h4, h5;
 
-@mixin evo-header-mobile($style) {
-    @if not list.index($evo-header-mobile-styles, $style) {
-        @error "#{$style} is not a valid header mobile style. Use one of #{$evo-header-mobile-styles}";
+@mixin evo-text-mobile-header($style) {
+    @if not list.index($evo-text-mobile-header-styles, $style) {
+        @error "#{$style} is not a valid header mobile style. Use one of #{$evo-text-mobile-header-styles}";
     }
 
-    font-family: var(--font-secondary);
+    font-family: var(--evo-font-secondary);
     font-style: normal;
 
-    @if $style == h1-mobile {
+    @if $style == h1 {
         font-weight: 700;
         font-size: 30px;
         line-height: 38px;
-    } @else if $style == h2-mobile {
+    } @else if $style == h2 {
         font-weight: 700;
         font-size: 24px;
         line-height: 32px;
-    } @else if $style == h3-mobile {
+    } @else if $style == h3 {
         font-weight: 700;
         font-size: 20px;
         line-height: 28px;
-    } @else if $style == h4-mobile {
+    } @else if $style == h4 {
         font-weight: 700;
         font-size: 16px;
         line-height: 24px;
-    } @else if $style == h5-mobile {
+    } @else if $style == h5 {
         font-weight: 700;
         font-size: 14px;
         line-height: 22px;

package/styles/{partials/typography/_typography-paragraph-mixin.scss → mixins/_evo-text-paragraph-mixin.scss}

@@ -1,14 +1,13 @@
 @use "sass:list";
-@import "../../variables";
 
-$evo-paragraph-styles: p1, p2, p3, p4, p5, tips;
+$evo-text-paragraph-styles: p1, p2, p3, p4, p5, tips;
 
-@mixin evo-paragraph($style) {
-    @if not list.index($evo-paragraph-styles, $style) {
-        @error "#{$style} is not a valid paragraph style. Use one of #{$evo-paragraph-styles}";
+@mixin evo-text-paragraph($style) {
+    @if not list.index($evo-text-paragraph-styles, $style) {
+        @error "#{$style} is not a valid paragraph style. Use one of #{$evo-text-paragraph-styles}";
     }
 
-    font-family: var(--font);
+    font-family: var(--evo-font);
     font-style: normal;
 
     @if $style == p1 {
@@ -31,11 +30,5 @@ $evo-paragraph-styles: p1, p2, p3, p4, p5, tips;
         font-size: 16px;
         line-height: 24px;
         font-weight: 600;
-    } @else if $style == tips {
-        font-size: 12px;
-        line-height: 18px;
-        font-weight: 400;
-        font-style: italic;
-        color: $color-text-grey;
     }
 }

package/styles/{partials/typography/_typography-subtitle-mixin.scss → mixins/_evo-text-subtitle-mixin.scss}

@@ -1,13 +1,13 @@
 @use "sass:list";
 
-$evo-subtitle-styles: s1, s2;
+$evo-text-subtitle-styles: s1, s2;
 
-@mixin evo-subtitle($style) {
-    @if not list.index($evo-subtitle-styles, $style) {
-        @error "#{$style} is not a valid caption style. Use one of #{$evo-subtitle-styles}";
+@mixin evo-text-subtitle($style) {
+    @if not list.index($evo-text-subtitle-styles, $style) {
+        @error "#{$style} is not a valid caption style. Use one of #{$evo-text-subtitle-styles}";
     }
 
-    font-family: var(--font);
+    font-family: var(--evo-font);
     font-style: normal;
     font-size: 18px;
     line-height: 26px;

package/styles/mixins/_evo-text-tips-mixin.scss

@@ -0,0 +1,9 @@
+@use "sass:list";
+
+@mixin evo-text-tips() {
+    font-family: var(--evo-font);
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 400;
+    font-style: italic;
+}