@sd-angular/core 19.0.0-beta.86 → 19.0.0-beta.88

package/fesm2022/sd-angular-core-modules-layout.mjs

@@ -43,11 +43,11 @@ class SdPageComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdPageComponent, isStandalone: true, selector: "sd-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, noHeader: { classPropertyName: "noHeader", publicName: "noHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!noHeader()) {\r\n  <div class=\"c-page-header bg-white\">\r\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[headerLeft]\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div class=\"T20M\">{{ title() }}</div>\r\n            @if (description()) {\r\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <ng-content select=\"[headerRight]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div class=\"c-page-wrapper px-0\">\r\n  <div class=\"c-page-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdPageComponent, isStandalone: true, selector: "sd-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, noHeader: { classPropertyName: "noHeader", publicName: "noHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!noHeader()) {\n  <div class=\"c-page-header bg-white\">\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\n      <div class=\"d-flex\">\n        <ng-content select=\"[headerLeft]\">\n          <div class=\"d-flex flex-column\">\n            <div class=\"T20M\">{{ title() }}</div>\n            @if (description()) {\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <ng-content select=\"[headerRight]\"></ng-content>\n    </div>\n  </div>\n}\n\n<div class=\"c-page-wrapper px-0\">\n  <div class=\"c-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-page', template: "@if (!noHeader()) {\r\n  <div class=\"c-page-header bg-white\">\r\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[headerLeft]\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div class=\"T20M\">{{ title() }}</div>\r\n            @if (description()) {\r\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <ng-content select=\"[headerRight]\"></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n\r\n<div class=\"c-page-wrapper px-0\">\r\n  <div class=\"c-page-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] }]
+            args: [{ selector: 'sd-page', template: "@if (!noHeader()) {\n  <div class=\"c-page-header bg-white\">\n    <div class=\"p-16 d-flex align-items-center w-full justify-content-between\">\n      <div class=\"d-flex\">\n        <ng-content select=\"[headerLeft]\">\n          <div class=\"d-flex flex-column\">\n            <div class=\"T20M\">{{ title() }}</div>\n            @if (description()) {\n              <div class=\"T14R text-secondary mt-4\">{{ description() }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <ng-content select=\"[headerRight]\"></ng-content>\n    </div>\n  </div>\n}\n\n<div class=\"c-page-wrapper px-0\">\n  <div class=\"c-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;flex-direction:column;background-color:#f9f9f9}.c-page-header{box-shadow:0 1px 2px #2f31361a;z-index:1;position:relative}.c-page-wrapper{flex:1;display:flex;flex-direction:row;width:100%;overflow-y:auto;max-height:100vh}.c-page-wrapper .c-page-content{flex:1;height:100%;width:100%}.c-page-wrapper .c-page-right{position:-webkit-sticky;position:sticky;top:0;height:100%;overflow-y:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 class SdLayoutStorageService {
@@ -383,7 +383,7 @@ class SidebarComponent {
     // DATA STRUCTURES
     // ==========================================
     dataSource = new MatTreeNestedDataSource();
-    treeControl = new NestedTreeControl(node => 'children' in node && node.children?.length ? node.children : []);
+    treeControl = new NestedTreeControl(node => ('children' in node && node.children?.length ? node.children : []));
     constructor() {
         // 1. EFFECT: Lắng nghe menus đầu vào thay đổi
         effect(() => {
@@ -677,7 +677,7 @@ class SidebarComponent {
             return true;
         return this.#normalizePath(this.currentPath()).startsWith(this.#normalizePath(path));
     };
-    #normalizePath = (p) => p.endsWith('/') ? p : p + '/';
+    #normalizePath = (p) => (p.endsWith('/') ? p : p + '/');
     #closeMenu() {
         this.showSideBar.emit(null);
     }
@@ -690,7 +690,10 @@ class SidebarComponent {
         if (hexRegex.test(input)) {
             let hex = input.slice(1);
             if (hex.length === 3) {
-                hex = hex.split('').map(c => c + c).join('');
+                hex = hex
+                    .split('')
+                    .map(c => c + c)
+                    .join('');
             }
             const r = parseInt(hex.substring(0, 2), 16);
             const g = parseInt(hex.substring(2, 4), 16);
@@ -713,14 +716,15 @@ class SidebarComponent {
         return str.trim();
     };
     #getTotalMenus = (menus) => {
-        return menus.reduce((total, menu) => total + this.#countMenuNode(menu), 0);
+        return menus.reduce((total, menu) => total + this.#countMenuChildrenNode(menu), 0);
     };
-    #countMenuNode = (menu) => {
-        let count = 0;
-        if ('children' in menu && menu.children?.length) {
-            for (const child of menu.children) {
-                count += this.#countMenuNode(child);
-            }
+    #countMenuChildrenNode = (menu) => {
+        if (!('children' in menu) || !menu.children?.length) {
+            return 0;
+        }
+        let count = menu.children.length;
+        for (const child of menu.children) {
+            count += this.#countMenuChildrenNode(child);
         }
         return count;
     };