@tetacom/ng-components 1.0.148 → 1.0.150

package/locale/teta-localisation.d.ts

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

package/package.json

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

package/style/accordion.scss

@@ -1,33 +1,54 @@
 @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: 40px;
+    min-height: 52px;
+    background: var(--color-global-bgcard);
 
     &_active {
       flex-grow: 0;
+      background: var(--color-text-10);
     }
   }
 
   &-head {
     display: flex;
     align-items: center;
-    height: 40px;
-    padding: 0 8px;
-    grid-gap: 8px;
+    height: 52px;
+    padding: 0 12px;
     flex-shrink: 0;
-    border-bottom: solid 1px getColorVar('text', '5');
+    //border-bottom: solid 1px var(--color-text-5);
+    justify-content: space-between;
     @include getFont($fonts, 'title-3');
 
+
     &:hover:not(&_disabled) {
       cursor: pointer;
+      background: var(--color-text-5);
     }
+
     &_open {
       border: none;
     }
@@ -42,6 +63,7 @@
     display: flex;
     flex-grow: 1;
     min-height: 0;
-    border-bottom: solid 1px getColorVar('text', '5');
+    //border-bottom: solid 1px var(--color-text-5);
   }
+
 }

package/style/assembly-library.scss

@@ -1,5 +1,6 @@
 @import "./accordion.scss";
 @import "./skeleton.scss";
+@import "./badge.scss";
 @import "./border.scss";
 @import "./button.scss";
 @import "./checkbox.scss";
@@ -31,8 +32,10 @@
 @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,5 +1,4 @@
 @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/badge.scss

@@ -0,0 +1,28 @@
+@import "util/font-util.scss";
+@import "util/color-util.scss";
+@import "presets/view-types.scss";
+
+.badge {
+  border-style: solid;
+  border-width: 1px;
+  width: fit-content;
+  padding: 4px 6px;
+  border-radius: 8px;
+  @include getFont($fonts, 'overline');
+
+  @include getView('base');
+
+  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
+    &-#{"" + $paletteName} {
+      border-color: getColorVar($paletteName, '50');
+      color: getColorVar($paletteName, '50');
+
+      &_filled {
+        background-color: getColorVar($paletteName, '50');
+        color: white;
+        border-color: transparent;
+      }
+    }
+  }
+}
+

package/style/bottombar.scss

@@ -0,0 +1,5 @@
+.bottom-bar {
+  display: flex;
+  padding: var(--spacing-12);
+  justify-content: space-between;
+}

package/style/button.scss

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

package/style/checkbox.scss

@@ -5,33 +5,46 @@
   align-items: center;
   grid-gap: 8px;
 
+  &_disabled {
+    cursor: default!important;
+    fill: var(--color-text-5)!important;
+    color: var(--color-text-50)!important;
+  }
+
   &__tick {
-    background: getColorVar('background', '50');
-    border: solid 1px getColorVar('text', '20');
-    border-radius: 2px;
-    height: 14px;
-    width: 14px;
+    background: var(--color-global-bgcard);
+    border: solid 1px var(--color-text-20);
+    border-radius: 4px;
+    height: 16px;
+    width: 16px;
     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');
+      border-radius: 4px;
+      background: var(--color-primary-50);
+      fill: var(--color-global-white);
     }
   }
 
-  &:hover {
+  &:hover:not(&_disabled) {
     cursor: pointer;
   }
 
-  &:hover &__tick {
-    border-color: getColorVar('text', '50');
+
+  &:hover:not(&_disabled) &__tick {
+    background: var(--color-text-5);
+    border-color: var(--color-text-30);
+
+    &_active {
+      background: var(--color-primary-60);
+    }
   }
 
-  @each $paletteName in $palettes {
+
+  @each $paletteName, $palette in map-get($themes, nth(map-keys($themes), 1)) {
     &.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: 24px;
+  height: 28px;
+  @include getFont($fonts,'button-2');
   border: solid transparent 0;
   border-radius: 12px;
-  background: getColorVar('text', '10');
-  fill: getColorVar('text', '50');
-  color: getColorVar('text', '90');
+  background: var(--color-text-10);
+  fill: var(--color-text-50);
+  color: var(--color-text-90);
   margin-right: 4px;
   margin-top: 4px;
   display: inline-flex;
   align-items: center;
-  padding: 4px 8px 4px 6px;
-
+  padding: 4px 4px 4px 10px;
+  gap: 8px;
+  @include getView('base');
   &:hover {
     cursor: pointer;
   }
-
-  teta-icon {
-    margin-right: 6px;
-  }
 }

package/style/color.scss

@@ -1,42 +1,7 @@
 @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,12 +1,15 @@
 @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: 150px;
+  width: 110px;
   min-width: 0;
 
+  @include getView('base');
+
   &-wide {
     width: 170px;
   }
@@ -16,28 +19,36 @@
     flex-grow: 1;
     align-items: center;
     height: 28px;
-    border: solid 1px getColorVar('text', '20');
-    background: getColorVar('background', '50');
-    color: getColorVar('text', '90');
-    fill: getColorVar('text', '90');
-    border-radius: 4px;
+    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);
     padding: 0 8px;
-    transition: border-color 0.4s;
+    transition: border-color 0.4s, background-color 0.4s;
     min-width: 0;
 
     &_disabled {
-      background-color: getColorVar('text', 5);
+      background-color: var(--color-text-5);
       border: 0;
-      color: getColorVar('text', 40);
+      color: var(--color-text-40);
+    }
+
+    &:focus-within {
+      border-color: var(--color-primary-50);
     }
 
-    &:hover:not(&_disabled) {
-      border-color: getColorVar('text', '40');
+    &:hover:not(&_disabled):not(:focus-within) {
+      background-color: var(--color-text-10);
       cursor: pointer;
     }
 
+    &:active:not(&_disabled) {
+      border-color: var(--color-primary-50);
+    }
+
     &_invalid {
-      border-color: getColorVar('red', '50');
+      border-color: var(--color-red-50);
     }
   }
 
@@ -46,16 +57,72 @@
   }
 
   &:focus &-head, &_open &-head {
-    border-color: getColorVar('primary', '50');
+    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);
+      }
+    }
+
+
   }
 
-  //&-body {
-  //  @include shadow(2);
-  //  background-color: getColorVar('background', '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);
+      }
+    }
+
+
+  }
 
   &-content {
-    width: 224px;
+    user-select: none;
+    max-height: 268px;
+    overflow: hidden;
   }
 
   &-picker {
@@ -76,26 +143,74 @@
     justify-content: center;
   }
 
+  &-arrow_hidden {
+    visibility: hidden;
+  }
+
   &-date {
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: solid 0;
-    border-radius: 32px;
+
+    &:hover:not(&_disabled):not(&_active):not(&-range_hover) {
+      cursor: pointer;
+      background-color: var(--color-primary-5);
+    }
 
     &:hover:not(&_disabled):not(&_active) {
       cursor: pointer;
-      background-color: getColorVar('text', '5');
+      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;
     }
 
-    &_active {
-      color: getColorVar('white', '50');
-      background-color: getColorVar('primary', '50');
+    &_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;
     }
 
     &_disabled {
-      color: getColorVar('text', '10');
+      color: var(--color-text-30);
     }
   }
 

package/style/divider.scss

@@ -0,0 +1,15 @@
+.divider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  &-content {
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+  }
+
+  div:first-child, div:last-child {
+    flex-grow: 1;
+  }
+}

package/style/drag.scss

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

package/style/dropdown.scss

@@ -1,16 +1,18 @@
 @import "util/color-util";
 @import "util/shadow-util";
+@import "presets/view-types.scss";
 
 .dropdown {
-  border-radius: 4px;
-  border: solid 1px getColorVar('text', '5');
+  border: solid 1px var(--color-text-5);
   position: fixed;
   display: flex;
   z-index: 1050;
-  @include shadow(2);
-  background: getColorVar('background', '50');
+  box-shadow: var(--shadow-2);
+  background: var(--color-global-bgcard);
   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 {
-  @include shadow(1);
+  box-shadow: var(--shadow-1);
   padding: 4px 8px;
   white-space: nowrap;
   z-index: 3;
-  background-color: getColorVar('text', '10');
-  color: getColorVar('text', '90');
+  background-color: var(--color-text-10);
+  color: var(--color-text-90);
   border: solid 0;
-  border-radius: 2px;
+  @include getView('base');
 }

package/style/icon.scss

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