@sdcorejs/angular 20.1.6 → 20.2.1

package/README.md

@@ -21,6 +21,16 @@ Install the package major that matches your Angular application.
 
 The package manifests accept Angular 19–21 peers, while releases provide an Angular-aligned package line for each major. The first version number is reserved for Angular compatibility, so read the [changelog](https://github.com/sdcorejs/sdcorejs-angular/blob/main/CHANGELOG.md) for explicitly labeled breaking changes before upgrading.
 
+### Peer dependencies
+
+The package declares these peers. A standard Angular CLI application already provides all of them except `@angular/material` and `@angular/material-date-fns-adapter`, which is why only those two appear in the install commands above.
+
+| Peer | Range |
+| --- | --- |
+| `@angular/animations` · `@angular/cdk` · `@angular/common` · `@angular/core` · `@angular/forms` · `@angular/platform-browser` · `@angular/router` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
+| `@angular/material` · `@angular/material-date-fns-adapter` | `^19.0.0 \|\| ^20.0.0 \|\| ^21.0.0` |
+| `rxjs` | `^7.8.0` |
+
 ## Installation and setup
 
 The examples below use Angular 19; replace `19` with your application's Angular major.

package/assets/scss/core/menu.scss

@@ -0,0 +1,18 @@
+// why: Material tạo khoảng cách giữa leading icon và nhãn của menu item bằng `margin-right` đặt trên
+// `.mat-icon`. Với `<sd-icon>` thì `.mat-icon` nằm BÊN TRONG host, nên margin đó không đẩy nhãn ra —
+// nó chỉ làm glyph lệch và bị xén trong host (sd-icon đã trung hoà margin đó ở cấp component). Rule
+// dưới đây trả khoảng cách về đúng cấp: host `<sd-icon>` khi nó là icon dẫn đầu của menu item.
+//
+// Đặt ở cấp host nên Material font icon và Lucide SVG hành xử giống hệt nhau — Lucide không render
+// `.mat-icon` nên trước đây không nhận được khoảng cách nào từ Material.
+//
+// Chỉ nhắm con TRỰC TIẾP: menu tự bọc icon trong wrapper flex có `gap` riêng (sd-table command,
+// sd-tree command) không được cộng thêm margin. Angular slot nội dung không phải `mat-icon` vào
+// trong `.mat-mdc-menu-item-text`, nên phải liệt kê cả hai cấp.
+//
+// Bọc trong `:where()` để specificity bằng 0: bất kỳ rule nào của menu cụ thể — kể cả một class đơn —
+// cũng thắng, nên đây là default an toàn chứ không phải thứ phải đi vá bằng `!important`.
+:where(.mat-mdc-menu-item > sd-icon:first-child),
+:where(.mat-mdc-menu-item > .mat-mdc-menu-item-text > sd-icon:first-child) {
+  margin-right: var(--mat-menu-item-spacing, 12px);
+}

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

@@ -18,3 +18,18 @@
 // --------------------------------------------------------------------------
 .visible   { visibility: visible !important; }
 .invisible { visibility: hidden !important; }
+
+// --------------------------------------------------------------------------
+// Screen-reader-only text (visually hidden, still in the accessibility tree)
+// --------------------------------------------------------------------------
+.sd-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}

package/assets/scss/sd-core.scss

@@ -4,6 +4,7 @@
 @use './core/color.scss';
 @use './core/form.scss';
 @use './core/image.scss';
+@use './core/menu.scss';
 @use './core/scrollbar.scss';
 @use './themes/default.scss';
 @use './themes/material-theme.scss';

package/components/anchor/index.d.ts

@@ -30,13 +30,15 @@ declare class SdAnchor implements OnDestroy {
     ellipsis: _angular_core.InputSignalWithTransform<boolean, unknown>;
     overScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     hideNav: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    hideNavOnMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
     color: _angular_core.InputSignal<Color>;
+    readonly navHidden: _angular_core.Signal<boolean>;
     activeSectionId: _angular_core.WritableSignal<string>;
     constructor();
     scrollSectionByClick(idSectionTarget: string): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdAnchor, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "overScroll": { "alias": "overScroll"; "required": false; "isSignal": true; }; "hideNav": { "alias": "hideNav"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "overScroll": { "alias": "overScroll"; "required": false; "isSignal": true; }; "hideNav": { "alias": "hideNav"; "required": false; "isSignal": true; }; "hideNavOnMobile": { "alias": "hideNavOnMobile"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
 }
 
 export { SdAnchor, SdAnchorItem };