@sd-angular/core 19.0.0-beta.1 → 19.0.0-beta.100

package/assets/scss/core/form.scss

@@ -27,7 +27,7 @@
 
   // Xử lý icon
   .sd-suffix-icon {
-    color: #dadada;
+    color: #757575;
     &:hover {
       color: #616161;
     }
@@ -62,13 +62,11 @@
     .mat-mdc-form-field-infix {
       mat-select.mat-mdc-select,
       mat-date-range-input.mat-mdc-date-range-input,
-      input.mat-mdc-input-element {
+      input.mat-mdc-input-element,
+      textarea.mat-mdc-input-element {
         font-size: 14px;
         margin-top: 10px; // Text hiển thị trong auto complete
       }
-      textarea.mat-mdc-input-element {
-        font-size: 14px; // Font-size hiển thị trong text-area outline
-      }
     }
 
     .mat-mdc-form-field-suffix {
@@ -89,10 +87,28 @@
     .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
+  // 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;
@@ -110,9 +126,13 @@
       .mat-mdc-form-field-icon-suffix {
         top: 0;
         right: 0;
-        padding: 0 8px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
 
-        .sd-suffix-icon {
+        .sd-suffix-icon,
+        .sd-error-icon {
           height: 20px;
           width: 20px;
           font-size: 20px;
@@ -158,14 +178,10 @@
 
         mat-select.mat-mdc-select,
         mat-date-range-input.mat-mdc-date-range-input,
-        input.mat-mdc-input-element {
-          margin-top: 2px; // Text hiển thị trong auto complete
-          font-size: 14px;
-        }
-
+        input.mat-mdc-input-element,
         textarea.mat-mdc-input-element {
+          margin-top: 2px; // Text hiển thị trong auto complete
           font-size: 14px;
-          margin-top: 2px;
         }
       }
 
@@ -178,9 +194,13 @@
       .mat-mdc-form-field-icon-suffix {
         top: 0;
         right: 0;
-        padding: 0 4px;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
-        .sd-suffix-icon {
+        .sd-suffix-icon,
+        .sd-error-icon {
           height: 16px;
           width: 16px;
           font-size: 16px;

package/assets/scss/core/utilities/_base.scss

@@ -0,0 +1,333 @@
+// --------------------------------------------------------------------------
+// Base / Reboot — thay thế Bootstrap _reboot.scss
+//   Chuẩn hóa rendering giữa các browser, thiết lập baseline cho toàn bộ
+//   ứng dụng. Không phụ thuộc Bootstrap variables hay mixins.
+//
+//   Nguồn tham khảo: Bootstrap 4 reboot + modern-normalize
+// --------------------------------------------------------------------------
+
+// --------------------------------------------------------------------------
+// 1. Box-sizing
+//    Đặt border-box toàn cục để width/height không bị cộng thêm padding/border.
+//    Đây là rule quan trọng nhất — thiếu là toàn bộ layout lệch.
+// --------------------------------------------------------------------------
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// --------------------------------------------------------------------------
+// 2. Document
+// --------------------------------------------------------------------------
+html {
+  // Ngăn browser tự điều chỉnh font-size khi xoay màn hình (iOS)
+  -webkit-text-size-adjust: 100%;
+  // Bỏ tap highlight màu xám trên mobile
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.15;
+}
+
+// --------------------------------------------------------------------------
+// 3. Body
+// --------------------------------------------------------------------------
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  text-align: left;
+}
+
+// --------------------------------------------------------------------------
+// 4. Sectioning elements — IE10 fallback (display: block)
+// --------------------------------------------------------------------------
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+// --------------------------------------------------------------------------
+// 5. Focus management
+//    Ẩn outline khi focus bằng chuột/touch; vẫn hiện khi dùng bàn phím.
+// --------------------------------------------------------------------------
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+// --------------------------------------------------------------------------
+// 6. Typography
+// --------------------------------------------------------------------------
+
+// Bỏ margin-top của heading để dễ kiểm soát spacing trong layouts
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+// Abbreviation với tooltip
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+// List — xóa margin-top, giữ margin-bottom
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol, ul ul, ol ul, ul ol {
+  margin-bottom: 0;
+}
+
+dt { font-weight: 700; }
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote { margin: 0 0 1rem; }
+
+// Bold & strong
+b,
+strong { font-weight: bolder; }
+
+small { font-size: 80%; }
+
+// Sub & sup — không ảnh hưởng line-height
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+
+// --------------------------------------------------------------------------
+// 7. Links
+// --------------------------------------------------------------------------
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent; // Xóa nền xám trên link active trong IE 10
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+// Link không có href (anchor thuần) — kế thừa màu cha, không gạch chân
+a:not([href]):not([class]),
+a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+// --------------------------------------------------------------------------
+// 8. Code
+// --------------------------------------------------------------------------
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 1em; // Sửa font-size lạ trên một số browser
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+// --------------------------------------------------------------------------
+// 9. Media
+// --------------------------------------------------------------------------
+figure { margin: 0 0 1rem; }
+
+img {
+  vertical-align: middle;
+  border-style: none; // Xóa border trên ảnh trong link (IE 10)
+}
+
+svg {
+  overflow: hidden; // Fix SVG overflow bug trong IE10/11
+  vertical-align: middle;
+}
+
+// --------------------------------------------------------------------------
+// 10. Tables
+// --------------------------------------------------------------------------
+table {
+  border-collapse: collapse; // Tránh double border khi dùng border trên td/th
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  font-weight: 600; // Không dùng bold mặc định của browser
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+// --------------------------------------------------------------------------
+// 11. Forms
+// --------------------------------------------------------------------------
+
+// label là inline-block để có thể set margin
+// NOTE: Bootstrap reboot thêm margin-bottom vào label — giữ override này khi còn dùng reboot
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+// Xóa border-radius mà macOS Chrome tự thêm vào button
+button { border-radius: 0; }
+
+// Ẩn outline trên button khi click (chỉ hiện khi dùng bàn phím)
+button:focus:not(:focus-visible) { outline: 0; }
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+// Hiển thị overflow trên Edge
+button,
+input { overflow: visible; }
+
+// Xóa text-transform kế thừa trong Firefox
+button,
+select { text-transform: none; }
+
+// Cursor pointer cho role="button"
+[role="button"] { cursor: pointer; }
+
+// Xóa word-wrap kỳ lạ trong Safari
+select { word-wrap: normal; }
+
+// Fix clickable types trên iOS/Safari
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+
+  &:not(:disabled) { cursor: pointer; }
+}
+
+// Xóa inner border/padding trong Firefox
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+// Radio & checkbox
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;    // Xóa scrollbar dọc mặc định trong IE
+  resize: vertical;  // Chỉ cho resize theo chiều dọc
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress { vertical-align: baseline; }
+
+// Sửa cursor spinner trên Chrome
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button { height: auto; }
+
+// Sửa rounded corners trên search input trong iOS
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+// File upload button — kế thừa font
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+// --------------------------------------------------------------------------
+// 12. Misc
+// --------------------------------------------------------------------------
+output { display: inline-block; }
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template { display: none; }
+
+// Ẩn element có attribute [hidden] (bao gồm IE 10)
+[hidden] { display: none !important; }
+
+// Horizontal rule
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}

package/assets/scss/core/utilities/_border.scss

@@ -0,0 +1,22 @@
+// --------------------------------------------------------------------------
+// Border-radius  (px-based, 0–200)
+//   rounded-0 … rounded-200 | rounded-full
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .rounded-#{$i} { border-radius: #{$i}px !important; }
+}
+
+.rounded-full { border-radius: 9999px !important; }
+
+// --------------------------------------------------------------------------
+// Border utilities
+//   border | border-0 | border-top | border-bottom | border-left | border-right
+// --------------------------------------------------------------------------
+$_border-color: var(--sd-black200);
+
+.border        { border: 1px solid $_border-color !important; }
+.border-0      { border: 0 !important; }
+.border-top    { border-top: 1px solid $_border-color !important; }
+.border-bottom { border-bottom: 1px solid $_border-color !important; }
+.border-left   { border-left: 1px solid $_border-color !important; }
+.border-right  { border-right: 1px solid $_border-color !important; }

package/assets/scss/core/utilities/_display.scss

@@ -0,0 +1,10 @@
+// --------------------------------------------------------------------------
+// Display
+// --------------------------------------------------------------------------
+.d-none         { display: none !important; }
+.d-block        { display: block !important; }
+.d-inline       { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-flex         { display: flex !important; }
+.d-inline-flex  { display: inline-flex !important; }
+.d-grid         { display: grid !important; }

package/assets/scss/core/utilities/_elevation.scss

@@ -0,0 +1,80 @@
+// --------------------------------------------------------------------------
+// Elevation — CSS tĩnh cho Angular Material shadow levels (Light Mode)
+//   Thay thế Angular Material mixin `mat.elevation()` bằng CSS cứng để
+//   tránh phụ thuộc vào Material theme SCSS khi cần dùng elevation riêng lẻ.
+//
+//   Tương đương: mat-elevation-z{0..8}
+//   Nguồn shadow: Material Design spec (3 lớp: ambient + penumbra + umbra)
+// --------------------------------------------------------------------------
+
+// z0 — không có shadow (dùng để reset)
+.mat-elevation-z0 {
+  box-shadow:
+    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+
+// z1 — surface nhẹ (card, chip)
+.mat-elevation-z1 {
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z2 — button raised
+.mat-elevation-z2 {
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z3 — card hover
+.mat-elevation-z3 {
+  box-shadow:
+    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 8px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z4 — app bar
+.mat-elevation-z4 {
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+// z5
+.mat-elevation-z5 {
+  box-shadow:
+    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
+    0px 5px 8px   0px rgba(0, 0, 0, 0.14),
+    0px 1px 14px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z6 — floating action button
+.mat-elevation-z6 {
+  box-shadow:
+    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z7
+.mat-elevation-z7 {
+  box-shadow:
+    0px 4px 5px  -2px rgba(0, 0, 0, 0.2),
+    0px 7px 10px  1px rgba(0, 0, 0, 0.14),
+    0px 2px 16px  1px rgba(0, 0, 0, 0.12);
+}
+
+// z8 — dialog, drawer
+.mat-elevation-z8 {
+  box-shadow:
+    0px 5px 5px  -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px  1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px  2px rgba(0, 0, 0, 0.12);
+}

package/assets/scss/core/utilities/_flexbox.scss

@@ -0,0 +1,54 @@
+// --------------------------------------------------------------------------
+// Flexbox
+// --------------------------------------------------------------------------
+
+// Flex shorthand
+.flex-1    { flex: 1 !important; }
+.flex-none { flex: none !important; }
+.flex-auto { flex: auto !important; }
+
+// Direction
+.flex-row            { flex-direction: row !important; }
+.flex-column         { flex-direction: column !important; }
+.flex-row-reverse    { flex-direction: row-reverse !important; }
+.flex-column-reverse { flex-direction: column-reverse !important; }
+
+// Wrap
+.flex-wrap   { flex-wrap: wrap !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+
+// Grow & shrink
+.flex-grow-0   { flex-grow: 0 !important; }
+.flex-grow-1   { flex-grow: 1 !important; }
+.flex-shrink-0 { flex-shrink: 0 !important; }
+.flex-shrink-1 { flex-shrink: 1 !important; }
+
+// align-items
+.align-items-start    { align-items: flex-start !important; }
+.align-items-end      { align-items: flex-end !important; }
+.align-items-center   { align-items: center !important; }
+.align-items-baseline { align-items: baseline !important; }
+.align-items-stretch  { align-items: stretch !important; }
+
+// align-self
+.align-self-start   { align-self: flex-start !important; }
+.align-self-end     { align-self: flex-end !important; }
+.align-self-center  { align-self: center !important; }
+.align-self-stretch { align-self: stretch !important; }
+.align-self-auto    { align-self: auto !important; }
+
+// align-content
+.align-content-start   { align-content: flex-start !important; }
+.align-content-end     { align-content: flex-end !important; }
+.align-content-center  { align-content: center !important; }
+.align-content-between { align-content: space-between !important; }
+.align-content-around  { align-content: space-around !important; }
+.align-content-stretch { align-content: stretch !important; }
+
+// justify-content
+.justify-content-start   { justify-content: flex-start !important; }
+.justify-content-end     { justify-content: flex-end !important; }
+.justify-content-center  { justify-content: center !important; }
+.justify-content-between { justify-content: space-between !important; }
+.justify-content-around  { justify-content: space-around !important; }
+.justify-content-evenly  { justify-content: space-evenly !important; }

package/assets/scss/core/utilities/_gap.scss

@@ -0,0 +1,9 @@
+// --------------------------------------------------------------------------
+// Gap  (px-based, 0–200)
+//   gap-0 … gap-200 | gap-x-* | gap-y-*
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .gap-#{$i}   { gap: #{$i}px !important; }
+  .gap-x-#{$i} { column-gap: #{$i}px !important; }
+  .gap-y-#{$i} { row-gap: #{$i}px !important; }
+}