@kato-lee/components 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ejdao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# KatoLee Ng Components
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.3.
+
+## Versions
+
+`1x` Use `@kato-lee/cdk@14.2.7` & `@kato-lee/material@14.2.7`.

package/assets/_fade-in.scss

@@ -0,0 +1,40 @@
+@mixin customizedTakFadeIn($size) {
+  .tak-fade-in--#{$size} {
+    animation: takFadeIn ease $size;
+    -webkit-animation: takFadeIn ease $size;
+    -moz-animation: takFadeIn ease $size;
+    -o-animation: takFadeIn ease $size;
+    -ms-animation: takFadeIn ease $size;
+  }
+}
+
+@keyframes takFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes takFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes takFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@include customizedTakFadeIn(300ms);
+@include customizedTakFadeIn(500ms);
+@include customizedTakFadeIn(800ms);

package/assets/_fields.scss

@@ -0,0 +1,76 @@
+.tak {
+  &-custom-error {
+    font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: var(--tak-form-field-error-color);
+  }
+  &-hint {
+    color: var(--tak-form-field-hint-color);
+  }
+  &__date-not-input {
+    input {
+      display: none !important;
+    }
+    &__picker-container {
+      margin-top: 5px;
+    }
+    &__field-container {
+      margin-top: -18px;
+      & .mat-form-field {
+        visibility: hidden;
+        width: 1px !important;
+        font-size: 1px !important;
+      }
+    }
+  }
+  &-form-container {
+    mat-form-field {
+      width: calc(100% - 10px);
+    }
+    .money-input {
+      font-weight: bolder !important;
+    }
+    .mat-form-field-invalid {
+      .tak-hint {
+        color: var(--tak-form-field-error-color) !important;
+      }
+      .mat-text-field-wrapper {
+        .mat-floating-label,
+        .mat-floating-label:hover,
+        .mat-form-field-icon-suffix,
+        .mat-text-field,
+        .mat-text-field__input,
+        .mat-button-ripple {
+          color: var(--tak-form-field-error-color) !important;
+        }
+        & .mat-form-field-flex .mat-datepicker-toggle .mat-icon-button {
+          color: var(--tak-form-field-error-color) !important;
+        }
+      }
+      .mat-text-field--filled:not(.mat-text-field--disabled) {
+        .mat-line-ripple::before,
+        .mat-line-ripple::after,
+        .mat-line-ripple:hover {
+          border-bottom-color: var(--tak-form-field-error-color) !important;
+        }
+      }
+    }
+  }
+  &-autocomplete-not-records {
+    color: var(--tak-form-field-error-color);
+  }
+}
+
+.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label,
+.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused
+  .mat-floating-label--float-above {
+  .mat-form-field-required-marker,
+  .tak-field__danger-x {
+    color: var(--tak-form-field-error-color) !important;
+  }
+}
+
+.tak__date-not-input__picker-container.mat-form-field-invalid
+  .mat-datepicker-toggle
+  .mat-icon-button {
+  color: var(--tak-form-field-error-color) !important;
+}

package/assets/_grids.scss

@@ -0,0 +1,317 @@
+* > .container,
+* > .container-fluid {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+* > .container:before,
+* > .container:after,
+* > .container-fluid:before,
+* > .container-fluid:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after {
+  display: table;
+  content: ' ';
+}
+.container:after,
+.container-fluid:after,
+.row:after {
+  clear: both;
+}
+.container,
+.container-fluid {
+  width: 100%;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
+  margin-right: auto;
+  margin-left: auto;
+}
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+}
+.row > * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+.row.no-padding [class*='col-'] {
+  padding: 0;
+}
+
+@mixin customizedGrids($size) {
+  .#{$size}-0 {
+    width: 0% !important;
+  }
+
+  .#{$size}-2-5 {
+    width: 2.5% !important;
+  }
+
+  .#{$size}-5 {
+    width: 5% !important;
+  }
+
+  .#{$size}-7-5 {
+    width: 7.5% !important;
+  }
+
+  .#{$size}-10 {
+    width: 10% !important;
+  }
+
+  .#{$size}-12-5 {
+    width: 12.5% !important;
+  }
+
+  .#{$size}-15 {
+    width: 15% !important;
+  }
+
+  .#{$size}-17-5 {
+    width: 17.5% !important;
+  }
+
+  .#{$size}-20 {
+    width: 20% !important;
+  }
+
+  .#{$size}-22-5 {
+    width: 22.5% !important;
+  }
+
+  .#{$size}-25 {
+    width: 25% !important;
+  }
+
+  .#{$size}-27-5 {
+    width: 27.5% !important;
+  }
+
+  .#{$size}-30 {
+    width: 30% !important;
+  }
+
+  .#{$size}-32-5 {
+    width: 32.5% !important;
+  }
+
+  .#{$size}-35 {
+    width: 35% !important;
+  }
+
+  .#{$size}-37-5 {
+    width: 37.5% !important;
+  }
+
+  .#{$size}-40 {
+    width: 40% !important;
+  }
+
+  .#{$size}-42-5 {
+    width: 42.5% !important;
+  }
+
+  .#{$size}-45 {
+    width: 45% !important;
+  }
+
+  .#{$size}-47-5 {
+    width: 47.5% !important;
+  }
+
+  .#{$size}-50 {
+    width: 50% !important;
+  }
+
+  .#{$size}-52-5 {
+    width: 52.5% !important;
+  }
+
+  .#{$size}-55 {
+    width: 55% !important;
+  }
+
+  .#{$size}-57-5 {
+    width: 57.5% !important;
+  }
+
+  .#{$size}-60 {
+    width: 60% !important;
+  }
+
+  .#{$size}-62-5 {
+    width: 62.5% !important;
+  }
+
+  .#{$size}-65 {
+    width: 65% !important;
+  }
+
+  .#{$size}-67-5 {
+    width: 67.5% !important;
+  }
+
+  .#{$size}-70 {
+    width: 70% !important;
+  }
+
+  .#{$size}-72-5 {
+    width: 72.5% !important;
+  }
+
+  .#{$size}-75 {
+    width: 75% !important;
+  }
+
+  .#{$size}-77-5 {
+    width: 77.5% !important;
+  }
+
+  .#{$size}-80 {
+    width: 80% !important;
+  }
+
+  .#{$size}-82-5 {
+    width: 82.5% !important;
+  }
+
+  .#{$size}-85 {
+    width: 85% !important;
+  }
+
+  .#{$size}-87-5 {
+    width: 87.5% !important;
+  }
+
+  .#{$size}-90 {
+    width: 90% !important;
+  }
+
+  .#{$size}-92-5 {
+    width: 92.5% !important;
+  }
+
+  .#{$size}-95 {
+    width: 95% !important;
+  }
+
+  .#{$size}-97-5 {
+    width: 97.5% !important;
+  }
+
+  .#{$size}-100 {
+    width: 100% !important;
+  }
+}
+
+@mixin bootstrapGrids($size) {
+  .#{$size}-1 {
+    width: 8.33333333% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-2 {
+    width: 16.66666667% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-3 {
+    width: 25% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-4 {
+    width: 33.33333333% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-5 {
+    width: 41.66666667% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-6 {
+    width: 50% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-7 {
+    width: 58.33333333% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-8 {
+    width: 66.66666667% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-9 {
+    width: 75% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-10 {
+    width: 83.33333333% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-11 {
+    width: 91.66666667% !important;
+    flex: 0 0 auto;
+  }
+  .#{$size}-12 {
+    width: 100% !important;
+    flex: 0 0 auto;
+  }
+}
+
+@mixin display($size) {
+  .#{$size}-none {
+    display: none !important;
+  }
+  .#{$size}-block {
+    display: block !important;
+  }
+}
+
+@include customizedGrids(col);
+@include bootstrapGrids(col-t);
+@include display(d);
+
+@media only screen and (min-width: $SM_RESOLUTION) {
+  @include customizedGrids(col-sm);
+  @include bootstrapGrids(col-t-sm);
+  @include display(d-sm);
+}
+
+@media only screen and (min-width: $MD_RESOLUTION) {
+  @include customizedGrids(col-md);
+  @include bootstrapGrids(col-t-md);
+  @include display(d-md);
+}
+
+@media only screen and (min-width: $LG_RESOLUTION) {
+  @include customizedGrids(col-lg);
+  @include bootstrapGrids(col-t-lg);
+  @include display(d-lg);
+}
+
+@media only screen and (min-width: $XL_RESOLUTION) {
+  @include customizedGrids(col-xl);
+  @include bootstrapGrids(col-t-xl);
+  @include display(d-xl);
+}
+
+@media only screen and (min-width: $XXL_RESOLUTION) {
+  @include customizedGrids(col-xxl);
+  @include bootstrapGrids(col-t-xxl);
+  @include display(d-xxl);
+}

package/assets/components/_buttons.scss

@@ -0,0 +1,3 @@
+button[mat-button] {
+  font-weight: bolder;
+}

package/assets/components/_cards.scss

@@ -0,0 +1,26 @@
+.tak-simple-card {
+  border-bottom: solid 1px var(--tak-card-border-color);
+  border-right: solid 1px var(--tak-card-border-color);
+  border-left: solid 1px var(--tak-card-border-color);
+  box-shadow: var(--tak-card-box-shadow);
+  background-color: var(--tak-card-background-color);
+  border-radius: 0 0 5px 5px;
+  text-overflow: ellipsis;
+  margin-bottom: 10px;
+  overflow: hidden;
+  min-height: 20px;
+  padding: 10px;
+  &--topline {
+    border-right: solid 1px var(--tak-card-border-color);
+    border-left: solid 1px var(--tak-card-border-color);
+    border-top: solid 1px var(--tak-card-border-color);
+    box-shadow: var(--tak-card-box-shadow);
+    background-color: var(--tak-card-default-top-color);
+    border-radius: 5px 5px 0 0;
+    padding: 3px;
+  }
+  &.no-card-topline {
+    border-radius: 5px !important;
+    border-top: 1px solid var(--tak-card-border-color) !important;
+  }
+}

package/assets/components/_dialogs.scss

@@ -0,0 +1,13 @@
+.tak-modal {
+  &__top-container--custom {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &--title {
+      font-family: Roboto, sans-serif;
+      font-weight: normal;
+      font-size: 20px;
+    }
+  }
+}

package/assets/components/_fields.scss

@@ -0,0 +1,110 @@
+.tak {
+  &-custom-error {
+    text-align: left;
+    margin-left: 5px;
+    font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: var(--tak-form-field-error-color);
+    font-size: 12px;
+  }
+  &-hint {
+    color: var(--tak-form-field-hint-color);
+  }
+  &__date-not-input {
+    input {
+      display: none !important;
+    }
+    &__picker-container {
+      margin-top: 5px;
+    }
+    &__field-container {
+      margin-top: -18px;
+      & .mat-form-field {
+        visibility: hidden;
+        width: 1px !important;
+        font-size: 1px !important;
+      }
+    }
+  }
+  &-form-container {
+    mat-form-field {
+      width: calc(100% - 10px);
+    }
+
+    .money-input {
+      font-weight: bolder !important;
+    }
+    .mat-form-field-invalid {
+      .tak-hint {
+        color: var(--tak-form-field-error-color) !important;
+      }
+      .mat-text-field-wrapper {
+        .mat-floating-label,
+        .mat-floating-label:hover,
+        .mat-form-field-icon-suffix,
+        .mat-text-field,
+        .mat-text-field__input,
+        .mat-button-ripple {
+          color: var(--tak-form-field-error-color) !important;
+        }
+        & .mat-form-field-flex .mat-datepicker-toggle .mat-icon-button {
+          color: var(--tak-form-field-error-color) !important;
+        }
+      }
+      .mat-text-field--filled:not(.mat-text-field--disabled) {
+        .mat-line-ripple::before,
+        .mat-line-ripple::after,
+        .mat-line-ripple:hover {
+          border-bottom-color: var(--tak-form-field-error-color) !important;
+        }
+      }
+      .mat-notched-outline__leading {
+        border-color: var(--tak-form-field-error-color) !important;
+      }
+      .mat-notched-outline__notch {
+        border-top-color: var(--tak-form-field-error-color) !important;
+        border-bottom-color: var(--tak-form-field-error-color) !important;
+      }
+      .mat-notched-outline__trailing {
+        border-color: var(--tak-form-field-error-color) !important;
+      }
+    }
+  }
+  &-autocomplete-not-records {
+    color: var(--tak-form-field-error-color);
+  }
+  &-option-span-extra {
+    color: gray;
+    &::before {
+      content: '\A';
+      white-space: pre;
+    }
+  }
+}
+
+.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused .mat-floating-label,
+.mat-text-field--filled:not(.mat-text-field--disabled).mat-text-field--focused
+  .mat-floating-label--float-above {
+  .mat-form-field-required-marker,
+  .tak-field__danger-x {
+    color: var(--tak-form-field-error-color) !important;
+  }
+}
+
+.tak__date-not-input__picker-container.mat-form-field-invalid
+  .mat-datepicker-toggle
+  .mat-icon-button {
+  color: var(--tak-form-field-error-color) !important;
+}
+mat-option {
+  line-height: 20px !important;
+}
+mat-form-field {
+  width: 100%;
+}
+
+.mat-option-text {
+  font-size: 14px;
+}
+.mat-select-panel .mat-option {
+  height: 30px !important;
+}

package/assets/components/_material.scss

@@ -0,0 +1,15 @@
+.mat-select-panel .mat-option {
+  font-size: 14px;
+  line-height: 17px;
+  min-height: 36px;
+}
+.mat-option {
+  .mat-pseudo-checkbox-minimal {
+    display: none !important;
+  }
+  .mat-list-item__primary-text {
+    white-space: nowrap !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/assets/components/_pretty-box.scss

@@ -0,0 +1,41 @@
+.tak-pretty-box {
+  &--header {
+    width: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    border: 1px solid var(--tak-pretty-box-border-color);
+    border-bottom: 0px transparent;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  &--scroll {
+    width: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    border: 1px solid var(--tak-pretty-box-border-color);
+  }
+  &--footer {
+    width: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    border: 1px solid var(--tak-pretty-box-border-color);
+    border-top: 0px transparent;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  &-border-top {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  &-border-bottom {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+}
+[tak-pretty-box-header],
+[tak-pretty-box-content],
+[tak-pretty-box-footer] {
+  padding: 0 10px 0 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

package/assets/components/_scroll-bar.scss

@@ -0,0 +1,23 @@
+@media only screen and (min-width: calc($MOBILE_RESOLUTION)) {
+  .tak-admin-layout > .tak-container,
+  .tak-sidebar__container,
+  .tak-box-form__scroll,
+  .tak-table__content,
+  .tak-pretty-box--scroll,
+  .tak-pretty-box--header,
+  .tak-pretty-box--footer,
+  .mat-select-panel,
+  .mat-autocomplete-panel,
+  textarea,
+  .mat-dialog-content {
+    &::-webkit-scrollbar {
+      background-color: rgba(192, 192, 192, 0.072);
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(192, 192, 192, 0.562);
+      border-radius: 10px;
+    }
+  }
+}