@sdcorejs/angular 19.0.0-rc.1

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

@@ -0,0 +1,333 @@
+// --------------------------------------------------------------------------
+// Base / Reboot — chuẩn hóa rendering giữa các browser, thiết lập baseline
+//   cho toàn bộ ứng dụng. Thuần CSS, không phụ thuộc 3rd-party reset.
+//
+//   Nguồn gốc rule: kế thừa từ Bootstrap 4 reboot + modern-normalize (đã được
+//   inline trực tiếp ở đây để dứt điểm phụ thuộc Bootstrap).
+// --------------------------------------------------------------------------
+
+// --------------------------------------------------------------------------
+// 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; margin-bottom mặc định 0.5rem
+// có thể override per-component (xem core/form.scss cho mat-checkbox).
+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; }
+}

package/assets/scss/core/utilities/_grid.scss

@@ -0,0 +1,143 @@
+// --------------------------------------------------------------------------
+// Grid — row/col 12-column flexbox + native CSS Grid container
+//   Thuần CSS Flexbox / CSS Grid, không phụ thuộc framework ngoài.
+//   Breakpoint convention (sm/md/lg/xl) trùng Bootstrap để host app dễ migrate.
+// --------------------------------------------------------------------------
+
+// --------------------------------------------------------------------------
+// 1. Flexbox row/col  (.row, .col-{1-12})
+// --------------------------------------------------------------------------
+$grid-columns: 12;
+$grid-gutter: 16px;
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(-1 * $grid-gutter / 2);
+  margin-right: calc(-1 * $grid-gutter / 2);
+
+  > * {
+    box-sizing: border-box;
+    padding-left: calc($grid-gutter / 2);
+    padding-right: calc($grid-gutter / 2);
+  }
+}
+
+// Gutter variants
+.row-md {
+  @extend .row;
+  margin-left: -8px;
+  margin-right: -8px;
+  > * { padding-left: 8px; padding-right: 8px; }
+}
+
+.row-sm {
+  @extend .row;
+  margin-left: -4px;
+  margin-right: -4px;
+  > * { padding-left: 4px; padding-right: 4px; }
+}
+
+.row-xs {
+  @extend .row;
+  margin-left: -2px;
+  margin-right: -2px;
+  > * { padding-left: 2px; padding-right: 2px; }
+}
+
+// .col-1 … .col-12
+@for $i from 1 through $grid-columns {
+  .col-#{$i} {
+    box-sizing: border-box;
+    width: percentage(calc($i / $grid-columns));
+    flex: 0 0 percentage(calc($i / $grid-columns));
+    max-width: percentage(calc($i / $grid-columns));
+    padding-left: calc($grid-gutter / 2);
+    padding-right: calc($grid-gutter / 2);
+  }
+}
+
+.col {
+  flex: 1 1 0%;
+  padding-left: calc($grid-gutter / 2);
+  padding-right: calc($grid-gutter / 2);
+}
+
+// --------------------------------------------------------------------------
+// 1b. Responsive columns
+//   col-sm-{1-12} : ≥ 576px
+//   col-md-{1-12} : ≥ 768px
+//   col-lg-{1-12} : ≥ 992px
+//   col-xl-{1-12} : ≥ 1200px
+//
+//   Mobile-first: mặc định width: 100%, áp dụng kích thước khi đủ rộng.
+// --------------------------------------------------------------------------
+$grid-breakpoints: (
+  'sm': 576px,
+  'md': 768px,
+  'lg': 992px,
+  'xl': 1200px,
+);
+
+// col-{bp} — chiếm hết chiều rộng tại breakpoint đó
+@each $bp, $min-width in $grid-breakpoints {
+  @media (min-width: $min-width) {
+    .col-#{$bp} {
+      flex: 1 1 0%;
+      padding-left: calc($grid-gutter / 2);
+      padding-right: calc($grid-gutter / 2);
+    }
+  }
+}
+
+// col-{bp}-{1-12} — chiếm n/12 chiều rộng tại breakpoint đó
+@each $bp, $min-width in $grid-breakpoints {
+  @media (min-width: $min-width) {
+    @for $i from 1 through $grid-columns {
+      .col-#{$bp}-#{$i} {
+        box-sizing: border-box;
+        width: percentage(calc($i / $grid-columns));
+        flex: 0 0 percentage(calc($i / $grid-columns));
+        max-width: percentage(calc($i / $grid-columns));
+        padding-left: calc($grid-gutter / 2);
+        padding-right: calc($grid-gutter / 2);
+      }
+    }
+  }
+}
+
+// --------------------------------------------------------------------------
+// 2. CSS Grid container  (.grid-container)
+//    grid-container + grid-cols-{1-12} + col-span-{1-12}
+// --------------------------------------------------------------------------
+.grid-container {
+  display: grid;
+  column-gap: 8px;
+  row-gap: 0;
+
+  @for $i from 1 through 12 {
+    &.grid-cols-#{$i} {
+      grid-template-columns: repeat($i, minmax(0, 1fr));
+    }
+  }
+
+  @for $i from 1 through 12 {
+    .col-span-#{$i} {
+      grid-column: span #{$i} / span #{$i};
+    }
+  }
+
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+
+  @for $i from 1 through 12 {
+    .row-span-#{$i} {
+      grid-row: span #{$i} / span #{$i};
+    }
+  }
+
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
+}

package/assets/scss/core/utilities/_index.scss

@@ -0,0 +1,17 @@
+/* ==========================================================================
+   SD-ANGULAR UTILITY CLASSES — thuần SCSS, không phụ thuộc 3rd-party.
+   Mỗi partial độc lập, có thể import riêng lẻ nếu cần.
+   ========================================================================== */
+
+@use 'spacing';
+@use 'sizing';
+@use 'border';
+@use 'typography';
+@use 'gap';
+@use 'display';
+@use 'flexbox';
+@use 'overflow';
+@use 'position';
+@use 'misc';
+@use 'grid';
+@use 'elevation';

package/assets/scss/core/utilities/_misc.scss

@@ -0,0 +1,20 @@
+// --------------------------------------------------------------------------
+// Vertical-align
+// --------------------------------------------------------------------------
+.align-middle   { vertical-align: middle !important; }
+.align-top      { vertical-align: top !important; }
+.align-bottom   { vertical-align: bottom !important; }
+.align-baseline { vertical-align: baseline !important; }
+
+// --------------------------------------------------------------------------
+// Cursor
+// --------------------------------------------------------------------------
+.cursor-pointer     { cursor: pointer !important; }
+.cursor-default     { cursor: default !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+
+// --------------------------------------------------------------------------
+// Visibility
+// --------------------------------------------------------------------------
+.visible   { visibility: visible !important; }
+.invisible { visibility: hidden !important; }