@sdcorejs/angular 19.0.0-rc.1

package/assets/scss/core/color.scss

@@ -0,0 +1,74 @@
+@use 'sass:map';
+
+$system-colors: 
+'primary',
+'primary-light',
+'primary-dark',
+'info',
+'info-light',
+'info-dark',
+'success',
+'success-light',
+'success-dark',
+'warning',
+'warning-light',
+'warning-dark', 
+'error',
+'error-light',
+'error-dark',
+'secondary',
+'secondary-light',
+'secondary-dark', 
+'light',
+'dark',
+'black500',
+'black400',
+'black300',
+'black200',
+'black100';
+
+@function create_var_map($colors) {
+  $var-map: ();
+  @each $color in $colors {
+    $var-name: $color;
+    $var-value: var(--sd-#{$var-name});
+    $var-map: map.merge($var-map, ($color: $var-value));
+  }
+  @return $var-map;
+}
+
+
+$color_map: create_var_map($system-colors);
+$basic_color_map: (
+  'white': #FFF,
+  'black': #000,
+);
+
+$disabled-bg: map.get($color-map, 'black100');
+$disabled-text: map.get($color-map, 'black400');
+
+@each $color, $value in map.merge($color_map, $basic_color_map) {
+  // Text
+  .text-#{$color} {
+    color: $value !important;
+  }
+  // Background
+  .bg-#{$color} {
+    background: $value !important;
+  }
+  // Border
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+// $colorLights: $primary-light, $secondary-light, $info-light, $success-light, $warning-light, $error-light;
+// @each $color in $colorLights {
+//   // Text
+//   .text-#{$color} {
+//     color: $color;
+//   }
+//   // Background
+//   .bg-#{$color} {
+//     background: $color;
+//   }
+// }

package/assets/scss/core/form.scss

@@ -0,0 +1,302 @@
+@use './color.scss' as color;
+@use 'sass:map';
+
+// Form field
+.mat-mdc-form-field {
+  font-size: 16px;
+  width: 100%;
+
+  // Xử lý tô màu required
+  .mat-mdc-form-field-required-marker {
+    color: map.get(color.$color_map, 'error');
+  }
+
+  // Xử lý màu border nhạt bớt
+  .mat-mdc-notch-piece {
+    &.mdc-notched-outline__leading {
+      border-color: map.get(color.$color_map, 'black200') !important;
+    }
+    &.mdc-notched-outline__notch {
+      border-top-color: map.get(color.$color_map, 'black200') !important;
+      border-bottom-color: map.get(color.$color_map, 'black200') !important;
+    }
+    &.mdc-notched-outline__trailing {
+      border-color: map.get(color.$color_map, 'black200') !important;
+    }
+  }
+
+  // Xử lý icon
+  .sd-suffix-icon {
+    color: #757575;
+    &:hover {
+      color: #616161;
+    }
+  }
+
+  // why: nút clear "thanh mảnh" dùng chung cho sd-select/sd-date/sd-datetime —
+  // hình tròn nền trong suốt, hover mới hiện nền xám + chuyển đỏ. Icon `close`
+  // (nét mảnh) thay cho `cancel` (tròn đặc, trông "mập"). Đồng bộ với sd-input-color.
+  .sd-clear-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    color: #757575;
+    transition: background-color 80ms ease, color 80ms ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.06);
+      color: map.get(color.$color_map, 'error');
+    }
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+    }
+  }
+
+  // why: biến thể hover-gate — nút clear ẩn cho tới khi hover (hoặc field đang
+  // focus, để người dùng bàn phím vẫn thấy). Dùng cho sd-input/sd-input-number/
+  // sd-input-color/sd-date/sd-datetime. KHÔNG dùng cho sd-select/sd-autocomplete
+  // vì ở đó clear thay thế icon dropdown/search nên phải luôn hiển thị.
+  .sd-clear-btn.sd-hover {
+    visibility: hidden;
+  }
+  .mat-mdc-form-field-flex:hover .sd-clear-btn.sd-hover,
+  .mat-mdc-form-field-flex:focus-within .sd-clear-btn.sd-hover {
+    visibility: visible;
+  }
+
+  // sdSuffixIcon
+  // Directive sdSuffixIcon (truyền icon từ component sử dụng vào Core)
+  .sd-suffix-icon.sd-hover {
+    visibility: hidden;
+  }
+
+  // Chỉ hiển thị khi được hover
+  .mat-mdc-form-field-flex {
+    &:hover {
+      .sd-suffix-icon.sd-hover {
+        visibility: visible;
+      }
+    }
+  }
+
+  .mat-mdc-form-field-prefix,
+  .mat-mdc-form-field-suffix {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &.mat-form-field-appearance-outline {
+    .mat-mdc-form-field-flex {
+      align-items: center;
+    }
+
+    .mat-mdc-form-field-infix {
+      mat-select.mat-mdc-select,
+      mat-date-range-input.mat-mdc-date-range-input,
+      input.mat-mdc-input-element,
+      textarea.mat-mdc-input-element {
+        font-size: 14px;
+        margin-top: 10px; // Text hiển thị trong auto complete
+      }
+    }
+
+    .mat-mdc-form-field-suffix {
+      top: 3.5px;
+    }
+
+    &.mat-mdc-form-field-type-mat-date-range-input,
+    &.c-form-field-date-input,
+    &.c-form-field-datetime-input {
+      .mdc-notched-outline__notch {
+        max-width: calc(100% - 60px);
+      }
+    }
+  }
+
+  // Bỏ padding nếu hideInlineError
+  &.hide-inline-error {
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+
+    &.mat-form-field-invalid {
+      .mat-mdc-notch-piece {
+        &.mdc-notched-outline__leading {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__notch {
+          border-top-color: map.get(color.$color_map, 'error') !important;
+          border-bottom-color: map.get(color.$color_map, 'error') !important;
+        }
+        &.mdc-notched-outline__trailing {
+          border-color: map.get(color.$color_map, 'error') !important;
+        }
+      }
+    }
+  }
+
+  // Size normal`
+  &.sd-md {
+    --mat-form-field-container-height: 40px;
+    --mat-form-field-container-vertical-padding: 3px;
+
+    &.mat-form-field-appearance-outline {
+      .mat-mdc-form-field-infix {
+        padding: 0 0 8px 0 !important;
+        border-top-width: 11.5px;
+        min-height: 43.5px;
+        width: auto;
+      }
+
+      .mat-mdc-form-field-label-wrapper {
+        font-size: 14px;
+        padding-top: 12px;
+        top: -18px;
+      }
+
+      .mat-mdc-form-field-icon-suffix {
+        top: 0;
+        right: 0;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .sd-suffix-icon,
+        .sd-error-icon {
+          height: 20px;
+          width: 20px;
+          font-size: 20px;
+          text-align: center;
+          padding: 0;
+        }
+      }
+
+      .mat-mdc-form-field-icon-prefix {
+        top: 0;
+        right: 0;
+        padding: 0 8px;
+        .sd-prefix-icon {
+          height: 20px;
+          width: 20px;
+          font-size: 20px;
+          text-align: center;
+          padding: 0;
+        }
+      }
+
+      &.mat-mdc-form-field-can-float {
+        &.mat-mdc-form-field-should-float {
+          .mat-mdc-form-field-label {
+            transform: translateY(-18px) scale(0.75);
+            width: 133.33333%;
+          }
+        }
+      }
+    }
+  }
+
+  // Size small
+  &.sd-sm {
+    --mat-form-field-container-height: 32px;
+    --mat-form-field-container-vertical-padding: 3px;
+
+    &.mat-form-field-appearance-outline {
+      .mat-mdc-form-field-infix {
+        border-top-width: 6px;
+        min-height: 32px;
+        width: auto;
+
+        mat-select.mat-mdc-select,
+        mat-date-range-input.mat-mdc-date-range-input,
+        input.mat-mdc-input-element,
+        textarea.mat-mdc-input-element {
+          margin-top: 2px; // Text hiển thị trong auto complete
+          font-size: 14px;
+        }
+      }
+
+      .mat-mdc-form-field-label-wrapper {
+        font-size: 14px;
+        padding-top: 8px;
+        top: -14px;
+      }
+
+      .mat-mdc-form-field-icon-suffix {
+        top: 0;
+        right: 0;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        .sd-suffix-icon,
+        .sd-error-icon {
+          height: 16px;
+          width: 16px;
+          font-size: 16px;
+          text-align: center;
+          padding: 0;
+        }
+      }
+
+      .mat-mdc-form-field-icon-prefix {
+        top: 0;
+        left: 0;
+        padding: 0 4px;
+
+        .sd-prefix-icon {
+          height: 16px;
+          width: 16px;
+          font-size: 16px;
+          text-align: center;
+          padding: 0;
+        }
+      }
+
+      &.mat-mdc-form-field-can-float {
+        .mat-mdc-form-field-label {
+          top: 22px;
+        }
+
+        &.mat-mdc-form-field-should-float {
+          .mat-mdc-form-field-label {
+            transform: translateY(-10px) scale(0.75);
+            width: 133.33333%;
+          }
+        }
+      }
+
+      // Fix for date range and datetime inputs with small size
+      &.c-form-field-date-input,
+      &.c-form-field-datetime-input {
+        .mdc-notched-outline__notch {
+          max-width: calc(100% - 50px);
+        }
+      }
+    }
+  }
+}
+
+// Override reboot rule `label { margin-bottom: 0.5rem }` cho mat-checkbox layout
+mat-checkbox {
+  label.mat-mdc-checkbox-layout {
+    margin-bottom: 0;
+  }
+}
+
+// Placeholder mặc định 1rem (16px), mong muốn nên là 14px
+.mat-mdc-floating-label {
+  font-size: 14px !important;
+}

package/assets/scss/core/image.scss

@@ -0,0 +1,35 @@
+// Centralized state-image classes.
+// why: previously each component referenced its own assets/*.svg via `content: url(...)`,
+// duplicating files across modules. Single source of truth here so a designer can swap
+// an asset in `assets/images/` without grepping the codebase.
+//
+// Usage:
+//   <img class="sd-image-not-found" alt="not-found" />
+// or inside ::before / ::after via @extend:
+//   &::before { @extend .sd-image-data-empty; }
+
+$sd-image-path: '../../images' !default;
+
+$sd-images: (
+  'coming-soon',
+  'data-empty',
+  'expired',
+  'file-error',
+  'filter-empty',
+  'filter-required',
+  'forbidden',
+  'image-error',
+  'maintenance',
+  'not-found',
+  'offline',
+  'submitted',
+  'success',
+  'unauthorized',
+  'unknown-error'
+);
+
+@each $name in $sd-images {
+  .sd-image-#{$name} {
+    content: url('#{$sd-image-path}/#{$name}.svg');
+  }
+}

package/assets/scss/core/scrollbar.scss

@@ -0,0 +1,30 @@
+/* scrollbar */
+/* width */
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+/* scrollbar hover*/
+/* Tăng kích thước khi hover để user dễ thao tác */
+::-webkit-scrollbar:hover {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #c5c5c5;
+  border-radius: 50px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  // background: #555555;
+  background: #c5c5c5;
+}