@kato-lee/components 1.0.3

package/assets/components/_snack-bar.scss

@@ -0,0 +1,18 @@
+.tak-snackbar-danger {
+  .mat-button.mat-snack-bar-action:not(:disabled) {
+    color: var(--tak-snackbar-danger-action-color) !important;
+  }
+  .mat-snackbar__surface {
+    color: var(--tak-snackbar-danger-color) !important;
+    background-color: var(--tak-snackbar-danger-background-color) !important;
+  }
+}
+.tak-snackbar-success {
+  .mat-button.mat-snack-bar-action:not(:disabled) {
+    color: var(--tak-snackbar-success-action-color) !important;
+  }
+  .mat-snackbar__surface {
+    color: var(--tak-snackbar-success-color) !important;
+    background-color: var(--tak-snackbar-success-background-color) !important;
+  }
+}

package/assets/components/_tables.scss

@@ -0,0 +1,235 @@
+$TAK_TABLE_PAGINATOR_HEIGHT: 56px;
+$TAK_TABLE_HEADER_HEIGHT: 70px;
+$TAK_TABLE_BORDER_RADIUS: 10px;
+
+.mat-paginator-range-label {
+  color: var(--tak-paginator-range-label-color);
+}
+
+.tak-cell__subcontent {
+  color: var(--tak-table-row-subcontent-color);
+  &::before {
+    content: '\A';
+    white-space: pre;
+  }
+}
+
+.tak-table {
+  &__container {
+    box-shadow: var(--tak-table-container-box-shadow);
+    border: 1px solid var(--tak-table-container-border-color);
+    border-radius: $TAK_TABLE_BORDER_RADIUS;
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: Roboto, sans-serif;
+    &--left {
+      padding: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      & > .tak-table-title {
+        font-size: 16px;
+        font-weight: bolder;
+      }
+      & > .tak-table-subtitle {
+        font-size: 13px;
+        font-weight: bolder;
+        &::before {
+          content: '\A';
+          white-space: pre;
+        }
+      }
+    }
+    &--right {
+      white-space: nowrap;
+      display: flex;
+    }
+    color: var(--tak-table-header-color);
+    height: $TAK_TABLE_HEADER_HEIGHT;
+    border-top-left-radius: $TAK_TABLE_BORDER_RADIUS;
+    border-top-right-radius: $TAK_TABLE_BORDER_RADIUS;
+    background-color: var(--tak-table-header-background-color);
+    ~ .tak-table__sub-header {
+      ~ .tak-table__content {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        max-height: calc(
+          100vh -
+            (
+              (
+                  var(--tak-header-height) + var(--tak-footer-height) +
+                    (var(--tak-layout-outlet-padding) * 2)
+                ) + $TAK_TABLE_PAGINATOR_HEIGHT + $TAK_TABLE_HEADER_HEIGHT + 4px
+            )
+        );
+        &.paginator-bottom {
+          max-height: calc(
+            100vh -
+              (
+                (
+                    var(--tak-header-height) + var(--tak-footer-height) +
+                      (var(--tak-layout-outlet-padding) * 2)
+                  ) + $TAK_TABLE_PAGINATOR_HEIGHT + $TAK_TABLE_HEADER_HEIGHT +
+                  $TAK_TABLE_PAGINATOR_HEIGHT + 4px
+              )
+          );
+        }
+      }
+
+      ~ .tak-table__paginator ~ .tak-table__content {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        max-height: calc(
+          100vh -
+            (
+              (
+                  var(--tak-header-height) + var(--tak-footer-height) +
+                    (var(--tak-layout-outlet-padding) * 2)
+                ) + $TAK_TABLE_PAGINATOR_HEIGHT + $TAK_TABLE_HEADER_HEIGHT +
+                $TAK_TABLE_PAGINATOR_HEIGHT + 4px
+            )
+        );
+      }
+    }
+
+    ~ .tak-table__content {
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+      max-height: calc(
+        100vh -
+          (
+            (
+                var(--tak-header-height) + var(--tak-footer-height) +
+                  (var(--tak-layout-outlet-padding) * 2)
+              ) + $TAK_TABLE_HEADER_HEIGHT + 4px
+          )
+      );
+      &.paginator-bottom {
+        max-height: calc(
+          100vh -
+            (
+              (
+                  var(--tak-header-height) + var(--tak-footer-height) +
+                    (var(--tak-layout-outlet-padding) * 2)
+                ) + $TAK_TABLE_PAGINATOR_HEIGHT + $TAK_TABLE_HEADER_HEIGHT + 4px
+            )
+        );
+      }
+      ~ .tak-table__paginator {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+        border-bottom-left-radius: $TAK_TABLE_BORDER_RADIUS;
+        border-bottom-right-radius: $TAK_TABLE_BORDER_RADIUS;
+        & > mat-paginator {
+          border-top-left-radius: 0px;
+          border-top-right-radius: 0px;
+          border-bottom-left-radius: $TAK_TABLE_BORDER_RADIUS;
+          border-bottom-right-radius: $TAK_TABLE_BORDER_RADIUS;
+        }
+      }
+    }
+    ~ .tak-table__paginator {
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+    }
+    ~ .tak-table__paginator ~ .tak-table__content {
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+      max-height: calc(
+        100vh -
+          (
+            (
+                var(--tak-header-height) + var(--tak-footer-height) +
+                  (var(--tak-layout-outlet-padding) * 2)
+              ) + $TAK_TABLE_PAGINATOR_HEIGHT + $TAK_TABLE_HEADER_HEIGHT + 4px
+          )
+      );
+    }
+  }
+  &__sub-header {
+    font-family: Roboto, sans-serif;
+    height: $TAK_TABLE_PAGINATOR_HEIGHT;
+    background-color: var(--tak-paginator-container-background-color);
+  }
+  &__paginator {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--tak-paginator-container-background-color);
+    align-items: center;
+    border-top-left-radius: $TAK_TABLE_BORDER_RADIUS;
+    border-top-right-radius: $TAK_TABLE_BORDER_RADIUS;
+    & > mat-paginator {
+      border-top-left-radius: $TAK_TABLE_BORDER_RADIUS;
+      border-top-right-radius: $TAK_TABLE_BORDER_RADIUS;
+    }
+    ~ .tak-table__content {
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+      max-height: calc(
+        100vh -
+          (
+            (
+                var(--tak-header-height) + var(--tak-footer-height) +
+                  (var(--tak-layout-outlet-padding) * 2)
+              ) + $TAK_TABLE_PAGINATOR_HEIGHT + 4px
+          )
+      );
+    }
+  }
+  &__content {
+    border-radius: $TAK_TABLE_BORDER_RADIUS;
+    &.paginator-bottom {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+      max-height: calc(
+        100vh -
+          (
+            (
+                var(--tak-header-height) + var(--tak-footer-height) +
+                  (var(--tak-layout-outlet-padding) * 2)
+              ) + $TAK_TABLE_PAGINATOR_HEIGHT + 4px
+          )
+      );
+    }
+    overflow: auto;
+    max-height: calc(
+      100vh -
+        (
+          (
+              var(--tak-header-height) + var(--tak-footer-height) +
+                (var(--tak-layout-outlet-padding) * 2)
+            ) + 2px
+        )
+    );
+    table {
+      width: 100%;
+      .mat-row {
+        height: 30px;
+      }
+      [mat-row].unbordered .mat-cell {
+        border: none;
+      }
+      [mat-row].selectable {
+        &:hover {
+          background-color: var(--tak-table-selectable-hover-color);
+          cursor: pointer;
+          transition: ease 0.3s;
+        }
+      }
+    }
+    &,
+    table {
+      border-radius: $TAK_TABLE_BORDER_RADIUS;
+    }
+  }
+  &-expandible-row {
+    height: 0px !important;
+  }
+}
+
+.mat-paginator .mat-paginator-outer-container {
+  border: none;
+}

package/assets/components/_tabs.scss

@@ -0,0 +1,7 @@
+.mat-tab-label.mat-tab-disabled {
+  color: var(--tak-dark-color-700) !important;
+}
+.tak-disabled-tab .mat-tab-group .mat-ink-bar,
+.mat-tab-group.not-ink-bar .mat-ink-bar {
+  background-color: transparent !important;
+}

package/assets/components/main.scss

@@ -0,0 +1,25 @@
+@import 'buttons';
+@import 'cards';
+@import 'dialogs';
+@import 'fields';
+@import 'material';
+@import 'pretty-box';
+@import 'scroll-bar';
+@import 'snack-bar';
+@import 'tables';
+@import 'tabs';
+
+.cdk-overlay-dark-backdrop {
+  backdrop-filter: blur(3px);
+}
+
+.mat-menu-panel {
+  color: var(--tak-layout-dark-color);
+}
+
+.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled='true']),
+.mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled='true']),
+.mat-expansion-panel:not(.mat-expanded)
+  .mat-expansion-panel-header:hover:not([aria-disabled='true']) {
+  background: transparent;
+}

package/assets/fonts/body/style-font.scss

@@ -0,0 +1,40 @@
+/*!
+ * StyleFont: Body Commerce
+ * development: Daniel Andres Castillo Pedroza
+ * https://material.softtion.com.co
+ */
+
+@font-face {
+  font-family: 'bodycommerce';
+  font-style: normal;
+  font-weight: 300;
+  src: url('Transpass-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'bodycommerce';
+  font-style: normal;
+  font-weight: 400;
+  src: url('Transpass-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'bodycommerce';
+  font-style: normal;
+  font-weight: 500;
+  src: url('Transpass-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'bodycommerce';
+  font-style: normal;
+  font-weight: 600;
+  src: url('Transpass-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'bodycommerce';
+  font-style: normal;
+  font-weight: 700;
+  src: url('Transpass-Bold.ttf') format('truetype');
+}

package/assets/fonts/main.scss

@@ -0,0 +1,2 @@
+@import 'body/style-font';
+@import 'title/style-font';

package/assets/fonts/title/style-font.scss

@@ -0,0 +1,39 @@
+/*!
+ * StyleFont: Title Commerce
+ * development: Daniel Andres Castillo Pedroza
+ * https://material.softtion.com.co
+ */
+@font-face {
+  font-family: 'titlecommerce';
+  font-style: normal;
+  font-weight: 300;
+  src: url('Poppins-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'titlecommerce';
+  font-style: normal;
+  font-weight: 400;
+  src: url('Poppins-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'titlecommerce';
+  font-style: normal;
+  font-weight: 500;
+  src: url('Poppins-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'titlecommerce';
+  font-style: normal;
+  font-weight: 600;
+  src: url('Poppins-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'titlecommerce';
+  font-style: normal;
+  font-weight: 700;
+  src: url('Poppins-Bold.ttf') format('truetype');
+}

package/assets/layouts/_loader.scss

@@ -0,0 +1,71 @@
+.tak-double-bounce1 {
+  background: var(--tak-loader-double-bounce1);
+}
+.tak-double-bounce2 {
+  background: var(--tak-loader-double-bounce2);
+}
+.tak-double-bounce1,
+.tak-double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: takSkBounce 2s infinite ease-in-out;
+}
+.tak-double-bounce2 {
+  animation-delay: -1s;
+}
+.tak-app-loader,
+.tak-view-loader {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+}
+.tak-loader-spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: auto;
+}
+.tak-double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.tak-view-loader {
+  display: block;
+  background: var(--tak-loader-overlay-backdrop-background-color);
+  z-index: 998;
+  max-height: calc(100vh);
+  margin: auto;
+  display: flex;
+}
+.tak-view-loader * {
+  margin: auto;
+}
+@-webkit-keyframes takSkBounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes takSkBounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}