@sd-angular/core 19.0.12 → 19.0.14

package/assets/scss/core/utilities/_typography.scss

@@ -1,99 +1,99 @@
-// --------------------------------------------------------------------------
-// SCSS variables — dùng nội bộ trong scss, không output CSS
-//   Đặt tên theo thang đọc được: fw = font-weight, fs = font-size
-// --------------------------------------------------------------------------
-$fw-lighter: 400;
-$fw-normal:  500;
-$fw-bold:    600;
-
-$fs-xs:     11.2px;
-$fs-small:  14px;
-$fs-normal: 16px;
-$fs-regular: 18px;
-$fs-medium: 21px;
-$fs-large:  24px;
-$fs-xl:     28px;
-$fs-xxl:    38px;
-$fs-xxxl:   42px;
-
-// --------------------------------------------------------------------------
-// Design token classes — hệ thống typography của SD Angular
-//   Quy ước: T{size}{weight}  |  M = Medium (500), R = Regular (400)
-//   Mỗi class bao gồm font-size + font-weight + line-height chuẩn hóa
-// --------------------------------------------------------------------------
-.T48M { font-size: 48px; font-weight: 500; line-height: 56px; }
-.T48R { font-size: 48px; font-weight: 400; line-height: 56px; }
-
-.T32M { font-size: 32px; font-weight: 500; line-height: 48px; }
-.T32R { font-size: 32px; font-weight: 400; line-height: 48px; }
-
-.T24M { font-size: 24px; font-weight: 500; line-height: 28px; }
-.T24R { font-size: 20px; font-weight: 400; line-height: 28px; }
-
-.T20M { font-size: 20px; font-weight: 500; line-height: 28px; }
-.T20R { font-size: 20px; font-weight: 400; line-height: 28px; }
-
-.T18M { font-size: 18px; font-weight: 500; line-height: 28px; }
-.T18R { font-size: 18px; font-weight: 400; line-height: 28px; }
-
-.T16M { font-size: 16px; font-weight: 500; line-height: 24px; }
-.T16R { font-size: 16px; font-weight: 400; line-height: 24px; }
-
-.T14M { font-size: 14px; font-weight: 500; line-height: 20px; }
-.T14R { font-size: 14px; font-weight: 400; line-height: 20px; }
-
-.T12M { font-size: 12px; font-weight: 500; line-height: 16px; }
-// !important vì T12R thường bị override bởi material components
-.T12R { font-size: 12px !important; font-weight: 400; line-height: 16px; }
-
-.T10M { font-size: 10px; font-weight: 500; line-height: 12px; }
-.T10R { font-size: 10px; font-weight: 400; line-height: 12px; }
-
-// --------------------------------------------------------------------------
-// Font-size utilities  (px-based, 0–200)
-//   fs-0 … fs-200 — dùng khi cần ghi đè nhanh, không dùng thay token
-// --------------------------------------------------------------------------
-@for $i from 0 through 200 {
-  .fs-#{$i} { font-size: #{$i}px !important; }
-}
-
-// --------------------------------------------------------------------------
-// Font-weight utilities
-// --------------------------------------------------------------------------
-.font-weight-light   { font-weight: 300 !important; }
-.font-weight-normal  { font-weight: 400 !important; }
-.font-weight-medium  { font-weight: 500 !important; }
-.font-weight-bold    { font-weight: 600 !important; }
-.font-weight-bolder  { font-weight: 700 !important; }
-
-// --------------------------------------------------------------------------
-// Text alignment
-// --------------------------------------------------------------------------
-.text-left    { text-align: left !important; }
-.text-center  { text-align: center !important; }
-.text-right   { text-align: right !important; }
-.text-justify { text-align: justify !important; }
-
-// --------------------------------------------------------------------------
-// Text wrapping & overflow
-// --------------------------------------------------------------------------
-.text-wrap   { white-space: normal !important; }
-.text-nowrap { white-space: nowrap !important; }
-.text-ellipsis {
-  // Hiển thị "..." khi text tràn — cần container có width cố định
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-}
-.text-break {
-  // Xuống dòng từng ký tự khi tràn — dùng cho URL, hash, code dài
-  overflow-wrap: break-word !important;
-  word-break: break-word !important;
-}
-
-// --------------------------------------------------------------------------
-// Text transform
-// --------------------------------------------------------------------------
-.text-uppercase  { text-transform: uppercase !important; }
-.text-lowercase  { text-transform: lowercase !important; }
-.text-capitalize { text-transform: capitalize !important; }
+// --------------------------------------------------------------------------
+// SCSS variables — dùng nội bộ trong scss, không output CSS
+//   Đặt tên theo thang đọc được: fw = font-weight, fs = font-size
+// --------------------------------------------------------------------------
+$fw-lighter: 400;
+$fw-normal:  500;
+$fw-bold:    600;
+
+$fs-xs:     11.2px;
+$fs-small:  14px;
+$fs-normal: 16px;
+$fs-regular: 18px;
+$fs-medium: 21px;
+$fs-large:  24px;
+$fs-xl:     28px;
+$fs-xxl:    38px;
+$fs-xxxl:   42px;
+
+// --------------------------------------------------------------------------
+// Design token classes — hệ thống typography của SD Angular
+//   Quy ước: T{size}{weight}  |  M = Medium (500), R = Regular (400)
+//   Mỗi class bao gồm font-size + font-weight + line-height chuẩn hóa
+// --------------------------------------------------------------------------
+.T48M { font-size: 48px; font-weight: 500; line-height: 56px; }
+.T48R { font-size: 48px; font-weight: 400; line-height: 56px; }
+
+.T32M { font-size: 32px; font-weight: 500; line-height: 48px; }
+.T32R { font-size: 32px; font-weight: 400; line-height: 48px; }
+
+.T24M { font-size: 24px; font-weight: 500; line-height: 28px; }
+.T24R { font-size: 20px; font-weight: 400; line-height: 28px; }
+
+.T20M { font-size: 20px; font-weight: 500; line-height: 28px; }
+.T20R { font-size: 20px; font-weight: 400; line-height: 28px; }
+
+.T18M { font-size: 18px; font-weight: 500; line-height: 28px; }
+.T18R { font-size: 18px; font-weight: 400; line-height: 28px; }
+
+.T16M { font-size: 16px; font-weight: 500; line-height: 24px; }
+.T16R { font-size: 16px; font-weight: 400; line-height: 24px; }
+
+.T14M { font-size: 14px; font-weight: 500; line-height: 20px; }
+.T14R { font-size: 14px; font-weight: 400; line-height: 20px; }
+
+.T12M { font-size: 12px; font-weight: 500; line-height: 16px; }
+// !important vì T12R thường bị override bởi material components
+.T12R { font-size: 12px !important; font-weight: 400; line-height: 16px; }
+
+.T10M { font-size: 10px; font-weight: 500; line-height: 12px; }
+.T10R { font-size: 10px; font-weight: 400; line-height: 12px; }
+
+// --------------------------------------------------------------------------
+// Font-size utilities  (px-based, 0–200)
+//   fs-0 … fs-200 — dùng khi cần ghi đè nhanh, không dùng thay token
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .fs-#{$i} { font-size: #{$i}px !important; }
+}
+
+// --------------------------------------------------------------------------
+// Font-weight utilities
+// --------------------------------------------------------------------------
+.font-weight-light   { font-weight: 300 !important; }
+.font-weight-normal  { font-weight: 400 !important; }
+.font-weight-medium  { font-weight: 500 !important; }
+.font-weight-bold    { font-weight: 600 !important; }
+.font-weight-bolder  { font-weight: 700 !important; }
+
+// --------------------------------------------------------------------------
+// Text alignment
+// --------------------------------------------------------------------------
+.text-left    { text-align: left !important; }
+.text-center  { text-align: center !important; }
+.text-right   { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+// --------------------------------------------------------------------------
+// Text wrapping & overflow
+// --------------------------------------------------------------------------
+.text-wrap   { white-space: normal !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-ellipsis {
+  // Hiển thị "..." khi text tràn — cần container có width cố định
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+.text-break {
+  // Xuống dòng từng ký tự khi tràn — dùng cho URL, hash, code dài
+  overflow-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+// --------------------------------------------------------------------------
+// Text transform
+// --------------------------------------------------------------------------
+.text-uppercase  { text-transform: uppercase !important; }
+.text-lowercase  { text-transform: lowercase !important; }
+.text-capitalize { text-transform: capitalize !important; }

package/assets/scss/sd-core.scss

@@ -1,17 +1,17 @@
-@use '../fonts/fonts.scss';
-@use './core/utilities/base';  // Reset / Reboot — phải load trước tất cả
-@use './core/utilities';
-@use './core/color.scss';
-@use './core/form.scss';
-@use './core/image.scss';
-@use './core/scrollbar.scss';
-@use './themes/default.scss';
-@use './themes/material-theme.scss';
-
-html {
-  @include default.theme(default.$default-theme);
-}
-
-html, body {
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
+@use '../fonts/fonts.scss';
+@use './core/utilities/base';  // Reset / Reboot — phải load trước tất cả
+@use './core/utilities';
+@use './core/color.scss';
+@use './core/form.scss';
+@use './core/image.scss';
+@use './core/scrollbar.scss';
+@use './themes/default.scss';
+@use './themes/material-theme.scss';
+
+html {
+  @include default.theme(default.$default-theme);
+}
+
+html, body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
 }

package/assets/scss/themes/default.scss

@@ -1,45 +1,45 @@
-@use "sass:map";
-@use "../core/color";
-
-$default-theme: (
-  primary: #2A66F4,
-  primary-light: #EAF1FF,
-  primary-dark: #1C4AD9,
-  info: #2962FF,
-  info-light: #E7E9FF,
-  info-dark: #2240CC,
-  success: #4CAF50,
-  success-light: #DBEFDC,
-  success-dark: #39833C,
-  warning: #FF9600,
-  warning-light: #FFEACC,
-  warning-dark: #BF7000,
-  error: #F82C13,
-  error-light: #FED5D0,
-  error-dark: #BA200E,
-  secondary: #212121,
-  secondary-light: #E9E9E9,
-  secondary-dark: #000000,
-  light: #f8f9fa,
-  dark: #343a40,
-  black500: #212121,
-  black400: #757575,
-  black300: #BFBFBF,
-  black200: #E6E6E6,
-  black100: #F2F2F2,
-);
-
-// Can thiệp màu của Suffix/Prefix khi có lỗi
-// Chỉ áp dụng cho các component có hỗ trợ trailing icon
-:root {
-  --mat-form-field-error-trailing-icon-color: #{map.get($default-theme, 'error')};
-  --mat-form-field-error-hover-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
-  --mat-form-field-error-focus-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
-}
-
-@mixin theme($theme) {
-  $theme: map.merge($default-theme, $theme);
-  @each $color in color.$system-colors {
-    --sd-#{$color}: #{map.get($theme, $color)};
-  }
-}
+@use "sass:map";
+@use "../core/color";
+
+$default-theme: (
+  primary: #2A66F4,
+  primary-light: #EAF1FF,
+  primary-dark: #1C4AD9,
+  info: #2962FF,
+  info-light: #E7E9FF,
+  info-dark: #2240CC,
+  success: #4CAF50,
+  success-light: #DBEFDC,
+  success-dark: #39833C,
+  warning: #FF9600,
+  warning-light: #FFEACC,
+  warning-dark: #BF7000,
+  error: #F82C13,
+  error-light: #FED5D0,
+  error-dark: #BA200E,
+  secondary: #212121,
+  secondary-light: #E9E9E9,
+  secondary-dark: #000000,
+  light: #f8f9fa,
+  dark: #343a40,
+  black500: #212121,
+  black400: #757575,
+  black300: #BFBFBF,
+  black200: #E6E6E6,
+  black100: #F2F2F2,
+);
+
+// Can thiệp màu của Suffix/Prefix khi có lỗi
+// Chỉ áp dụng cho các component có hỗ trợ trailing icon
+:root {
+  --mat-form-field-error-trailing-icon-color: #{map.get($default-theme, 'error')};
+  --mat-form-field-error-hover-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
+  --mat-form-field-error-focus-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
+}
+
+@mixin theme($theme) {
+  $theme: map.merge($default-theme, $theme);
+  @each $color in color.$system-colors {
+    --sd-#{$color}: #{map.get($theme, $color)};
+  }
+}

package/assets/scss/themes/material-theme.scss

@@ -1,101 +1,101 @@
-@use '@angular/material' as mat;
-@use './default.scss' as default;
-@use 'sass:map';
-
-// --------------------------------------------------
-// Palette M2 — generated từ hex color
-// --------------------------------------------------
-$custom-primary-palette: mat.m2-define-palette(
-  (
-    50: #f0f1f5,
-    100: #d7dcea,
-    200: #abbce3,
-    300: #6e90e3,
-    400: #346aea,
-    500: #2a66f4,
-    600: #0645db,
-    700: #0131a3,
-    800: #00216d,
-    900: #001546,
-    contrast: (
-      400: white,
-      500: white,
-      600: white,
-      700: white,
-      800: white,
-      900: white,
-    ),
-  )
-);
-
-$custom-accent-palette: mat.m2-define-palette(
-  (
-    50: #f1f3f1,
-    100: #dce5dd,
-    200: #bbd3bc,
-    300: #8fc291,
-    400: #67b76a,
-    500: #4caf50,
-    600: #3a8c3d,
-    700: #29692c,
-    800: #1c471e,
-    900: #132f14,
-    contrast: (
-      700: white,
-      800: white,
-      900: white,
-    ),
-  )
-);
-
-$custom-warn-palette: mat.m2-define-palette(
-  (
-    50: #f5f0f0,
-    100: #ead9d6,
-    200: #e4b0aa,
-    300: #e6786b,
-    400: #ee4430,
-    500: #f82c13,
-    600: #d11801,
-    700: #9a1100,
-    800: #680b00,
-    900: #440700,
-    contrast: (
-      600: white,
-      700: white,
-      800: white,
-      900: white,
-    ),
-  )
-);
-
-// --------------------------------------------------
-// Theme
-// --------------------------------------------------
-$custom-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $custom-primary-palette,
-      accent: $custom-accent-palette,
-      warn: $custom-warn-palette,
-    ),
-    density: -3,
-  )
-);
-
-@include mat.all-component-themes($custom-theme);
-
-// Fix paginator density riêng về 0 để không bị lệch
-html {
-  @include mat.theme(
-    (
-      color: (
-        theme-type: light,
-        primary: mat.$azure-palette,
-        tertiary: mat.$blue-palette,
-      ),
-      typography: Roboto,
-      density: 0,
-    )
-  );
-}
+@use '@angular/material' as mat;
+@use './default.scss' as default;
+@use 'sass:map';
+
+// --------------------------------------------------
+// Palette M2 — generated từ hex color
+// --------------------------------------------------
+$custom-primary-palette: mat.m2-define-palette(
+  (
+    50: #f0f1f5,
+    100: #d7dcea,
+    200: #abbce3,
+    300: #6e90e3,
+    400: #346aea,
+    500: #2a66f4,
+    600: #0645db,
+    700: #0131a3,
+    800: #00216d,
+    900: #001546,
+    contrast: (
+      400: white,
+      500: white,
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+    ),
+  )
+);
+
+$custom-accent-palette: mat.m2-define-palette(
+  (
+    50: #f1f3f1,
+    100: #dce5dd,
+    200: #bbd3bc,
+    300: #8fc291,
+    400: #67b76a,
+    500: #4caf50,
+    600: #3a8c3d,
+    700: #29692c,
+    800: #1c471e,
+    900: #132f14,
+    contrast: (
+      700: white,
+      800: white,
+      900: white,
+    ),
+  )
+);
+
+$custom-warn-palette: mat.m2-define-palette(
+  (
+    50: #f5f0f0,
+    100: #ead9d6,
+    200: #e4b0aa,
+    300: #e6786b,
+    400: #ee4430,
+    500: #f82c13,
+    600: #d11801,
+    700: #9a1100,
+    800: #680b00,
+    900: #440700,
+    contrast: (
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+    ),
+  )
+);
+
+// --------------------------------------------------
+// Theme
+// --------------------------------------------------
+$custom-theme: mat.m2-define-light-theme(
+  (
+    color: (
+      primary: $custom-primary-palette,
+      accent: $custom-accent-palette,
+      warn: $custom-warn-palette,
+    ),
+    density: -3,
+  )
+);
+
+@include mat.all-component-themes($custom-theme);
+
+// Fix paginator density riêng về 0 để không bị lệch
+html {
+  @include mat.theme(
+    (
+      color: (
+        theme-type: light,
+        primary: mat.$azure-palette,
+        tertiary: mat.$blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+}