@tetacom/ng-components 1.0.3 → 1.0.7

package/package.json

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

package/style/accordion.scss

@@ -0,0 +1,47 @@
+@import "./util/font-util.scss";
+@import "./util/color-util.scss";
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    min-height: 40px;
+
+    &_active {
+      flex-grow: 0;
+    }
+  }
+
+  &-head {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 8px;
+    grid-gap: 8px;
+    flex-shrink: 0;
+    border-bottom: solid 1px getColorVar('text', '5');
+    @include getFont($fonts, 'title-3');
+
+    &:hover:not(&_disabled) {
+      cursor: pointer;
+    }
+    &_open {
+      border: none;
+    }
+  }
+
+  &-toggle {
+    display: flex;
+
+  }
+
+  &-content {
+    display: flex;
+    flex-grow: 1;
+    min-height: 0;
+    border-bottom: solid 1px getColorVar('text', '5');
+  }
+}

package/style/assembly-library.scss

@@ -0,0 +1,36 @@
+@import "./accordion.scss";
+@import "./border.scss";
+@import "./button.scss";
+@import "./checkbox.scss";
+@import "./chips.scss";
+@import "./color.scss";
+@import "./datepicker.scss";
+@import "./drag.scss";
+@import "./dropdown.scss";
+@import "./font.scss";
+@import "./hint.scss";
+@import "./icon.scss";
+@import "./input.scss";
+@import "./layout.scss";
+@import "./library.scss";
+@import "./list.scss";
+@import "./loader.scss";
+@import "./message.scss";
+@import "./modal.scss";
+@import "./navigation.scss";
+@import "./progress.scss";
+@import "./radio.scss";
+@import "./resize-panel.scss";
+@import "./scroll.scss";
+@import "./select.scss";
+@import "./shadow.scss";
+@import "./sidebar.scss";
+@import "./sizing.scss";
+@import "./spacing.scss";
+@import "./switch.scss";
+@import "./table.scss";
+@import "./tabs.scss";
+@import "./toggle.scss";
+@import "./toolbar.scss";
+@import "./tooltip.scss";
+@import "./tree.scss";

package/style/assembly-presets.scss

@@ -0,0 +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/assembly.scss

@@ -0,0 +1,4 @@
+@import "./reset.scss";
+
+@import "./assembly-presets.scss";
+@import "./assembly-library.scss";

package/style/border.scss

@@ -0,0 +1,24 @@
+@import "./common.scss";
+
+.border {
+  border-style: solid;
+  border-width: 1px;
+  @each $dir in $directions {
+    &-#{$dir} {
+      border-#{$dir}: solid 1px;
+    }
+  }
+  @for $radius from 0 through 12 {
+    &-radius-#{$radius} {
+      border-radius: 1px * $radius;
+    }
+  }
+}
+
+.border-0 {
+  border-width: 0;
+}
+
+.border-transparent {
+  border-color: transparent;
+}

package/style/button.scss

@@ -0,0 +1,43 @@
+@import "./util/color-util.scss";
+@import "./util/font-util.scss";
+@import "./util/button-util.scss";
+
+.button {
+  display: inline-flex;
+  grid-gap: 4px;
+  align-items: center;
+  height: 24px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 2px;
+  color: getColorVar('white', '50');
+  fill: getColorVar('white', '50');
+  @include getFont($fonts, 'button-2');
+  transition: background 0.4s;
+
+  &:hover:not([disabled]) {
+    cursor: pointer;
+  }
+
+  &-xs {
+    padding: 0;
+    height: 16px;
+  }
+
+  &-square {
+    padding: 4px;
+    width: 24px;
+    flex-shrink: 0;
+    justify-content: center;
+  }
+
+  &[disabled] {
+    filter: grayscale(1);
+    opacity: 0.3;
+  }
+
+}
+
+@each $paletteName in $palettes {
+  @include generateButtonForPalette($paletteName);
+}

package/style/checkbox.scss

@@ -0,0 +1,31 @@
+@import "util/color-util.scss";
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+
+  &__tick {
+    border: solid 1px getColorVar('text', '30');
+    border-radius: 1px;
+    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;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:hover &__tick {
+    border-color: getColorVar('text', '50');
+  }
+
+  @each $paletteName in $palettes {
+    &.checkbox-#{$paletteName} {
+      fill: getColorVar($paletteName, '50');
+    }
+  }
+}

package/style/chips.scss

@@ -0,0 +1,23 @@
+@import "util/color-util.scss";
+
+.chip {
+  height: 24px;
+  border: solid transparent 0;
+  border-radius: 12px;
+  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 8px 4px 6px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  teta-icon {
+    margin-right: 6px;
+  }
+}

package/style/color.scss

@@ -0,0 +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/common.scss

@@ -0,0 +1 @@
+$directions: top, right, bottom, left;

package/style/datepicker.scss

@@ -0,0 +1,106 @@
+@import "util/font-util.scss";
+@import "util/shadow-util.scss";
+@import "util/color-util.scss";
+
+.datepicker {
+  display: inline-flex;
+  width: 150px;
+
+  &-wide {
+    width: 170px;
+  }
+
+  &-head {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    height: 24px;
+    border: solid 1px getColorVar('text', '20');
+    background: getColorVar('background', '50');
+    color: getColorVar('text', '90');
+    fill: getColorVar('text', '90');
+    border-radius: 2px;
+    padding: 0 4px;
+    transition: border-color 0.4s;
+
+    &_disabled {
+      background-color: getColorVar('text', 5);
+      border: 0;
+      color: getColorVar('text', 40);
+    }
+
+    &:hover:not(&_disabled) {
+      border-color: getColorVar('text', '40');
+      cursor: pointer;
+    }
+
+    &_invalid {
+      border-color: getColorVar('red', '50');
+    }
+  }
+
+  &-table &-head {
+    border-radius: 0;
+  }
+
+  &:focus &-head, &_open &-head {
+    border-color: getColorVar('primary', '50');
+  }
+
+  &-body {
+    @include shadow(2);
+    background-color: getColorVar('background', '50');
+  }
+
+  &-content {
+    width: 224px;
+  }
+
+  &-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 32px);
+    grid-template-rows: 32px;
+  }
+
+  &-week {
+    display: grid;
+    grid-template-columns: repeat(7, 32px);
+  }
+
+  &-day {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-date {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: solid 0;
+    border-radius: 32px;
+
+    &:hover:not(&_disabled):not(&_active) {
+      cursor: pointer;
+      background-color: getColorVar('text', '5');
+    }
+
+    &_active {
+      color: getColorVar('white', '50');
+      background-color: getColorVar('primary', '50');
+    }
+
+    &_disabled {
+      color: getColorVar('text', '10');
+    }
+  }
+
+  &-time {
+    display: flex;
+    grid-gap: 16px;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/style/drag.scss

@@ -0,0 +1,40 @@
+@import "util/color-util";
+
+.drop-direction {
+  position: absolute;
+  display: none;
+  background: getColorVar('text', 50);
+  z-index: 10;
+
+  &-vertical#{&}-start {
+    width: 100%;
+    height: 1px;
+    display: block;
+    top: -1px;
+    left: 0;
+  }
+
+  &-vertical#{&}-end {
+    width: 100%;
+    height: 1px;
+    display: block;
+    bottom: -1px;
+    left: 0;
+  }
+
+  &-horizontal#{&}-start {
+    height: 100%;
+    width: 1px;
+    display: block;
+    top: 0;
+    left: -1px;
+  }
+
+  &-horizontal#{&}-end {
+    height: 100%;
+    width: 1px;
+    display: block;
+    top: 0;
+    right: -1px;
+  }
+}

package/style/dropdown.scss

@@ -0,0 +1,30 @@
+@import "util/color-util";
+@import "util/shadow-util";
+
+.dropdown {
+  border-radius: 2px;
+  border: solid 1px getColorVar('text', '5');
+  position: fixed;
+  display: flex;
+  z-index: 1050;
+  @include shadow(1);
+  animation: fadeInFromNone 0.5s ease-out;
+}
+
+@keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+

package/style/font.scss

@@ -0,0 +1,7 @@
+@import "util/font-util.scss";
+
+@each $fontName, $font in $fonts {
+  .font-#{$fontName} {
+    @include getFontDescription($font)
+  }
+}

package/style/hint.scss

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

package/style/icon.scss

@@ -0,0 +1,12 @@
+@import "util/color-util.scss";
+
+.icon {
+  display: inline-flex;
+  height: 16px;
+  width: 16px;
+  @each $paletteName in $palettes {
+    &.icon-#{$paletteName} {
+      fill: getColorVar($paletteName, '70');
+    }
+  }
+}

package/style/input.scss

@@ -0,0 +1,162 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.form-row {
+  display: flex;
+  grid-gap: 8px;
+  align-items: flex-end;
+}
+
+.input-container {
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.input-message {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  height: 12px;
+  overflow: hidden;
+}
+
+.text-field, .input, .textarea {
+  padding: 4px;
+  border: solid 1px getColorVar('text', '20');
+  border-radius: 2px;
+  background-color: getColorVar('background', '50');
+  color: getColorVar('text', 90);
+  @include getFont($fonts, 'body-3');
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  grid-gap: 4px;
+  width: 100%;
+  min-width: 0;
+  transition: border-color 0.4s;
+
+  &_invalid {
+    border-color: getColorVar('red', '50');
+  }
+
+  &_required::after {
+    margin-left: 4px;
+    content: '*';
+    color: getColorVar('red', '50');
+  }
+
+  &::placeholder {
+    color: getColorVar('text', '40');
+  }
+
+  &:focus-within, &:focus {
+    border-color: getColorVar('primary', '50');
+  }
+
+  &:focus-within {
+    &::placeholder {
+      color: getColorVar('text', '20');
+    }
+
+    input::placeholder {
+      color: getColorVar('text', '20');
+    }
+  }
+
+  &:disabled, &[disabled], &_disabled {
+    border: 0;
+    background: getColorVar('text', '5');
+    color: getColorVar('text', '40');
+  }
+
+  &:hover:not([disabled]):not(&_disabled):not(:focus-within) {
+    border-color: getColorVar('text', '40');
+  }
+
+  .close-icon {
+    display: none;
+    position: absolute;
+    right: 4px;
+  }
+
+  &:hover:not([disabled]):not(&_disabled), &:focus-within {
+    .close-icon {
+      display: flex;
+    }
+  }
+}
+
+.text-field, .input {
+  height: 24px;
+}
+
+.text-field {
+  position: relative;
+
+  input {
+    color: getColorVar('text', 90);
+    border-width: 0;
+    width: 100%;
+  }
+
+  teta-icon {
+    fill: getColorVar('text', 40);
+  }
+}
+
+.textarea {
+  resize: none;
+}
+
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: getColorVar('background', '50');
+  border: dashed 1px getColorVar('text', '10');
+  border-radius: 4px;
+  transition: background 0.4s;
+  grid-gap: 8px;
+
+  &-label {
+    flex-grow: 0;
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
+
+  &-input {
+    display: none;
+  }
+
+  &_active {
+    background-color: getColorVar('text', '10');
+  }
+}
+
+.form-group-title {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  grid-gap: 8px;
+  color: getColorVar('text', '50');
+
+  &-text {
+    flex-shrink: 0;
+  }
+
+  &-line {
+    flex-grow: 1;
+    height: 1px;
+    background: getColorVar('text', '50');
+  }
+}