@tetacom/ng-components 1.0.151 → 1.1.0

package/locale/teta-localisation.d.ts

@@ -21,8 +21,6 @@ export interface TetaLocalisation {
     sum: string;
     avg: string;
     search: string;
-    selected: string;
-    notFound: string;
     notSelected: string;
     yes: string;
     no: string;

package/observable/animation-frame.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from "@angular/core";
+import { Observable } from "rxjs";
+export declare const ANIMATION_FRAME: InjectionToken<Observable<number>>;
+export declare const WINDOW: InjectionToken<Window>;

package/observable/public-api.d.ts

@@ -1 +1,2 @@
 export * from './zoneObservable';
+export * from './animation-frame';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetacom/ng-components",
-  "version": "1.0.151",
+  "version": "1.1.0",
   "private": false,
   "peerDependencies": {
     "@angular/common": "^14.0.0",
@@ -10,8 +10,7 @@
     "object-hash": "^2.2.0",
     "three": "^0.139.2",
     "html-to-image": "^1.9.0",
-    "luxon": "^3.1.0",
-    "@tetacom/themes": "^0.0.9"
+    "luxon": "^3.1.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/pipe/prepend-zero/prepend-zero.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./prepend-zero.pipe";
+import * as i2 from "@angular/common";
+export declare class PrependZeroModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrependZeroModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PrependZeroModule, [typeof i1.PrependZeroPipe], [typeof i2.CommonModule], [typeof i1.PrependZeroPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PrependZeroModule>;
+}

package/pipe/prepend-zero/prepend-zero.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PrependZeroPipe implements PipeTransform {
+    transform(value: number, length: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrependZeroPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PrependZeroPipe, "tetaPrependZero", false>;
+}

package/style/accordion.scss

@@ -1,54 +1,33 @@
 @import "./util/font-util.scss";
 @import "./util/color-util.scss";
-@import "presets/view-types";
-
-.accordion_rounded .accordion-head {
-  border-radius: 8px;
-}
-
-.accordion_brick .accordion-head {
-  border-radius: 0
-}
-
-.accordion_circle .accordion-head {
-  border-radius: 100px;
-}
 
 .accordion {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-
-  @include getView('base');
 
   &-item {
     display: flex;
     flex-direction: column;
-    min-height: 52px;
-    background: var(--color-global-bgcard);
+    min-height: 40px;
 
     &_active {
       flex-grow: 0;
-      background: var(--color-text-10);
     }
   }
 
   &-head {
     display: flex;
     align-items: center;
-    height: 52px;
-    padding: 0 12px;
+    height: 40px;
+    padding: 0 8px;
+    grid-gap: 8px;
     flex-shrink: 0;
-    //border-bottom: solid 1px var(--color-text-5);
-    justify-content: space-between;
+    border-bottom: solid 1px getColorVar('text', '5');
     @include getFont($fonts, 'title-3');
 
-
     &:hover:not(&_disabled) {
       cursor: pointer;
-      background: var(--color-text-5);
     }
-
     &_open {
       border: none;
     }
@@ -63,7 +42,6 @@
     display: flex;
     flex-grow: 1;
     min-height: 0;
-    //border-bottom: solid 1px var(--color-text-5);
+    border-bottom: solid 1px getColorVar('text', '5');
   }
-
 }

package/style/assembly-library.scss

@@ -1,6 +1,5 @@
 @import "./accordion.scss";
 @import "./skeleton.scss";
-@import "./badge.scss";
 @import "./border.scss";
 @import "./button.scss";
 @import "./checkbox.scss";
@@ -32,10 +31,8 @@
 @import "./switch.scss";
 @import "./table.scss";
 @import "./tabs.scss";
-@import "./tag.scss";
 @import "./toggle.scss";
 @import "./toolbar.scss";
 @import "./tooltip.scss";
 @import "./tree.scss";
-@import "./bottombar.scss";
-@import "./divider.scss";
+

package/style/assembly-presets.scss

@@ -1,4 +1,5 @@
 @import "./presets/color-presets.scss";
 @import "./presets/font-presets.scss";
+@import "./presets/shadow-presets.scss";
 @import "./presets/spacing-presets.scss";
 @import "./presets/layout-presets.scss";

package/style/button.scss

@@ -1,34 +1,27 @@
 @import "./util/color-util.scss";
 @import "./util/font-util.scss";
-@import "presets/view-types.scss";
+@import "./util/button-util.scss";
 
 .button {
   display: inline-flex;
-  grid-gap: 6px;
+  grid-gap: 4px;
   align-items: center;
-  padding: 6px 8px;
+  height: 28px;
+  padding: 0 12px;
   border: 0;
-  color: var(--color-global-white);
-  fill: var(--color-global-white);
+  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;
 
-  @include getView('btn');
-
   &:hover:not([disabled]) {
     cursor: pointer;
   }
 
-  &-m {
-    height: 28px;
-  }
-
-  &-l {
-    height: 32px;
-  }
-
   &-xs {
     padding: 0;
     height: 16px;
@@ -42,7 +35,7 @@
   }
 
   &[disabled] {
-    border: none;
+
     filter: grayscale(1);
     opacity: 0.3;
   }
@@ -51,3 +44,7 @@
     box-shadow: 0 0 0 4px var(--color-primary-10);
   }
 }
+
+@each $paletteName in $palettes {
+  @include generateButtonForPalette($paletteName);
+}

package/style/checkbox.scss

@@ -5,46 +5,33 @@
   align-items: center;
   grid-gap: 8px;
 
-  &_disabled {
-    cursor: default!important;
-    fill: var(--color-text-5)!important;
-    color: var(--color-text-50)!important;
-  }
-
   &__tick {
-    background: var(--color-global-bgcard);
-    border: solid 1px var(--color-text-20);
-    border-radius: 4px;
-    height: 16px;
-    width: 16px;
+    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: 4px;
-      background: var(--color-primary-50);
-      fill: var(--color-global-white);
+      border-radius: 2px;
+      background: getColorVar('primary', '50');
+      fill: getColorVar('white', '50');
     }
   }
 
-  &:hover:not(&_disabled) {
+  &:hover {
     cursor: pointer;
   }
 
-
-  &:hover:not(&_disabled) &__tick {
-    background: var(--color-text-5);
-    border-color: var(--color-text-30);
-
-    &_active {
-      background: var(--color-primary-60);
-    }
+  &:hover &__tick {
+    border-color: getColorVar('text', '50');
   }
 
-
-  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
+  @each $paletteName in $palettes {
     &.checkbox-#{$paletteName} {
       fill: getColorVar($paletteName, '50');
     }

package/style/chips.scss

@@ -1,23 +1,23 @@
 @import "util/color-util.scss";
-@import "util/font-util.scss";
-@import "presets/view-types.scss";
 
 .chip {
-  height: 28px;
-  @include getFont($fonts,'button-2');
+  height: 24px;
   border: solid transparent 0;
   border-radius: 12px;
-  background: var(--color-text-10);
-  fill: var(--color-text-50);
-  color: var(--color-text-90);
+  background: getColorVar('text', '10');
+  fill: getColorVar('text', '50');
+  color: getColorVar('text', '90');
   margin-right: 4px;
   margin-top: 4px;
   display: inline-flex;
   align-items: center;
-  padding: 4px 4px 4px 10px;
-  gap: 8px;
-  @include getView('base');
+  padding: 4px 8px 4px 6px;
+
   &:hover {
     cursor: pointer;
   }
+
+  teta-icon {
+    margin-right: 6px;
+  }
 }

package/style/color.scss

@@ -1,7 +1,42 @@
 @use "sass:map";
 @import "./util/color-util.scss";
 
+body {
+  @each $paletteName, $palette in map.get($themes, "default") {
+    @each $paletteColorName, $paletteColor in $palette {
+      --color-#{$paletteName}-#{$paletteColorName}: #{$paletteColor};
+    }
+  }
+}
+
+@each $themeName, $theme in $themes {
+  .theme-#{$themeName} {
+    @each $paletteName, $palette in $theme {
+      @each $paletteColorName, $paletteColor in $palette {
+        --color-#{$paletteName}-#{$paletteColorName}: #{$paletteColor};
+      }
+    }
+  }
+}
+
+
+@each $paletteName, $i in $palettes {
+  @each $gradeName, $j in $grades {
+    .color-#{$paletteName}-#{$gradeName} {
+      color: getColorVar($paletteName, $gradeName);
+    }
+    .bg-#{$paletteName}-#{$gradeName} {
+      background-color: getColorVar($paletteName, $gradeName);
+    }
+    .border-#{$paletteName}-#{$gradeName} {
+      border-color: getColorVar($paletteName, $gradeName);
+    }
+    .fill-#{$paletteName}-#{$gradeName} {
+      fill: getColorVar($paletteName, $gradeName);
+    }
+  }
+}
+
 .bg-transparent {
   background-color: transparent;
 }
-

package/style/datepicker.scss

@@ -1,15 +1,12 @@
 @import "util/font-util.scss";
 @import "util/shadow-util.scss";
 @import "util/color-util.scss";
-@import "presets/view-types.scss";
 
 .datepicker {
   display: inline-flex;
-  width: 110px;
+  width: 150px;
   min-width: 0;
 
-  @include getView('base');
-
   &-wide {
     width: 170px;
   }
@@ -19,36 +16,28 @@
     flex-grow: 1;
     align-items: center;
     height: 28px;
-    border: solid 1px var(--color-text-5);
-    background: var(--color-text-5);
-    background-clip: padding-box;
-    color: var(--color-text-90);
-    fill: var(--color-text-90);
+    border: solid 1px getColorVar('text', '20');
+    background: getColorVar('background', '50');
+    color: getColorVar('text', '90');
+    fill: getColorVar('text', '90');
+    border-radius: 4px;
     padding: 0 8px;
-    transition: border-color 0.4s, background-color 0.4s;
+    transition: border-color 0.4s;
     min-width: 0;
 
     &_disabled {
-      background-color: var(--color-text-5);
+      background-color: getColorVar('text', 5);
       border: 0;
-      color: var(--color-text-40);
-    }
-
-    &:focus-within {
-      border-color: var(--color-primary-50);
+      color: getColorVar('text', 40);
     }
 
-    &:hover:not(&_disabled):not(:focus-within) {
-      background-color: var(--color-text-10);
+    &:hover:not(&_disabled) {
+      border-color: getColorVar('text', '40');
       cursor: pointer;
     }
 
-    &:active:not(&_disabled) {
-      border-color: var(--color-primary-50);
-    }
-
     &_invalid {
-      border-color: var(--color-red-50);
+      border-color: getColorVar('red', '50');
     }
   }
 
@@ -57,72 +46,16 @@
   }
 
   &:focus &-head, &_open &-head {
-    border-color: var(--color-primary-50);
-  }
-
-  &-year {
-    max-height: 200px;
-    display: grid;
-    width: 248px;
-    align-items: center;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding: 0 12px;
-    column-gap: 4px;
-
-    &_item {
-      transition: background 0.4s;
-      min-height: 32px;
-
-      &:hover:not(&_disabled):not(&_active) {
-        cursor: pointer;
-        background-color: var(--color-primary-5);
-      }
-
-      &_disabled {
-        color: var(--color-text-30);
-      }
-
-      &_active {
-        color: var(--color-global-white);
-        background-color: var(--color-primary-50);
-      }
-    }
-
-
+    border-color: getColorVar('primary', '50');
   }
 
-  &-month {
-    max-height: 200px;
-    display: grid;
-    align-items: center;
-    grid-template-columns: 1fr 1fr 1fr;
-
-    &-wrapper {
-      width: 248px;
-    }
-
-    &_item {
-      transition: background 0.4s;
-      min-height: 32px;
-
-      &:hover:not(&_disabled):not(&_active) {
-        cursor: pointer;
-        background-color: var(--color-text-5);
-      }
-
-      &_active {
-        color: var(--color-global-white);
-        background-color: var(--color-primary-50);
-      }
-    }
-
-
-  }
+  //&-body {
+  //  @include shadow(2);
+  //  background-color: getColorVar('background', '50');
+  //}
 
   &-content {
-    user-select: none;
-    max-height: 268px;
-    overflow: hidden;
+    width: 224px;
   }
 
   &-picker {
@@ -143,74 +76,26 @@
     justify-content: center;
   }
 
-  &-arrow_hidden {
-    visibility: hidden;
-  }
-
   &-date {
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: solid 0;
-
-    &:hover:not(&_disabled):not(&_active):not(&-range_hover) {
-      cursor: pointer;
-      background-color: var(--color-primary-5);
-    }
+    border-radius: 32px;
 
     &:hover:not(&_disabled):not(&_active) {
       cursor: pointer;
-      background-color: var(--color-primary-50);
-    }
-
-    &-range {
-      &_active {
-        background-color: var(--color-primary-10);
-      }
-
-      &_active:not(.datepicker-date_active) {
-        background-color: var(--color-primary-10);
-        border-radius: 0;
-      }
-
-      &_hover {
-        background-color: var(--color-primary-5);
-      }
-
-      &_hover:not(.datepicker-date_active) {
-        background-color: var(--color-primary-5);
-        border-radius: 0;
-      }
-
-      &_disabled {
-        visibility: hidden;
-      }
-    }
-
-    &_active:not(.datepicker-date-range_hover) {
-      color: var(--color-global-white);
-      background-color: var(--color-primary-50);
-    }
-
-    &_active-second {
-      cursor: pointer;
-      border-top-left-radius: 0;
-      color: var(--color-global-white);
-      background-color: var(--color-primary-50);
-      border-bottom-left-radius: 0;
+      background-color: getColorVar('text', '5');
     }
 
-    &_active-first {
-      cursor: pointer;
-      color: var(--color-global-white);
-      background-color: var(--color-primary-50);
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+    &_active {
+      color: getColorVar('white', '50');
+      background-color: getColorVar('primary', '50');
     }
 
     &_disabled {
-      color: var(--color-text-30);
+      color: getColorVar('text', '10');
     }
   }
 

package/style/drag.scss

@@ -3,7 +3,7 @@
 .drop-direction {
   position: absolute;
   display: none;
-  background: var(--color-text-50);
+  background: getColorVar('text', 50);
   z-index: 10;
 
   &-vertical#{&}-start {

package/style/dropdown.scss

@@ -1,18 +1,16 @@
 @import "util/color-util";
 @import "util/shadow-util";
-@import "presets/view-types.scss";
 
 .dropdown {
-  border: solid 1px var(--color-text-5);
+  border-radius: 4px;
+  border: solid 1px getColorVar('text', '5');
   position: fixed;
   display: flex;
   z-index: 1050;
-  box-shadow: var(--shadow-2);
-  background: var(--color-global-bgcard);
+  @include shadow(2);
+  background: getColorVar('background', '50');
   animation: fadeInFromNone 0.5s ease-out;
 
-  @include getView('base');
-
   &-backdrop {
     position: fixed;
     top: 0;

package/style/hint.scss

@@ -1,13 +1,13 @@
 @import "util/shadow-util.scss";
 @import "util/color-util.scss";
-@import "presets/view-types.scss";
+
 .hint {
-  box-shadow: var(--shadow-1);
+  @include shadow(1);
   padding: 4px 8px;
   white-space: nowrap;
   z-index: 3;
-  background-color: var(--color-text-10);
-  color: var(--color-text-90);
+  background-color: getColorVar('text', '10');
+  color: getColorVar('text', '90');
   border: solid 0;
-  @include getView('base');
+  border-radius: 2px;
 }

package/style/icon.scss

@@ -9,8 +9,7 @@
     width: 32px;
     height: 40px;
   }
-
-  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
+  @each $paletteName in $palettes {
     &.icon-#{$paletteName} {
       fill: getColorVar($paletteName, '70');
     }