@tetacom/ng-components 1.0.35 → 1.0.38

package/observable/public-api.d.ts

@@ -0,0 +1 @@
+export * from './zoneObservable';

package/observable/zoneObservable.d.ts

@@ -0,0 +1,5 @@
+import { NgZone } from '@angular/core';
+import { MonoTypeOperatorFunction } from 'rxjs';
+export declare function tetaZoneFull<T>(ngZone: NgZone): MonoTypeOperatorFunction<T>;
+export declare function tetaZoneFree<T>(ngZone: NgZone): MonoTypeOperatorFunction<T>;
+export declare function tetaZoneOptimized<T>(ngZone: NgZone): MonoTypeOperatorFunction<T>;

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@tetacom/ng-components",
-  "version": "1.0.35",
+  "version": "1.0.38",
   "private": false,
   "peerDependencies": {
     "@angular/common": "^13.0.0",
-    "@angular/core": "^13.0.0"
+    "@angular/core": "^13.0.0",
+    "d3": "^7.1.1",
+    "@ngneat/transloco": "^3.1.0",
+    "object-hash": "^2.2.0",
+    "three": "^0.139.2"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

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

package/style/button.scss

@@ -28,7 +28,6 @@
   }
 
   &-square {
-    //padding: 4px;
     width: 28px;
     flex-shrink: 0;
     align-items: center;
@@ -36,6 +35,7 @@
   }
 
   &[disabled] {
+
     filter: grayscale(1);
     opacity: 0.3;
   }

package/style/input.scss

@@ -4,7 +4,7 @@
 .form-container {
   display: flex;
   flex-direction: column;
-  grid-gap: 16px;
+  grid-gap: 20px;
 }
 
 .form-row {

package/style/layout.scss

@@ -74,7 +74,35 @@ body {
 }
 
 .gap {
-  grid-gap: 8px
+  grid-gap: 8px !important;
+}
+
+.gap-4 {
+  grid-gap: 4px !important;
+}
+
+.gap-8 {
+  grid-gap: 8px !important;
+}
+
+.gap-12 {
+  grid-gap: 12px !important;
+}
+
+.gap-16 {
+  grid-gap: 16px !important;
+}
+
+.gap-20 {
+  grid-gap: 20px !important;
+}
+
+.gap-24 {
+  grid-gap: 24px !important;
+}
+
+.gap-40 {
+  grid-gap: 40px !important;
 }
 
 .grid {
@@ -103,7 +131,7 @@ body {
 
 .content-block {
   border: solid 0;
-  border-radius: 2px;
+  border-radius: 4px;
   overflow: hidden;
   background: getColorVar('background', 50);
 }

package/style/list.scss

@@ -2,10 +2,10 @@
 @import "util/font-util.scss";
 
 .list {
-  padding: 4px 0;
+  padding: 8px 0;
   display: inline-flex;
   flex-direction: column;
-  border-radius: 2px;
+  border-radius: 4px;
   color: getColorVar('text', '90');
   background-color: getColorVar('background', '50');
   @include getFont($fonts, 'body-3');
@@ -26,6 +26,11 @@
       padding: 0 16px;
     }
 
+    &_disabled {
+      color: getColorVar('text', '20');
+      pointer-events: none;
+    }
+
     &_interactive {
       background-color: transparent;
       transition: background 0.4s;
@@ -48,8 +53,8 @@
   &-divider {
     height: 1px;
     flex-shrink: 0;
-    margin: 4px 0;
-    background-color: getColorVar('text', '5');
+    margin: 8px 0;
+    background-color: getColorVar('text', '10');
   }
 
   &-title {

package/style/modal.scss

@@ -21,6 +21,8 @@
   &__container {
     @include shadow(5);
     background-color: getColorVar('background', '50');
+    border: solid 0;
+    border-radius: 4px;
 
     &_resize {
       resize: both;

package/style/presets/color-presets.scss

@@ -1,100 +1,100 @@
 $themes: (
   'default': (
     'text': (
-      '90': #21242a,
-      '80': #373a40,
-      '70': #4d5056,
-      '60': #64666c,
-      '50': #7a7c82,
-      '40': #919399,
-      '30': #a7a9af,
-      '20': #bdc0c5,
-      '10': #d2d5da,
-      '5': #e9ecf1,
+      '90': rgba(33, 36, 42),
+      '80': rgba(55, 58, 64),
+      '70': rgba(77, 80, 86),
+      '60': rgba(105, 107, 113),
+      '50': rgba(140, 142, 148),
+      '40': rgba(173, 175, 181),
+      '30': rgba(204, 206, 213),
+      '20': rgba(221, 223, 230),
+      '10': rgba(230, 232, 239),
+      '5': rgba(232, 234, 241),
     ),
     'primary': (
-      '90': #15367d,
-      '80': #1a449d,
-      '70': #1f51bd,
-      '60': #245fdd,
-      '50': #286cfd,
-      '40': #5086fd,
-      '30': #77a0fe,
-      '20': #9fbbfe,
-      '10': #c6d7ff,
-      '5': #eef3ff,
+      '90': rgba(21, 54, 125),
+      '80': rgba(26, 68, 157),
+      '70': rgba(31, 81, 189),
+      '60': rgba(36, 95, 221),
+      '50': rgba(40, 108, 253),
+      '40': rgba(80, 134, 253),
+      '30': rgba(119, 160, 254),
+      '20': rgba(159, 187, 254),
+      '10': rgba(198, 215, 255),
+      '5': rgba(238, 243, 255),
     ),
     'red': (
-      '90': #a82e26,
-      '80': #b73831,
-      '70': #c23f38,
-      '60': #d4483e,
-      '50': #e25241,
-      '40': #de5e56,
-      '30': #d77976,
-      '20': #e39e9c,
-      '10': #f7cfd3,
-      '5': #fcecee,
+      '90': rgba(168, 46, 38),
+      '80': rgba(183, 56, 49),
+      '70': rgba(194, 63, 56),
+      '60': rgba(212, 72, 62),
+      '50': rgba(226, 82, 65),
+      '40': rgba(222, 94, 86),
+      '30': rgba(215, 121, 118),
+      '20': rgba(227, 158, 156),
+      '10': rgba(247, 207, 211),
+      '5': rgba(252, 236, 238),
     ),
     'green': (
-      '90': #285f1b,
-      '80': #377e30,
-      '70': #428e3b,
-      '60': #4ea046,
-      '50': #59ae50,
-      '40': #6fbb69,
-      '30': #88c683,
-      '20': #a9d6a6,
-      '10': #cbe6c9,
-      '5': #e9f5e9,
+      '90': rgba(40, 95, 27),
+      '80': rgba(55, 126, 48),
+      '70': rgba(66, 142, 59),
+      '60': rgba(78, 160, 70),
+      '50': rgba(89, 174, 80),
+      '40': rgba(111, 187, 105),
+      '30': rgba(136, 198, 131),
+      '20': rgba(169, 214, 166),
+      '10': rgba(203, 230, 201),
+      '5': rgba(233, 245, 233),
     ),
     'yellow': (
-      '90': #ee6800,
-      '80': #ee8800,
-      '70': #ee9800,
-      '60': #eeab00,
-      '50': #edb800,
-      '40': #efc21b,
-      '30': #f1ce48,
-      '20': #f5db7e,
-      '10': #f9e9b1,
-      '5': #fcf7e1,
+      '90': rgba(238, 104, 0),
+      '80': rgba(238, 136, 0),
+      '70': rgba(238, 152, 0),
+      '60': rgba(238, 171, 0),
+      '50': rgba(237, 184, 0),
+      '40': rgba(239, 194, 27),
+      '30': rgba(241, 206, 72),
+      '20': rgba(245, 219, 126),
+      '10': rgba(249, 233, 177),
+      '5': rgba(252, 247, 225),
     ),
     'background': (
-      '50': #ffffff,
-      '0': #f4f5f7,
+      '50': rgba(255, 255, 255),
+      '0': rgba(244, 245, 247),
     ),
     'white': (
-      '50': rgba(255,255,255,1)
+      '50': rgba(255, 255, 255)
     ),
     'backdrop': (
-      '50': rgba(144,148,153,0.4)
+      '50': rgba(144, 148, 153, 0.4)
     )
   ),
   'dark': (
     'primary': (
-      '90': #eef3ff,
-      '80': #c6d7ff,
-      '70': #9fbbfe,
-      '60': #77a0fe,
-      '50': #5086fd,
-      '40': #286cfd,
-      '30': #245fdd,
-      '20': #1f51bd,
-      '10': #1a449d,
-      '5': #15367d,
+      '90': rgba(118,173,255,1),
+      '80': rgba(89,155,255,1),
+      '70': rgba(59,138,255,1),
+      '60': rgba(46,122,255,1),
+      '50': rgba(40,108,253,1),
+      '40': rgba(45,93,212,1),
+      '30': rgba(47,80,175,1),
+      '20': rgba(46,68,139,1),
+      '10': rgba(43,56,107,1),
+      '5': rgba(37,44,77,1),
     ),
     'text': (
-      '90': rgba(239,239,241,1),
-      '80': rgba(215,216,221,1),
-      '70': rgba(189,189,198,1),
-      '60': rgba(162,163,174,1),
-      '50': rgba(142,143,157,1),
-      '40': rgba(122,123,139,1),
-      '30': rgba(107,109,123,1),
-      '20': rgba(88,90,101,1),
-      '10': rgba(71,71,81,1),
-      '5': rgba(57,57,65,1),
+      '90': rgba(211,213,215,1),
+      '80': rgba(147,151,155,1),
+      '70': rgba(128,131,137,1),
+      '60': rgba(90,91,98,1),
+      '50': rgba(62,62,69,1),
+      '40': rgba(81,81,88,1),
+      '30': rgba(71,71,78,1),
+      '20': rgba(61,61,68,1),
+      '10': rgba(51,51,58,1),
+      '5': rgba(41,41,48,1),
     ),
     'red': (
       '90': rgba(168,46,38,1),
@@ -107,7 +107,6 @@ $themes: (
       '20': rgba(227,158,156,1),
       '10': rgba(247,207,211,1),
       '5': rgba(252,236,238,1),
-      '0': rgba(255,244,246,1),
     ),
     'green': (
       '90': rgba(40,95,27,1),
@@ -120,7 +119,6 @@ $themes: (
       '20': rgba(169,214,166,1),
       '10': rgba(203,230,201,1),
       '5': rgba(233,245,233,1),
-      '0': rgba(244,252,244,1),
     ),
     'yellow': (
       '90': rgba(238,104,0,1),
@@ -135,14 +133,14 @@ $themes: (
       '5': rgba(252,247,225,1),
     ),
     'background': (
-      '0': rgba(33,33,39,1),
-      '50': rgba(41,41,48,1)
+      '50': rgba(34,34,41,1),
+      '0': rgba(28,27,33,1),
     ),
     'white': (
       '50': rgba(255, 255, 255, 1)
     ),
     'backdrop': (
-      '50': rgba(144,148,153,0.4)
+      '50': rgba(144, 148, 153, 0.4)
     )
   )
 );

package/style/presets/font-presets.scss

@@ -5,7 +5,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
-    text-decoration:none,
+    text-decoration:none
   ),
   h-2: (
     font-size:60px,
@@ -13,7 +13,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
-    text-decoration:none,
+    text-decoration:none
   ),
   h-3: (
     font-size:48px,
@@ -21,7 +21,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
-    text-decoration:none,
+    text-decoration:none
   ),
   h-4: (
     font-size:35px,
@@ -30,7 +30,7 @@ $fonts: (
     font-style:normal,
     line-height:44px,
     letter-spacing:0.15px,
-    text-decoration:none,
+    text-decoration:none
   ),
   h-5: (
     font-size:28px,
@@ -38,7 +38,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
-    text-decoration:none,
+    text-decoration:none
   ),
   h-6: (
     font-size:20px,
@@ -46,7 +46,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     letter-spacing:0.15px,
-    text-decoration:none,
+    text-decoration:none
   ),
   title-1: (
     font-size:16px,
@@ -55,7 +55,7 @@ $fonts: (
     font-style:normal,
     line-height:24px,
     letter-spacing:0.0015em,
-    text-decoration:none,
+    text-decoration:none
   ),
   title-2: (
     font-size:14px,
@@ -63,7 +63,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     line-height:16px,
-    text-decoration:none,
+    text-decoration:none
   ),
   title-3: (
     font-size:12px,
@@ -71,7 +71,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     line-height:16px,
-    text-decoration:none,
+    text-decoration:none
   ),
   body-1: (
     font-size:16px,
@@ -79,7 +79,7 @@ $fonts: (
     font-weight:normal,
     font-style:normal,
     line-height:24px,
-    text-decoration:none,
+    text-decoration:none
   ),
   body-2: (
     font-size:14px,
@@ -87,7 +87,7 @@ $fonts: (
     font-weight:normal,
     font-style:normal,
     line-height:16px,
-    text-decoration:none,
+    text-decoration:none
   ),
   body-3: (
     font-size:12px,
@@ -95,7 +95,7 @@ $fonts: (
     font-weight:normal,
     font-style:normal,
     line-height:16px,
-    text-decoration:none,
+    text-decoration:none
   ),
   button-1: (
     font-size:13px,
@@ -103,7 +103,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     line-height:20px,
-    text-decoration:none,
+    text-decoration:none
   ),
   button-2: (
     font-size:11px,
@@ -111,7 +111,7 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     line-height:16px,
-    text-decoration:none,
+    text-decoration:none
   ),
   button-3: (
     font-size:10px,
@@ -119,23 +119,23 @@ $fonts: (
     font-weight:600,
     font-style:normal,
     line-height:14px,
-    text-decoration:none,
+    text-decoration:none
   ),
   caption: (
-    font-size:10px,
+    font-size:11px,
     font-family:"Open Sans",
     font-weight:normal,
     font-style:normal,
-    line-height:12px,
-    text-decoration:none,
+    line-height:16px,
+    text-decoration:none
   ),
   table-header: (
     font-size:11px,
     font-family:"Open Sans",
-    font-weight: 600,
+    font-weight:600,
     font-style:normal,
     line-height:12px,
-    text-decoration:none,
+    text-decoration:none
   ),
   overline: (
     font-size:10px,
@@ -144,6 +144,6 @@ $fonts: (
     font-style:normal,
     line-height:12px,
     letter-spacing:1.5px,
-    text-decoration:none,
+    text-decoration:none
   )
 )

package/style/presets/shadow-presets.scss

@@ -1,16 +1,16 @@
 $shadows: (
   'default': (
     '1': 0px 1px 0px #DAE0EB,
-    '2': 0px 6px 6px 0px rgba(39, 41, 44, 0.12),
+    '2': 0px 14px 18px 0px rgba(0, 0, 0, 0.06),
     '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 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),
+    '1': 0px 1px 0px rgba(11, 11, 12, 1),
+    '2': 0px 14px 18px rgba(0, 0, 0, 0.3),
+    '3': 0px 8px 16px rgba(0, 0, 0, 0.400),
+    '4': 0px 12px 24px rgba(0, 0, 0, 0.400),
+    '5': 0px 16px 32px rgba(0, 0, 0, 0.400),
   )
 );

package/style/radio.scss

@@ -21,7 +21,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      border: solid 1px getColorVar('text', '30');
+      border: solid 1px getColorVar('primary', '50');
       border-radius: 8px;
     }
 
@@ -50,7 +50,7 @@
     }
 
     &:hover:not(&_disabled) &-icon {
-      border: solid 1px getColorVar('text', '50');
+      background: getColorVar('text', '5');
     }
   }
 }

package/style/switch.scss

@@ -4,13 +4,13 @@
 .switch {
   display: inline-flex;
   border: solid 0;
-  border-radius: 2px;
+  border-radius: 4px;
   height: 28px;
   @include getFont($fonts, 'button-2');
-  background: getColorVar('text', '5');
+  background: getColorVar('background', '50');
   color: getColorVar('text', '90');
   fill: getColorVar('text', '90');
-  overflow: hidden;
+  //overflow: hidden;
 
   &-button {
     display: inline-flex;

package/style/table.scss

@@ -97,7 +97,6 @@
         display: flex;
         min-width: 0;
         position: relative;
-        padding: 6px 8px;
         align-items: center;
         grid-gap: 8px;
       }
@@ -176,7 +175,7 @@
       background-color: getColorVar('background', '0');
     }
 
-    &_active, &_active:hover {
+    &_selected, &_selected:hover {
       background-color: getColorVar('primary', '10');
     }
   }

package/style/toolbar.scss

@@ -10,7 +10,7 @@
   flex-shrink: 0;
   align-items: center;
   padding: 0 12px;
-  @include getFont($fonts, 'title-3');
+  @include getFont($fonts, 'title-2');
 
   @each $paletteName in $palettes {
     &.toolbar-#{$paletteName} {

package/style/util/button-util.scss

@@ -18,8 +18,8 @@
   }
 
   .button_ghost.button-#{$paletteName} {
-    color: getColorVar($paletteName, '50');
-    fill: getColorVar($paletteName, '50');
+    color: getColorVar($paletteName, '90');
+    fill: getColorVar($paletteName, '90');
     background-color: transparent;
     background-position: center;
     transition: background 0.8s;

package/util/date-util.d.ts

@@ -32,6 +32,7 @@ export declare class DateUtil {
     static truncateToHour(date: Date): Date;
     static toISOString(date: number): string;
     static isValidDate(date: any): boolean;
+    static millisecondToHumanFormat(milliSeconds: number, maxValue?: number, showDays?: boolean): string;
     private static fillConvertDates;
     private static fillConvertDateStringsToDates;
     private static convertStringToLocalDate;

package/util/forms-util.d.ts

@@ -3,6 +3,7 @@ import { TableColumn } from '../component/table/contract/table-column';
 export declare class FormsUtil {
     static validateAllFormFields(formGroup: FormGroup): void;
     static controlIsInvalid(formGroup: FormGroup, controlName: string): boolean;
+    static getControlErrors(formGroup: FormGroup, controlName: string): string[];
     static matchValuesValidator(matchTo: string): (control: AbstractControl) => ValidationErrors | null;
     static requiredIf(value: boolean): (control: AbstractControl) => ValidationErrors | null;
     static initFormFromColumns(columns: TableColumn[], dataItem: any): FormGroup;