@tetacom/ng-components 1.0.34 → 1.0.35

package/locale/en.d.ts

@@ -0,0 +1,2 @@
+import { TetaLocalisation } from './teta-localisation';
+export declare const enLocale: TetaLocalisation;

package/locale/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './ru';
+export * from './en';
+export * from './teta-config.service';
+export * from './teta-localisation';

package/locale/ru.d.ts

@@ -0,0 +1,2 @@
+import { TetaLocalisation } from './teta-localisation';
+export declare const ruLocale: TetaLocalisation;

package/locale/teta-config.service.d.ts

@@ -0,0 +1,11 @@
+import { TetaLocalisation } from './teta-localisation';
+import * as i0 from "@angular/core";
+export declare class TetaConfigService {
+    private defaultLocale;
+    private locale$;
+    locale: import("rxjs").Observable<TetaLocalisation>;
+    constructor();
+    setLocale(newLocale: TetaLocalisation): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TetaConfigService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TetaConfigService>;
+}

package/locale/teta-localisation.d.ts

@@ -0,0 +1,56 @@
+export interface TetaLocalisation {
+    apply: string;
+    cancel: string;
+    clear: string;
+    pin: string;
+    unpin: string;
+    sortAsc: string;
+    sortDesc: string;
+    clearSort: string;
+    clearAllSort: string;
+    clearFilter: string;
+    clearAllFilters: string;
+    autosizeColumn: string;
+    autosizeAll: string;
+    resetColumnsSize: string;
+    from: string;
+    to: string;
+    all: string;
+    min: string;
+    max: string;
+    sum: string;
+    avg: string;
+    search: string;
+    months: [
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string
+    ];
+    days: [
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string
+    ];
+    daysShort: [
+        string,
+        string,
+        string,
+        string,
+        string,
+        string,
+        string
+    ];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetacom/ng-components",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "private": false,
   "peerDependencies": {
     "@angular/common": "^13.0.0",

package/public-api.d.ts

@@ -18,3 +18,4 @@ export * from './common/public-api';
  * Util
  */
 export * from './util/public-api';
+export * from './locale/public-api';

package/style/border.scss

@@ -10,7 +10,7 @@
   }
   @for $radius from 0 through 12 {
     &-radius-#{$radius} {
-      border-radius: 1px * $radius;
+      border-radius: 1px * $radius!important;
     }
   }
 }

package/style/button.scss

@@ -6,14 +6,17 @@
   display: inline-flex;
   grid-gap: 4px;
   align-items: center;
-  height: 24px;
-  padding: 0 8px;
+  height: 28px;
+  padding: 0 12px;
   border: 0;
-  border-radius: 2px;
+  border-radius: 4px;
   color: getColorVar('white', '50');
   fill: getColorVar('white', '50');
   @include getFont($fonts, 'button-2');
   transition: background 0.4s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:hover:not([disabled]) {
     cursor: pointer;
@@ -25,9 +28,10 @@
   }
 
   &-square {
-    padding: 4px;
-    width: 24px;
+    //padding: 4px;
+    width: 28px;
     flex-shrink: 0;
+    align-items: center;
     justify-content: center;
   }
 

package/style/checkbox.scss

@@ -3,16 +3,24 @@
 .checkbox {
   display: inline-flex;
   align-items: center;
+  grid-gap: 8px;
 
   &__tick {
-    border: solid 1px getColorVar('text', '30');
-    border-radius: 1px;
+    background: getColorVar('background', '50');
+    border: solid 1px getColorVar('text', '20');
+    border-radius: 2px;
     height: 14px;
     width: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15) inset;
+    &_active {
+      border: solid 0;
+      border-radius: 2px;
+      background: getColorVar('primary', '50');
+      fill: getColorVar('white', '50');
+    }
   }
 
   &:hover {

package/style/datepicker.scss

@@ -5,6 +5,7 @@
 .datepicker {
   display: inline-flex;
   width: 150px;
+  min-width: 0;
 
   &-wide {
     width: 170px;
@@ -14,14 +15,15 @@
     display: inline-flex;
     flex-grow: 1;
     align-items: center;
-    height: 24px;
+    height: 28px;
     border: solid 1px getColorVar('text', '20');
     background: getColorVar('background', '50');
     color: getColorVar('text', '90');
     fill: getColorVar('text', '90');
-    border-radius: 2px;
-    padding: 0 4px;
+    border-radius: 4px;
+    padding: 0 8px;
     transition: border-color 0.4s;
+    min-width: 0;
 
     &_disabled {
       background-color: getColorVar('text', 5);
@@ -47,10 +49,10 @@
     border-color: getColorVar('primary', '50');
   }
 
-  &-body {
-    @include shadow(2);
-    background-color: getColorVar('background', '50');
-  }
+  //&-body {
+  //  @include shadow(2);
+  //  background-color: getColorVar('background', '50');
+  //}
 
   &-content {
     width: 224px;

package/style/dropdown.scss

@@ -2,13 +2,23 @@
 @import "util/shadow-util";
 
 .dropdown {
-  border-radius: 2px;
+  border-radius: 4px;
   border: solid 1px getColorVar('text', '5');
   position: fixed;
   display: flex;
   z-index: 1050;
-  @include shadow(1);
+  @include shadow(2);
+  background: getColorVar('background', '50');
   animation: fadeInFromNone 0.5s ease-out;
+
+  &-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: transparent;
+  }
 }
 
 @keyframes fadeInFromNone {

package/style/input.scss

@@ -4,7 +4,7 @@
 .form-container {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: 16px;
 }
 
 .form-row {
@@ -29,9 +29,9 @@
 }
 
 .text-field, .input, .textarea {
-  padding: 4px;
+  padding: 6px 8px;
   border: solid 1px getColorVar('text', '20');
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: getColorVar('background', '50');
   color: getColorVar('text', 90);
   @include getFont($fonts, 'body-3');
@@ -95,7 +95,7 @@
 }
 
 .text-field, .input {
-  height: 24px;
+  height: 28px;
 }
 
 .text-field {
@@ -144,7 +144,7 @@
 }
 
 .form-group-title {
-  height: 24px;
+  height: 28px;
   display: flex;
   align-items: center;
   grid-gap: 8px;
@@ -152,6 +152,7 @@
 
   &-text {
     flex-shrink: 0;
+    text-transform: uppercase;
   }
 
   &-line {

package/style/list.scss

@@ -12,7 +12,7 @@
   position: relative;
 
   &-item {
-    min-height: 24px;
+    min-height: 28px;
     display: inline-flex;
     align-items: center;
     padding: 0 12px;

package/style/presets/color-presets.scss

@@ -1,68 +1,68 @@
 $themes: (
   'default': (
     'text': (
-      '90': rgba(57,65,71,1),
-      '80': rgba(76,87,94,1),
-      '70': rgba(93,106,115,1),
-      '60': rgba(111,127,137,1),
-      '50': rgba(125,143,154,1),
-      '40': rgba(145,160,170,1),
-      '30': rgba(165,178,187,1),
-      '20': rgba(191,201,207,1),
-      '10': rgba(215,222,227,1),
-      '5': rgba(225,231,236,1),
+      '90': #21242a,
+      '80': #373a40,
+      '70': #4d5056,
+      '60': #64666c,
+      '50': #7a7c82,
+      '40': #919399,
+      '30': #a7a9af,
+      '20': #bdc0c5,
+      '10': #d2d5da,
+      '5': #e9ecf1,
     ),
     'primary': (
-      '90': rgba(0,49,86,1),
-      '80': rgba(0,68,120,1),
-      '70': rgba(7,91,154,1),
-      '60': rgba(20,115,188,1),
-      '50': rgba(37,142,222,1),
-      '40': rgba(58,169,255,1),
-      '30': rgba(102,189,255,1),
-      '20': rgba(146,208,255,1),
-      '10': rgba(191,227,255,1),
-      '5': rgba(235,246,255,1),
+      '90': #15367d,
+      '80': #1a449d,
+      '70': #1f51bd,
+      '60': #245fdd,
+      '50': #286cfd,
+      '40': #5086fd,
+      '30': #77a0fe,
+      '20': #9fbbfe,
+      '10': #c6d7ff,
+      '5': #eef3ff,
     ),
     'red': (
-      '90': rgba(168,46,38,1),
-      '80': rgba(183,56,49,1),
-      '70': rgba(194,63,56,1),
-      '60': rgba(212,72,62,1),
-      '50': rgba(226,82,65,1),
-      '40': rgba(222,94,86,1),
-      '30': rgba(215,121,118,1),
-      '20': rgba(227,158,156,1),
-      '10': rgba(247,207,211,1),
-      '5': rgba(252,236,238,1),
+      '90': #a82e26,
+      '80': #b73831,
+      '70': #c23f38,
+      '60': #d4483e,
+      '50': #e25241,
+      '40': #de5e56,
+      '30': #d77976,
+      '20': #e39e9c,
+      '10': #f7cfd3,
+      '5': #fcecee,
     ),
     'green': (
-      '90': rgba(40,95,27,1),
-      '80': rgba(55,126,48,1),
-      '70': rgba(66,142,59,1),
-      '60': rgba(78,160,70,1),
-      '50': rgba(89,174,80,1),
-      '40': rgba(111,187,105,1),
-      '30': rgba(136,198,131,1),
-      '20': rgba(169,214,166,1),
-      '10': rgba(203,230,201,1),
-      '5': rgba(233,245,233,1),
+      '90': #285f1b,
+      '80': #377e30,
+      '70': #428e3b,
+      '60': #4ea046,
+      '50': #59ae50,
+      '40': #6fbb69,
+      '30': #88c683,
+      '20': #a9d6a6,
+      '10': #cbe6c9,
+      '5': #e9f5e9,
     ),
     'yellow': (
-      '90': rgba(238,104,0,1),
-      '80': rgba(238,136,0,1),
-      '70': rgba(238,152,0,1),
-      '60': rgba(238,171,0,1),
-      '50': rgba(237,184,0,1),
-      '40': rgba(239,194,27,1),
-      '30': rgba(241,206,72,1),
-      '20': rgba(245,219,126,1),
-      '10': rgba(249,233,177,1),
-      '5': rgba(252,247,225,1),
+      '90': #ee6800,
+      '80': #ee8800,
+      '70': #ee9800,
+      '60': #eeab00,
+      '50': #edb800,
+      '40': #efc21b,
+      '30': #f1ce48,
+      '20': #f5db7e,
+      '10': #f9e9b1,
+      '5': #fcf7e1,
     ),
     'background': (
-      '50': rgba(255,255,255,1),
-      '0': rgba(247,248,251,1),
+      '50': #ffffff,
+      '0': #f4f5f7,
     ),
     'white': (
       '50': rgba(255,255,255,1)
@@ -73,16 +73,16 @@ $themes: (
   ),
   'dark': (
     'primary': (
-      '90': rgba(0,49,86,1),
-      '80': rgba(0,68,120,1),
-      '70': rgba(7,91,154,1),
-      '60': rgba(20,115,188,1),
-      '50': rgba(37,142,222,1),
-      '40': rgba(58,169,255,1),
-      '30': rgba(102,189,255,1),
-      '20': rgba(146,208,255,1),
-      '10': rgba(191,227,255,1),
-      '5': rgba(235,246,255,1),
+      '90': #eef3ff,
+      '80': #c6d7ff,
+      '70': #9fbbfe,
+      '60': #77a0fe,
+      '50': #5086fd,
+      '40': #286cfd,
+      '30': #245fdd,
+      '20': #1f51bd,
+      '10': #1a449d,
+      '5': #15367d,
     ),
     'text': (
       '90': rgba(239,239,241,1),

package/style/presets/font-presets.scss

@@ -2,131 +2,148 @@ $fonts: (
   h-1: (
     font-size:92px,
     font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
-    font-weight: 300,
-    letter-spacing: 0.15px
+    letter-spacing:0.15px,
+    text-decoration:none,
   ),
   h-2: (
     font-size:60px,
     font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
-    font-weight: 300,
-    letter-spacing: 0.15px
+    letter-spacing:0.15px,
+    text-decoration:none,
   ),
   h-3: (
     font-size:48px,
     font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
-    line-height:60px,
-    font-weight: 400,
-    letter-spacing: 0.15px
+    letter-spacing:0.15px,
+    text-decoration:none,
   ),
   h-4: (
     font-size:35px,
     font-family:"Open Sans",
-    font-weight: 400,
+    font-weight:600,
     font-style:normal,
     line-height:44px,
-    letter-spacing: 0.15px
+    letter-spacing:0.15px,
+    text-decoration:none,
   ),
   h-5: (
     font-size:28px,
     font-family:"Open Sans",
-    line-height:36px,
-    font-weight: 600,
-    letter-spacing: 0.15px
+    font-weight:600,
+    font-style:normal,
+    letter-spacing:0.15px,
+    text-decoration:none,
   ),
   h-6: (
     font-size:20px,
     font-family:"Open Sans",
-    line-height:28px,
-    font-weight: 600,
-    letter-spacing: 0.15px
+    font-weight:600,
+    font-style:normal,
+    letter-spacing:0.15px,
+    text-decoration:none,
   ),
   title-1: (
-    font-size:15px,
+    font-size:16px,
     font-family:"Open Sans",
+    font-weight:600,
+    font-style:normal,
     line-height:24px,
-    font-weight: 600,
-    letter-spacing: 0.15px
+    letter-spacing:0.0015em,
+    text-decoration:none,
   ),
   title-2: (
-    font-size:13px,
+    font-size:14px,
     font-family:"Open Sans",
+    font-weight:600,
+    font-style:normal,
     line-height:16px,
-    font-weight: 600,
+    text-decoration:none,
   ),
   title-3: (
-    font-size:11px,
+    font-size:12px,
     font-family:"Open Sans",
+    font-weight:600,
+    font-style:normal,
     line-height:16px,
-    font-weight: 600,
+    text-decoration:none,
   ),
   body-1: (
-    font-size:15px,
+    font-size:16px,
     font-family:"Open Sans",
+    font-weight:normal,
     font-style:normal,
     line-height:24px,
-    font-weight: 400,
+    text-decoration:none,
   ),
   body-2: (
-    font-size:13px,
+    font-size:14px,
     font-family:"Open Sans",
+    font-weight:normal,
     font-style:normal,
-    line-height:20px,
-    font-weight: 400,
+    line-height:16px,
+    text-decoration:none,
   ),
   body-3: (
-    font-size:11px,
+    font-size:12px,
     font-family:"Open Sans",
+    font-weight:normal,
     font-style:normal,
     line-height:16px,
-    font-weight: 400,
+    text-decoration:none,
   ),
   button-1: (
     font-size:13px,
     font-family:"Open Sans",
+    font-weight:600,
+    font-style:normal,
     line-height:20px,
-    font-weight: 600,
+    text-decoration:none,
   ),
   button-2: (
     font-size:11px,
     font-family:"Open Sans",
+    font-weight:600,
+    font-style:normal,
     line-height:16px,
-    font-weight: 600,
+    text-decoration:none,
   ),
   button-3: (
     font-size:10px,
     font-family:"Open Sans",
-    line-height:14px,
-    font-weight: 600,
-  ),
-  caption: (
-    font-size:10px,
-    font-family:"Open Sans",
+    font-weight:600,
     font-style:normal,
     line-height:14px,
-    font-weight: 400,
+    text-decoration:none,
   ),
-  error-message: (
+  caption: (
     font-size:10px,
     font-family:"Open Sans",
+    font-weight:normal,
     font-style:normal,
     line-height:12px,
-    font-weight: 400,
+    text-decoration:none,
   ),
   table-header: (
     font-size:11px,
     font-family:"Open Sans",
-    line-height:16px,
     font-weight: 600,
+    font-style:normal,
+    line-height:12px,
+    text-decoration:none,
   ),
   overline: (
-    text-transform: uppercase,
     font-size:10px,
     font-family:"Open Sans",
+    font-weight:600,
+    font-style:normal,
     line-height:12px,
-    font-weight: 600,
-    letter-spacing: 1.5px
+    letter-spacing:1.5px,
+    text-decoration:none,
   )
-);
+)

package/style/presets/shadow-presets.scss

@@ -1,14 +1,14 @@
 $shadows: (
   'default': (
-    '1': 0px 4px 6px rgba(39, 39, 39, 0.26),
-    '2': 0px 6px 12px rgba(39, 39, 39, 0.26),
+    '1': 0px 1px 0px #DAE0EB,
+    '2': 0px 6px 6px 0px rgba(39, 41, 44, 0.12),
     '3': 0px 8px 16px rgba(39, 39, 39, 0.26),
     '4': 0px 12px 24px rgba(39, 39, 39, 0.26),
     '5': 0px 16px 32px rgba(39, 39, 39, 0.26),
   ),
   'dark': (
     '1': 0px 4px 6px rgba(0, 0, 0, 0.4),
-    '2': 0px 6px 12px rgba(0, 0, 0, 0.4),
+    '2': 0px 6px 6px 0px rgba(39, 41, 44, 0.12),
     '3': 0px 8px 16px rgba(0, 0, 0, 0.4),
     '4': 0px 12px 24px rgba(0, 0, 0, 0.4),
     '5': 0px 16px 32px rgba(0, 0, 0, 0.4),