@evotor-dev/ui-kit 6.4.0 → 6.5.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evotor-dev/ui-kit",
-  "version": "6.4.0",
+  "version": "6.5.1",
   "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: $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-title.scss

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

package/styles/globals.scss

@@ -1,36 +1,47 @@
+@import 'variables';
+
 * {
     box-sizing: border-box;
 }
 
 body {
+    --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: $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/main.scss

@@ -3,7 +3,12 @@
 @import 'variables.scss';
 @import 'mixins.scss';
 @import 'globals.scss';
-/*components*/
+
+/* partials*/
+@import './partials/fonts';
+@import './partials/typography';
+
+/* components*/
 @import './components/evo-grid.scss';
 @import './components/evo-alert.scss';
 @import './components/evo-button-loader.scss';

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/mixins/_evo-text-caption-mixin.scss

@@ -0,0 +1,26 @@
+@use "sass:list";
+
+$evo-text-caption-styles: c1, c2, c3;
+
+@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(--evo-font);
+    font-style: normal;
+
+    @if $style == c1 {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 400;
+    } @else if $style == c2 {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 600;
+    } @else if $style == c3 {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 700;
+    }
+}

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

@@ -0,0 +1,36 @@
+@use "sass:list";
+
+$evo-field-typo-styles: label, placeholder, placeholder-bold, hint, error;
+
+@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(--evo-font);
+    font-style: normal;
+
+    @if $style == label {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+    } @else if $style == placeholder {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+    } @else if $style == placeholder-bold {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
+    } @else if $style == hint {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+        font-style: italic;
+    } @else if $style == error {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+        font-style: italic;
+    }
+}

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

@@ -0,0 +1,62 @@
+@use "sass:list";
+@import 'media-mixins';
+@import 'evo-text-mobile-header-mixin';
+
+$evo-text-header-styles: h1, h2, h3, h4, h5;
+
+@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(--evo-font-secondary);
+    font-style: normal;
+    font-weight: 700;
+
+    @if $style == h1 {
+        font-size: 36px;
+        line-height: 44px;
+
+        @if $autoMobile {
+            @include media-mobile {
+                @include evo-text-mobile-header(h1);
+            }
+        }
+    } @else if $style == h2 {
+        font-size: 30px;
+        line-height: 38px;
+
+        @if $autoMobile {
+            @include media-mobile {
+                @include evo-text-mobile-header(h2);
+            }
+        }
+    } @else if $style == h3 {
+        font-size: 24px;
+        line-height: 32px;
+
+        @if $autoMobile {
+            @include media-mobile {
+                @include evo-text-mobile-header(h3);
+            }
+        }
+    } @else if $style == h4 {
+        font-size: 18px;
+        line-height: 26px;
+
+        @if $autoMobile {
+            @include media-mobile {
+                @include evo-text-mobile-header(h4);
+            }
+        }
+    } @else if $style == h5 {
+        font-size: 16px;
+        line-height: 24px;
+
+        @if $autoMobile {
+            @include media-mobile {
+                @include evo-text-mobile-header(h5);
+            }
+        }
+    }
+}

package/styles/mixins/_evo-text-mobile-header-mixin.scss

@@ -0,0 +1,34 @@
+@use "sass:list";
+
+$evo-text-mobile-header-styles: h1, h2, h3, h4, h5;
+
+@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(--evo-font-secondary);
+    font-style: normal;
+
+    @if $style == h1 {
+        font-weight: 700;
+        font-size: 30px;
+        line-height: 38px;
+    } @else if $style == h2 {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 32px;
+    } @else if $style == h3 {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 28px;
+    } @else if $style == h4 {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 24px;
+    } @else if $style == h5 {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 22px;
+    }
+}

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

@@ -0,0 +1,34 @@
+@use "sass:list";
+
+$evo-text-paragraph-styles: p1, p2, p3, p4, p5, tips;
+
+@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(--evo-font);
+    font-style: normal;
+
+    @if $style == p1 {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+    } @else if $style == p2 {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 600;
+    } @else if $style == p3 {
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 400;
+    } @else if $style == p4 {
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 600;
+    } @else if $style == p5 {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+}

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

@@ -0,0 +1,20 @@
+@use "sass:list";
+
+$evo-text-subtitle-styles: s1, s2;
+
+@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(--evo-font);
+    font-style: normal;
+    font-size: 18px;
+    line-height: 26px;
+
+    @if $style == s1 {
+        font-weight: 400;
+    } @else if $style == s2 {
+        font-weight: 600;
+    }
+}

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;
+}

package/styles/mixins/_media-mixins.scss

@@ -0,0 +1,38 @@
+@import '../variables';
+
+@mixin media-mobile {
+    @media (max-width: #{$media-tablet - 1}) {
+        @content;
+    }
+}
+
+/* media mixins - mobile first*/
+@mixin media-tablet {
+    @media (min-width: #{$media-tablet}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-s {
+    @media (min-width: #{$media-desktop-s}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-m {
+    @media (min-width: #{$media-desktop-m}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-l {
+    @media (min-width: #{$media-desktop-l}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-xl {
+    @media (min-width: #{$media-desktop-xl}) {
+        @content;
+    }
+}

package/styles/mixins.scss

@@ -1,4 +1,13 @@
 @import 'variables.scss';
+@import './mixins/media-mixins';
+@import './mixins/evo-input-mixins';
+@import 'mixins/evo-text-caption-mixin';
+@import 'mixins/evo-text-header-mixin';
+@import 'mixins/evo-text-mobile-header-mixin';
+@import 'mixins/evo-text-paragraph-mixin';
+@import 'mixins/evo-text-field-mixin';
+@import 'mixins/evo-text-subtitle-mixin';
+@import 'mixins/evo-text-tips-mixin';
 
 /* @include clearfix();*/
 @mixin clearfix() {
@@ -34,176 +43,51 @@
     }
 }
 
-@mixin media-mobile {
-    @media (max-width: #{$media-tablet - 1}) {
-        @content;
-    }
-}
-
-/* media mixins - mobile first*/
-@mixin media-tablet {
-    @media (min-width: #{$media-tablet}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-s {
-    @media (min-width: #{$media-desktop-s}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-m {
-    @media (min-width: #{$media-desktop-m}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-l {
-    @media (min-width: #{$media-desktop-l}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-xl {
-    @media (min-width: #{$media-desktop-xl}) {
-        @content;
-    }
-}
-
-/*title mixins*/
+/* title mixins*/
+/* @deprecated use evo-text-* mixins*/
 @mixin title {
-    color: #333F48;
+    color: #333f48;
     font-weight: 700;
-    font-family: $font-secondary;
+    font-family: var(--evo-font-secondary);
 }
 
+/* @deprecated use evo-text-* mixins*/
 @mixin h1 {
-    font-size: 30px;
-    line-height: 38px;
-
-    @include media-desktop-s {
-        font-size: 36px;
-        line-height: 44px;
-    }
+    @include evo-text-header(h1);
 }
 
+/* @deprecated use evo-text-* mixins*/
 @mixin h2 {
-    font-size: 24px;
-    line-height: 32px;
-
-    @include media-desktop-s {
-        font-size: 30px;
-        line-height: 38px;
-    }
+    @include evo-text-header(h2);
 }
 
+/* @deprecated use evo-text-* mixins*/
 @mixin h3 {
-    font-size: 18px;
-    line-height: 26px;
-
-    @include media-desktop-s {
-        font-size: 24px;
-        line-height: 32px;
-    }
+    @include evo-text-header(h3);
 }
 
+/* @deprecated use evo-text-* mixins*/
 @mixin h4 {
-    font-size: 14px;
-    line-height: 22px;
-
-    @include media-desktop-s {
-        font-size: 18px;
-        line-height: 26px;
-    }
+    @include evo-text-header(h4);
 }
 
-
 /**
- * @deprecated
+ * @deprecated use evo-input-* mixins
  */
 @mixin input {
     @include evo-input(normal, default);
 }
 
 /**
- * size: normal | small
- * theme: default | rounded
+ * @deprecated use evo-input-states mixin
  */
-@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: $font;
-    white-space: nowrap;
-    background-color: $color-white;
-    border: 1px solid $color-disabled;
-    border-radius: var(--evo-input-border-radius);
-    outline: none;
-    transition: color .3s, box-shadow .3s, background .3s, border .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-control-states {
-    $self: &;
-
-    &_focused {
-        @include evo-input-focused;
-    }
-
-    &_disabled {
-        @include evo-input-disabled;
-    }
-
-    &_invalid {
-        @include evo-input-invalid;
-    }
+    @include evo-input-states();
 }
 
 @mixin hide-scroll {
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
 
     &::-webkit-scrollbar {
         display: none;

package/styles/partials/_fonts.scss

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');