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

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

@@ -0,0 +1,137 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, Optional, Inject, Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SdNormalizeAsync, SdResolveMaybeAsync } from '@sd-angular/core/utilities';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/router';
+
+const SD_AUTH_CONFIGURATION = new InjectionToken('sd.auth.configuration');
+
+class SdAuthService {
+    authConfiguration;
+    // Đăng nhập
+    // #signin = new Subject<void>();
+    // signin$?: Observable<void>;
+    getAuthInfo;
+    // Đăng xuất
+    #signout = new Subject();
+    signout$;
+    // Thay đổi mật khẩu
+    #changePassword = new Subject();
+    changePassword$;
+    constructor(authConfiguration) {
+        this.authConfiguration = authConfiguration;
+        // this.#handleSignin();
+        this.#handleSignout();
+        this.#handleChangePassword();
+        const defaultUser = {
+            id: 'guest-id',
+            username: 'guest',
+            firstName: 'Guest',
+            email: 'guest@gmail.com',
+        };
+        if (this.authConfiguration?.guard?.authInfo) {
+            this.getAuthInfo = toSignal(SdNormalizeAsync(this.authConfiguration.guard?.authInfo()), {
+                initialValue: defaultUser,
+            });
+        }
+        else {
+            this.getAuthInfo = signal(defaultUser);
+        }
+    }
+    // #handleSignin = () => {
+    //   this.signin$ = this.#signin.asObservable();
+    // };
+    #handleSignout = () => {
+        this.signout$ = this.#signout.asObservable();
+    };
+    #handleChangePassword = () => {
+        this.changePassword$ = this.#changePassword.asObservable();
+    };
+    signout = () => {
+        if (this.authConfiguration?.action?.signout) {
+            SdResolveMaybeAsync(this.authConfiguration.action.signout()).then(() => {
+                this.#signout.next();
+            });
+        }
+    };
+    changePassword = () => {
+        if (this.authConfiguration?.action?.changePassword) {
+            SdResolveMaybeAsync(this.authConfiguration.action.changePassword()).then(() => {
+                this.#changePassword.next();
+            });
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthService, deps: [{ token: SD_AUTH_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SD_AUTH_CONFIGURATION]
+                }] }] });
+
+class SdAuthGuard {
+    authConfiguration;
+    router;
+    constructor(authConfiguration, router) {
+        this.authConfiguration = authConfiguration;
+        this.router = router;
+    }
+    canActivate = (route, state) => {
+        if (this.authConfiguration?.guard?.auth) {
+            return this.authConfiguration.guard.auth(route, state);
+        }
+        // Nếu chưa tích hợp Auth Guard thì pass canActive
+        return true;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthGuard, deps: [{ token: SD_AUTH_CONFIGURATION, optional: true }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAuthGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SD_AUTH_CONFIGURATION]
+                }] }, { type: i1.Router }] });
+
+class SdPortalGuard {
+    authConfiguration;
+    router;
+    constructor(authConfiguration, router) {
+        this.authConfiguration = authConfiguration;
+        this.router = router;
+    }
+    canActivate = (route, state) => {
+        if (this.authConfiguration?.guard?.portal) {
+            return this.authConfiguration.guard.portal(route, state);
+        }
+        // Nếu chưa tích hợp Portal Guard thì pass canActive
+        return true;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPortalGuard, deps: [{ token: SD_AUTH_CONFIGURATION, optional: true }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPortalGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPortalGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SD_AUTH_CONFIGURATION]
+                }] }, { type: i1.Router }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SD_AUTH_CONFIGURATION, SdAuthGuard, SdAuthService, SdPortalGuard };
+//# sourceMappingURL=sd-angular-core-modules-auth.mjs.map

package/fesm2022/sd-angular-core-modules-auth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-modules-auth.mjs","sources":["../../../projects/sd-angular/modules/auth/configurations/auth.configuration.ts","../../../projects/sd-angular/modules/auth/services/auth.service.ts","../../../projects/sd-angular/modules/auth/guards/auth.guard.ts","../../../projects/sd-angular/modules/auth/guards/portal.guard.ts","../../../projects/sd-angular/modules/auth/sd-angular-core-modules-auth.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\nimport { CanActivate } from '@angular/router';\r\nimport { SdMaybeAsync } from '@sd-angular/core/utilities';\r\nimport { SdAuthInfo } from '../services';\r\n\r\nexport interface ISdAuthConfiguration {\r\n  action?: IAuthConfigurationAction;\r\n  guard?: IAuthConfigurationGuard;\r\n}\r\n\r\nexport const SD_AUTH_CONFIGURATION = new InjectionToken<ISdAuthConfiguration>('sd.auth.configuration');\r\n\r\ninterface IAuthConfigurationAction {\r\n  signout: () => SdMaybeAsync<void>;\r\n  changePassword?: () => SdMaybeAsync<void>;\r\n}\r\n\r\ninterface IAuthConfigurationGuard {\r\n  auth?: CanActivate['canActivate'];\r\n  portal?: CanActivate['canActivate'];\r\n  authInfo: () => SdMaybeAsync<SdAuthInfo>;\r\n}\r\n","import { Inject, Injectable, Optional, signal, Signal } from '@angular/core';\r\nimport { from, Observable, Subject } from 'rxjs';\r\nimport { ISdAuthConfiguration, SD_AUTH_CONFIGURATION } from '../configurations';\r\nimport { SdNormalizeAsync, SdResolveMaybeAsync } from '@sd-angular/core/utilities';\r\nimport { SdAuthInfo } from './auth.model';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class SdAuthService {\r\n  // Đăng nhập\r\n  // #signin = new Subject<void>();\r\n  // signin$?: Observable<void>;\r\n  getAuthInfo?: Signal<SdAuthInfo | undefined>;\r\n\r\n  // Đăng xuất\r\n  #signout = new Subject<void>();\r\n  signout$?: Observable<void>;\r\n\r\n  // Thay đổi mật khẩu\r\n  #changePassword = new Subject<void>();\r\n  changePassword$?: Observable<void>;\r\n\r\n  constructor(@Optional() @Inject(SD_AUTH_CONFIGURATION) private authConfiguration: ISdAuthConfiguration) {\r\n    // this.#handleSignin();\r\n    this.#handleSignout();\r\n    this.#handleChangePassword();\r\n    const defaultUser = {\r\n      id: 'guest-id',\r\n      username: 'guest',\r\n      firstName: 'Guest',\r\n      email: 'guest@gmail.com',\r\n    };\r\n    if (this.authConfiguration?.guard?.authInfo) {\r\n      this.getAuthInfo = toSignal(SdNormalizeAsync(this.authConfiguration.guard?.authInfo()), {\r\n        initialValue: defaultUser,\r\n      });\r\n    } else {\r\n      this.getAuthInfo = signal(defaultUser);\r\n    }\r\n  }\r\n\r\n  // #handleSignin = () => {\r\n  //   this.signin$ = this.#signin.asObservable();\r\n  // };\r\n\r\n  #handleSignout = () => {\r\n    this.signout$ = this.#signout.asObservable();\r\n  };\r\n\r\n  #handleChangePassword = () => {\r\n    this.changePassword$ = this.#changePassword.asObservable();\r\n  };\r\n  signout = () => {\r\n    if (this.authConfiguration?.action?.signout) {\r\n      SdResolveMaybeAsync(this.authConfiguration.action.signout()).then(() => {\r\n        this.#signout.next();\r\n      });\r\n    }\r\n  };\r\n\r\n  changePassword = () => {\r\n    if (this.authConfiguration?.action?.changePassword) {\r\n      SdResolveMaybeAsync(this.authConfiguration.action.changePassword()).then(() => {\r\n        this.#changePassword.next();\r\n      });\r\n    }\r\n  };\r\n}\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';\r\nimport { ISdAuthConfiguration, SD_AUTH_CONFIGURATION } from '../configurations';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class SdAuthGuard implements CanActivate {\r\n  constructor(\r\n    @Optional() @Inject(SD_AUTH_CONFIGURATION) private authConfiguration: ISdAuthConfiguration,\r\n    protected readonly router: Router\r\n  ) {}\r\n\r\n  canActivate = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\r\n    if (this.authConfiguration?.guard?.auth) {\r\n      return this.authConfiguration.guard.auth(route, state);\r\n    }\r\n    // Nếu chưa tích hợp Auth Guard thì pass canActive\r\n    return true;\r\n  };\r\n}\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';\r\nimport { ISdAuthConfiguration, SD_AUTH_CONFIGURATION } from '../configurations';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class SdPortalGuard implements CanActivate {\r\n  constructor(\r\n    @Optional() @Inject(SD_AUTH_CONFIGURATION) private authConfiguration: ISdAuthConfiguration,\r\n    protected readonly router: Router\r\n  ) {}\r\n\r\n  canActivate = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\r\n    if (this.authConfiguration?.guard?.portal) {\r\n      return this.authConfiguration.guard.portal(route, state);\r\n    }\r\n    // Nếu chưa tích hợp Portal Guard thì pass canActive\r\n    return true;\r\n  };\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -734,7 +734,7 @@ class LayoutSidebarComponent {
         return str;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutSidebarComponent, deps: [{ token: i1$2.Router }, { token: SD_LAYOUT_CONFIGURATION }, { token: SdLayoutStorageService }, { token: MenuFocusPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutSidebarComponent, isStandalone: true, selector: "lib-layout-sidebar", inputs: { isShowSidebar: "isShowSidebar", _menus: ["menus", "_menus"] }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@if (sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup || sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <!-- Icon menu-group -->\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menusOrigin; track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                {{ nodeMenuGroup.icon }}\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!-- End -->\r\n\r\n        <!-- Gi\u00E1 tr\u1ECB menu-group -->\r\n        <div class=\"c-menu-tree\">\r\n          @if (menusByGroup?.length) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" placeholder=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        <!-- End -->\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LayoutSidebarComponent, isStandalone: true, selector: "lib-layout-sidebar", inputs: { isShowSidebar: "isShowSidebar", _menus: ["menus", "_menus"] }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@if (sidebar) {\r\n  <div class=\"wrapper\" [style.height]=\"isMobileOrTablet ? screenHeight + 'px' : '100%'\">\r\n    <div class=\"c-header\">\r\n      @if (sidebar.logoUrl) {\r\n        <div class=\"c-logo\">\r\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\r\n            <img alt=\"logo\" [src]=\"sidebar.logoUrl\" />\r\n          </a>\r\n        </div>\r\n      }\r\n      <div class=\"c-title-menu-group\">\r\n        <span>{{ titleMenuGroup || sidebar.defaultTitle || 'Back Office' }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"c-body\">\r\n      <div class=\"c-menu\">\r\n        <!-- Icon menu-group -->\r\n        <div class=\"c-menu-group\">\r\n          @for (nodeMenuGroup of menusOrigin; track nodeMenuGroup.id) {\r\n            <button\r\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\r\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\r\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\r\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\r\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\r\n              [matTooltipPosition]=\"'right'\"\r\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\r\n              <mat-icon\r\n                class=\"c-menu-group-icon\"\r\n                [ngStyle]=\"{\r\n                  color: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandColor || '#2962FF' : '#8C8C8C',\r\n                  backgroundColor: idMenuGroupActive === nodeMenuGroup?.id ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                }\">\r\n                {{ nodeMenuGroup.icon }}\r\n              </mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        <!-- End -->\r\n\r\n        <!-- Gi\u00E1 tr\u1ECB menu-group -->\r\n        <div class=\"c-menu-tree\">\r\n          @if (menusByGroup?.length) {\r\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\r\n              <sd-input size=\"sm\" placeholder=\"T\u00ECm ki\u1EBFm\" [model]=\"searchText\" (sdChange)=\"onFilterSearchText($event)\">\r\n                <ng-template sdSuffixDef>\r\n                  @if (searchText) {\r\n                    <mat-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\">cancel</mat-icon>\r\n                  } @else {\r\n                    <mat-icon class=\"c-search-prefix-icon search\">search</mat-icon>\r\n                  }\r\n                </ng-template>\r\n              </sd-input>\r\n            </div>\r\n          }\r\n          <div class=\"c-menu-tree-container\">\r\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\r\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\r\n                <li\r\n                  class=\"c-menu-node\"\r\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\r\n                  [ngStyle]=\"{\r\n                    backgroundColor: (currentPath | menuFocus: node) ? sidebar.brandLightColor || '#F8F9FA' : 'transparent',\r\n                  }\">\r\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar\">\r\n                    <div\r\n                      class=\"c-menu-node-description-content\"\r\n                      [ngStyle]=\"{\r\n                        color: (currentPath | menuFocus: node) ? sidebar.brandColor || '#2962FF' : '#1F1F1F',\r\n                      }\"\r\n                      [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                  </div>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n\r\n              <mat-nested-tree-node\r\n                *matTreeNodeDef=\"let node; when: hasChild\"\r\n                aria-hidden=\"true\"\r\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath | menuFocus: node }\">\r\n                <li>\r\n                  <div\r\n                    class=\"c-menu-node\"\r\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\r\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\r\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\r\n                      <div [class.d-none]=\"!isShowSidebar\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\r\n                        <div\r\n                          class=\"c-menu-node-description-content\"\r\n                          [innerHTML]=\"node.title | highLightSearch: searchText | sdSafeHtml\"></div>\r\n                        <mat-icon class=\"c-menu-node-description-icon-expand\">\r\n                          {{ treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n                        </mat-icon>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\r\n                    <ng-container matTreeNodeOutlet></ng-container>\r\n                  </ul>\r\n                </li>\r\n              </mat-nested-tree-node>\r\n            </mat-tree>\r\n          </div>\r\n        </div>\r\n        <!-- End -->\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"c-footer\">\r\n      <lib-layout-user\r\n        [isMobileOrTablet]=\"isMobileOrTablet\"\r\n        (menuOpened)=\"onUserMenuOpened()\"\r\n        (menuClosed)=\"onUserMenuClosed()\"\r\n        [isShowSidebar]=\"isShowSidebar\"\r\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\r\n      </lib-layout-user>\r\n    </div>\r\n\r\n    <div class=\"c-vertical\"></div>\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .mat-mdc-tooltip-panel:has(.c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140){pointer-events:none}:host ::ng-deep .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node ul .mat-nested-tree-node ul .mat-nested-tree-node ul .c-menu-node-description-content{margin-left:48px!important}ul,li{margin-top:0;margin-bottom:0;list-style-type:none}.wrapper{display:flex;flex-direction:column;width:290px;background-color:#fff}.wrapper .c-header{display:flex;align-items:center;height:52px;padding:3px;gap:16px}.wrapper .c-header .c-logo{display:flex;justify-content:center;align-items:center;width:52px;height:52px}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:cover}.wrapper .c-header .c-title-menu-group{display:flex;align-items:center;font-size:18px;font-weight:500;flex:1}.wrapper .c-body{flex:1;overflow-y:hidden}.wrapper .c-body .c-menu{height:100%;display:flex}.wrapper .c-body .c-menu .c-menu-group{display:flex;flex-direction:column;align-items:center;width:60px;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon{display:flex;justify-content:center;align-items:center;min-height:50px;width:52px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree{flex:1;display:flex;flex-direction:column;padding:3px 4px 3px 3px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon{cursor:pointer;color:#757575;padding:0}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.search{width:20px;height:20px;font-size:18px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-search .c-search-prefix-icon.cancel{width:16px;height:16px;font-size:16px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container{flex:1;overflow-y:scroll;scrollbar-width:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node{width:100%;display:flex;cursor:pointer;min-height:44px;padding:8px;border-radius:8px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-icon{display:flex;justify-content:center;align-items:center;height:100%}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description{flex:1;display:flex;align-items:center}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-content{flex:1;display:flex;align-items:center;flex-wrap:wrap;white-space:pre-wrap;font-size:15px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-expand{text-align:left;background-color:transparent;border:none;font-size:20px}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i6.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i6.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "ngmodule", type: MatInputModule }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutSidebarComponent, decorators: [{
             type: Component,