@sd-angular/core 19.0.10 → 19.0.11

package/README.md

@@ -250,8 +250,8 @@ import { SdSection } from '@sd-angular/core/components/section';
 | `subTitle` | `string` | — | Tiêu đề phụ |
 | `icon` | `string` | — | Icon Material |
 | `iconColor` | `Color` | `'primary'` | Màu icon |
-| `collapsible` | `boolean` | `false` | Cho phép thu gọn |
-| `collapsable` | `boolean` | `false` | Deprecated alias của `collapsible` |
+| `collapsible` | `boolean` | `false` | Cho phép thu gọn |
+| `collapsable` | `boolean` | `false` | Deprecated alias của `collapsible` |
 | `collapsed` | `boolean` | `false` | Trạng thái ban đầu thu gọn |
 | `hideHeader` | `boolean` | `false` | Ẩn phần header |
 
@@ -260,7 +260,7 @@ import { SdSection } from '@sd-angular/core/components/section';
   <!-- nội dung -->
 </sd-section>
 
-<sd-section title="Cài đặt nâng cao" icon="settings" collapsible [collapsed]="true">
+<sd-section title="Cài đặt nâng cao" icon="settings" collapsible [collapsed]="true">
   <!-- nội dung ẩn mặc định -->
 </sd-section>
 ```
@@ -365,13 +365,13 @@ option: SdTableOption<Product> = {
     });
     return { items: res.data, total: res.total };
   },
-  columns: [
-    { field: 'code', type: 'string', title: 'Mã', width: '120px' },
-    { field: 'name', type: 'string', title: 'Tên', sortable: true },
-    { field: 'status', type: 'values', title: 'Trạng thái',
-      useBadge: (val) => ({ color: val === 'ACTIVE' ? 'success' : 'secondary', title: val })
-    },
-  ],
+  columns: [
+    { field: 'code', type: 'string', title: 'Mã', width: '120px' },
+    { field: 'name', type: 'string', title: 'Tên', sortable: true },
+    { field: 'status', type: 'values', title: 'Trạng thái',
+      useBadge: (val) => ({ color: val === 'ACTIVE' ? 'success' : 'secondary', title: val })
+    },
+  ],
   command: {
     align: 'right',
     commands: [
@@ -408,15 +408,15 @@ import { SdAvatar } from '@sd-angular/core/components/avatar';
 | `SdTabRouter` | `@sd-angular/core/components/tab-router` | Tab navigation với Angular Router |
 | `SdSideDrawer` | `@sd-angular/core/components/side-drawer` | Drawer layout trái/phải |
 | `SdUploadFile` | `@sd-angular/core/components/upload-file` | Upload file |
-| `SdQuickAction` | `@sd-angular/core/components/quick-action` | Nút action dạng icon |
-| `SdHistory` | `@sd-angular/core/components/history` | Lịch sử thay đổi |
-| `SdImportExcel` | `@sd-angular/core/components/import-excel` | Wizard import Excel |
-| `SdTree` | `@sd-angular/core/components/tree` | Tree static/lazy với selection, command, filter và custom item template |
-| `SdOrgChart` | `@sd-angular/core/components/org-chart` | Sơ đồ tổ chức dạng cây, hỗ trợ custom node template |
-| `SdQueryBar` | `@sd-angular/core/components/query-bar` | Thanh lọc/search theo cấu hình option |
-| `SdQueryBuilder` | `@sd-angular/core/components/query-builder` | Visual query builder |
-| `SdSplitter` | `@sd-angular/core/components/splitter` | Layout chia vùng kéo giãn |
-| `SdCodeEditor` | `@sd-angular/core/components/code-editor` | Code editor (PrismJS) |
+| `SdQuickAction` | `@sd-angular/core/components/quick-action` | Nút action dạng icon |
+| `SdHistory` | `@sd-angular/core/components/history` | Lịch sử thay đổi |
+| `SdImportExcel` | `@sd-angular/core/components/import-excel` | Wizard import Excel |
+| `SdTree` | `@sd-angular/core/components/tree` | Tree static/lazy với selection, command, filter và custom item template |
+| `SdOrgChart` | `@sd-angular/core/components/org-chart` | Sơ đồ tổ chức dạng cây, hỗ trợ custom node template |
+| `SdQueryBar` | `@sd-angular/core/components/query-bar` | Thanh lọc/search theo cấu hình option |
+| `SdQueryBuilder` | `@sd-angular/core/components/query-builder` | Visual query builder |
+| `SdSplitter` | `@sd-angular/core/components/splitter` | Layout chia vùng kéo giãn |
+| `SdCodeEditor` | `@sd-angular/core/components/code-editor` | Code editor (PrismJS) |
 | `SdMiniEditor` | `@sd-angular/core/components/mini-editor` | Rich text editor nhỏ |
 | `SdDocumentBuilder` | `@sd-angular/core/components/document-builder` | Document builder |
 | `SdAnchorMain` | `@sd-angular/core/components/anchor` | Anchor / mục lục cuộn trang |
@@ -729,4 +729,4 @@ Core UI components expose runtime state via lowercase `data-*` attributes for e2
 
 ## License
 
-Internal use only — © SD Team
+Internal use only — © SD Team

package/assets/STYLE-GUIDE.md

@@ -19,12 +19,12 @@
 11. [Cursor, vertical-align, misc](#11-cursor-vertical-align-misc)
 12. [Elevation (mat-elevation-z0–z8)](#12-elevation-mat-elevation-z0z8)
 13. [Reset / Reboot baseline](#13-reset--reboot-baseline)
-14. [Custom theme](#14-custom-theme)
-15. [Fonts & Images shipped](#15-fonts--images-shipped)
-16. [What is NOT shipped](#16-what-is-not-shipped) — anti-confusion cho AI
-17. [AI rendering guardrails](#17-ai-rendering-guardrails) — ưu tiên Core UI trước khi viết CSS mới
-
----
+14. [Custom theme](#14-custom-theme)
+15. [Fonts & Images shipped](#15-fonts--images-shipped)
+16. [What is NOT shipped](#16-what-is-not-shipped) — anti-confusion cho AI
+17. [AI rendering guardrails](#17-ai-rendering-guardrails) — ưu tiên Core UI trước khi viết CSS mới
+
+---
 
 ## 1. Cài đặt vào Angular
 
@@ -605,16 +605,16 @@ Tham chiếu qua `core/image.scss` utility hoặc trực tiếp `assets/images/<
 | `alert`              | dùng `<sd-notify>` service |
 | `modal`              | dùng `<sd-modal>` |
 
-> Lưu ý lớn nhất: **spacing scale đã đổi từ Bootstrap multiplier (1=4px, 2=8px…) sang px tuyệt đối**. `mb-3` trong Bootstrap = 16px; trong `@sd-angular/core` `mb-3` = **3px**. Reading code cũ cần convert (× 4) cẩn thận hoặc thay bằng `mb-16`.
-
----
-
-## 17. AI rendering guardrails
-
-Khi sinh UI mới, agent phải rà docs Core UI trước và ưu tiên component/utility đã có thay vì tự tạo class SCSS trong component.
-
-- **Spacing layout dùng bội số 4px**: ưu tiên `4`, `8`, `12`, `16`, `24`, `32`... cho margin, padding, gap, gutter. Không sinh spacing lẻ như `3px`, `5px`, `7px` trừ khi có yêu cầu pixel-perfect rõ ràng.
-- **Hạn chế class CSS cục bộ**: trước khi viết `.field-label`, `.status-pill`, `.detail-row`, `.cell-input`..., kiểm tra có utility class hoặc component `sd-*` phù hợp không. Chỉ thêm SCSS mới khi Core UI không có pattern tương đương.
-- **View/read-only label + value**: dùng `<sd-view>` hoặc `[viewed]="true"` trên form component. Không tự dựng cặp label/value bằng class riêng cho các màn hình DETAIL.
-- **Trạng thái, nhãn, counter**: dùng `<sd-badge>` hoặc `useBadge` của `<sd-table>`. Không tự viết badge/pill/status class trong component nếu chỉ để thể hiện trạng thái.
-- **Input trong table hoặc vùng dense**: trong `<sd-table>`, inline filter, editable cell, toolbar/cell dày đặc, truyền `size="sm"` cho các form component hỗ trợ size như `<sd-input>`, `<sd-select>`, `<sd-autocomplete>`, `<sd-date>`, `<sd-date-range>`, `<sd-datetime>`, `<sd-input-number>`, `<sd-textarea>`, `<sd-chip>`, `<sd-chip-calendar>`, `<sd-input-color>`.
+> Lưu ý lớn nhất: **spacing scale đã đổi từ Bootstrap multiplier (1=4px, 2=8px…) sang px tuyệt đối**. `mb-3` trong Bootstrap = 16px; trong `@sd-angular/core` `mb-3` = **3px**. Reading code cũ cần convert (× 4) cẩn thận hoặc thay bằng `mb-16`.
+
+---
+
+## 17. AI rendering guardrails
+
+Khi sinh UI mới, agent phải rà docs Core UI trước và ưu tiên component/utility đã có thay vì tự tạo class SCSS trong component.
+
+- **Spacing layout dùng bội số 4px**: ưu tiên `4`, `8`, `12`, `16`, `24`, `32`... cho margin, padding, gap, gutter. Không sinh spacing lẻ như `3px`, `5px`, `7px` trừ khi có yêu cầu pixel-perfect rõ ràng.
+- **Hạn chế class CSS cục bộ**: trước khi viết `.field-label`, `.status-pill`, `.detail-row`, `.cell-input`..., kiểm tra có utility class hoặc component `sd-*` phù hợp không. Chỉ thêm SCSS mới khi Core UI không có pattern tương đương.
+- **View/read-only label + value**: dùng `<sd-view>` hoặc `[viewed]="true"` trên form component. Không tự dựng cặp label/value bằng class riêng cho các màn hình DETAIL.
+- **Trạng thái, nhãn, counter**: dùng `<sd-badge>` hoặc `useBadge` của `<sd-table>`. Không tự viết badge/pill/status class trong component nếu chỉ để thể hiện trạng thái.
+- **Input trong table hoặc vùng dense**: trong `<sd-table>`, inline filter, editable cell, toolbar/cell dày đặc, truyền `size="sm"` cho các form component hỗ trợ size như `<sd-input>`, `<sd-select>`, `<sd-autocomplete>`, `<sd-date>`, `<sd-date-range>`, `<sd-datetime>`, `<sd-input-number>`, `<sd-textarea>`, `<sd-chip>`, `<sd-chip-calendar>`, `<sd-input-color>`.

package/assets/fonts/fonts.scss

@@ -1,116 +1,116 @@
-/* =========================================
-   1. ROBOTO (Text Font)
-   ========================================= */
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('./roboto/roboto-v50-latin_vietnamese-regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('./roboto/roboto-v50-latin_vietnamese-italic.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('./roboto/roboto-v50-latin_vietnamese-500.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('./roboto/roboto-v50-latin_vietnamese-600.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* =========================================
-   2. MATERIAL ICONS (Cũ - Classic)
-   ========================================= */
-
-/* Filled (Regular) */
-@font-face {
-  font-family: 'Material Icons';
-  src: url('./material-icons/material-icons-v145-latin-regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: block;
-}
-
-/* Outlined */
-@font-face {
-  font-family: 'Material Icons Outlined';
-  src: url('./material-icons/material-icons-outlined-v110-latin-regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: block;
-}
-
-/* =========================================
-   3. MATERIAL SYMBOLS (Mới - v29)
-   Đây là bộ icon thế hệ mới của Google
-   ========================================= */
-@font-face {
-  font-family: 'Material Symbols Outlined'; /* Đặt tên này để khớp với class chuẩn */
-  src: url('./material-symbols/material-symbols-v29-latin-regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: block;
-}
-
-/* =========================================
-   4. CSS CLASSES (Utility Classes)
-   ========================================= */
-
-/* Class dùng chung để tránh lặp code */
-%icon-shared-style {
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  /* 1. Hỗ trợ trình duyệt cũ (Webkit/Chrome cũ) */
-  -webkit-font-feature-settings: 'liga';
-  
-  /* 2. Thuộc tính chuẩn (Standard) - Bắt buộc phải có để hết warning */
-  font-feature-settings: 'liga';
-  /* ======================================================== */
-  /* Làm mượt font trên các nền tảng */
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Áp dụng lại cho các class */
-.material-icons {
-  font-family: 'Material Icons';
-  @extend %icon-shared-style;
-}
-
-.material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  @extend %icon-shared-style;
-}
-
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  @extend %icon-shared-style;
-  /* Symbols có thể cần thêm settings riêng nếu dùng variable font, 
-     nhưng với file woff2 tĩnh của bạn thì setting trên là đủ */
+/* =========================================
+   1. ROBOTO (Text Font)
+   ========================================= */
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/roboto-v50-latin_vietnamese-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/roboto-v50-latin_vietnamese-italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/roboto-v50-latin_vietnamese-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/roboto-v50-latin_vietnamese-600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* =========================================
+   2. MATERIAL ICONS (Cũ - Classic)
+   ========================================= */
+
+/* Filled (Regular) */
+@font-face {
+  font-family: 'Material Icons';
+  src: url('./material-icons/material-icons-v145-latin-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
+/* Outlined */
+@font-face {
+  font-family: 'Material Icons Outlined';
+  src: url('./material-icons/material-icons-outlined-v110-latin-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
+/* =========================================
+   3. MATERIAL SYMBOLS (Mới - v29)
+   Đây là bộ icon thế hệ mới của Google
+   ========================================= */
+@font-face {
+  font-family: 'Material Symbols Outlined'; /* Đặt tên này để khớp với class chuẩn */
+  src: url('./material-symbols/material-symbols-v29-latin-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
+/* =========================================
+   4. CSS CLASSES (Utility Classes)
+   ========================================= */
+
+/* Class dùng chung để tránh lặp code */
+%icon-shared-style {
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  /* 1. Hỗ trợ trình duyệt cũ (Webkit/Chrome cũ) */
+  -webkit-font-feature-settings: 'liga';
+  
+  /* 2. Thuộc tính chuẩn (Standard) - Bắt buộc phải có để hết warning */
+  font-feature-settings: 'liga';
+  /* ======================================================== */
+  /* Làm mượt font trên các nền tảng */
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Áp dụng lại cho các class */
+.material-icons {
+  font-family: 'Material Icons';
+  @extend %icon-shared-style;
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  @extend %icon-shared-style;
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  @extend %icon-shared-style;
+  /* Symbols có thể cần thêm settings riêng nếu dùng variable font, 
+     nhưng với file woff2 tĩnh của bạn thì setting trên là đủ */
 }

package/assets/scss/core/scrollbar.scss

@@ -1,30 +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;
-}
+/* 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;
+}