@sdcorejs/angular 21.1.4 → 21.1.5

package/fesm2022/sdcorejs-angular-modules-layout.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, effect, Component, Injectable, InjectionToken, signal, computed, Pipe, output, DestroyRef, untracked, ChangeDetectionStrategy, viewChild, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import { inject, ElementRef, input, booleanAttribute, effect, Component, Injectable, InjectionToken, signal, computed, Pipe, DestroyRef, viewChild, output, isSignal, ChangeDetectionStrategy, untracked, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, NgTemplateOutlet } from '@angular/common';
-import * as i1$4 from '@angular/router';
+import * as i1$3 from '@angular/router';
 import { Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
 import { __decorate } from 'tslib';
 import { SdAvatar, SdTabComponent, SdButton } from '@sdcorejs/angular/components';
@@ -12,7 +12,7 @@ import { StringUtilities, Utilities } from '@sdcorejs/utils/fns';
 import { SD_VIEWPORT, SdViewportService } from '@sdcorejs/angular/services/viewport';
 import { resolveMaybeAsync } from '@sdcorejs/utils/models';
 import { SdPermissionService } from '@sdcorejs/angular/modules/permission';
-import * as i1$2 from '@angular/material/sidenav';
+import * as i1$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -20,16 +20,13 @@ import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/tree';
+import * as i2 from '@angular/material/tree';
 import { MatTreeNestedDataSource, MatTreeModule } from '@angular/material/tree';
 import { SdInput, SdSuffixDefDirective } from '@sdcorejs/angular/forms';
 import { SdSafeHtmlPipe } from '@sdcorejs/angular/pipes';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
-import * as i1$3 from '@angular/cdk/a11y';
+import { isObservable } from 'rxjs';
+import * as i1$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 
 class SdPageComponent {
@@ -549,53 +546,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+class SdLayoutUserMenuComponent {
+    #configuration = inject(SD_LAYOUT_CONFIGURATION, { optional: true });
+    #destroyRef = inject(DestroyRef);
+    #document = inject(DOCUMENT);
+    #host = inject(ElementRef);
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
+    signout = input(...(ngDevMode ? [undefined, { debugName: "signout" }] : /* istanbul ignore next */ []));
+    changePassword = input(...(ngDevMode ? [undefined, { debugName: "changePassword" }] : /* istanbul ignore next */ []));
+    updateProfile = input(...(ngDevMode ? [undefined, { debugName: "updateProfile" }] : /* istanbul ignore next */ []));
+    setting = input(...(ngDevMode ? [undefined, { debugName: "setting" }] : /* istanbul ignore next */ []));
+    notification = input(...(ngDevMode ? [undefined, { debugName: "notification" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    presentation = input('disclosure', ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    #observableNotificationCount = signal(undefined, ...(ngDevMode ? [{ debugName: "#observableNotificationCount" }] : /* istanbul ignore next */ []));
+    avatar = computed(() => {
+        const user = this.userInfo();
+        return user.avatar || user.fullName || user.username || user.email;
+    }, ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
+    displayName = computed(() => this.userInfo().fullName || this.userInfo().username || this.userInfo().email || 'User', ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        const role = this.userInfo().role;
+        const text = role?.text?.trim();
+        return text ? { ...role, text } : undefined;
+    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    signoutAction = computed(() => this.signout() ?? this.#configuration?.signout, ...(ngDevMode ? [{ debugName: "signoutAction" }] : /* istanbul ignore next */ []));
+    changePasswordAction = computed(() => this.changePassword() ?? this.#configuration?.changePassword, ...(ngDevMode ? [{ debugName: "changePasswordAction" }] : /* istanbul ignore next */ []));
+    updateProfileAction = computed(() => this.updateProfile() ?? this.#configuration?.updateProfile, ...(ngDevMode ? [{ debugName: "updateProfileAction" }] : /* istanbul ignore next */ []));
+    settingAction = computed(() => this.setting() ?? this.#configuration?.setting, ...(ngDevMode ? [{ debugName: "settingAction" }] : /* istanbul ignore next */ []));
+    notificationConfiguration = computed(() => this.notification() ?? this.#configuration?.notification, ...(ngDevMode ? [{ debugName: "notificationConfiguration" }] : /* istanbul ignore next */ []));
+    notificationAction = computed(() => this.notificationConfiguration()?.action, ...(ngDevMode ? [{ debugName: "notificationAction" }] : /* istanbul ignore next */ []));
+    notificationCount = computed(() => {
+        const source = this.notificationConfiguration()?.count;
+        const value = isSignal(source) ? source() : isObservable(source) ? this.#observableNotificationCount() : source;
+        return this.#normalizeNotificationCount(value);
+    }, ...(ngDevMode ? [{ debugName: "notificationCount" }] : /* istanbul ignore next */ []));
+    notificationBadge = computed(() => {
+        const count = this.notificationCount();
+        return count > 99 ? '99+' : count > 0 ? String(count) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "notificationBadge" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Observable sources may change with component inputs; effect cleanup guarantees one active subscription.
+        effect(onCleanup => {
+            const source = this.notificationConfiguration()?.count;
+            this.#observableNotificationCount.set(undefined);
+            if (!isObservable(source))
+                return;
+            const subscription = source.subscribe(value => this.#observableNotificationCount.set(value));
+            onCleanup(() => subscription.unsubscribe());
+        });
+        effect(() => {
+            if (!this.isOpen())
+                return;
+            this.menu()?.nativeElement.querySelector('[role="menuitem"]')?.focus();
+        });
+        const onDocumentKeydown = (event) => {
+            if (!this.isOpen() || event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            this.close();
+        };
+        const onDocumentPointerDown = (event) => {
+            if (!this.isOpen())
+                return;
+            const nodeConstructor = this.#document.defaultView?.Node;
+            if (!nodeConstructor || !(event.target instanceof nodeConstructor) || this.#host.nativeElement.contains(event.target))
+                return;
+            this.close(false);
+        };
+        this.#document.addEventListener('keydown', onDocumentKeydown);
+        this.#document.addEventListener('pointerdown', onDocumentPointerDown);
+        this.#destroyRef.onDestroy(() => {
+            this.#document.removeEventListener('keydown', onDocumentKeydown);
+            this.#document.removeEventListener('pointerdown', onDocumentPointerDown);
+        });
+    }
+    open() {
+        if (this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close(false);
+        else
+            this.open();
+    }
+    close(restoreFocus = true) {
+        const wasOpen = this.isOpen();
+        this.isOpen.set(false);
+        if (wasOpen)
+            this.closed.emit();
+        if (restoreFocus)
+            this.trigger()?.nativeElement.focus();
+    }
+    onMenuKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || !(event.currentTarget instanceof HTMLElement))
+            return;
+        const actions = [...event.currentTarget.querySelectorAll('[role="menuitem"]')];
+        if (!actions.length)
+            return;
+        event.preventDefault();
+        const currentIndex = actions.findIndex(action => action === this.#document.activeElement);
+        const nextIndex = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? actions.length - 1
+                : event.key === 'ArrowDown'
+                    ? (currentIndex + 1) % actions.length
+                    : (currentIndex - 1 + actions.length) % actions.length;
+        actions[nextIndex].focus();
+    }
+    runChangePassword() {
+        this.#runAction(this.changePasswordAction());
+    }
+    runSignout() {
+        this.#runAction(this.signoutAction());
+    }
+    runUpdateProfile() {
+        this.#runAction(this.updateProfileAction());
+    }
+    runSetting() {
+        this.#runAction(this.settingAction());
+    }
+    runNotification() {
+        this.#runAction(this.notificationAction());
+    }
+    #runAction(action) {
+        action?.();
+        this.close();
+    }
+    #normalizeNotificationCount(value) {
+        return Number.isFinite(value) && Number(value) > 0 ? Math.floor(Number(value)) : 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutUserMenuComponent, isStandalone: true, selector: "sd-layout-user-menu", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, signout: { classPropertyName: "signout", publicName: "signout", isSignal: true, isRequired: false, transformFunction: null }, changePassword: { classPropertyName: "changePassword", publicName: "changePassword", isSignal: true, isRequired: false, transformFunction: null }, updateProfile: { classPropertyName: "updateProfile", publicName: "updateProfile", isSignal: true, isRequired: false, transformFunction: null }, setting: { classPropertyName: "setting", publicName: "setting", isSignal: true, isRequired: false, transformFunction: null }, notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _presentation = presentation();\n@let _role = role();\n@let _notificationBadge = notificationBadge();\n<div class=\"sd-layout-user-menu position-relative\">\n  @if (_presentation !== 'disclosure') {\n    <div class=\"sd-layout-user-menu__mobile d-flex flex-column gap-8\">\n      <div\n        data-mobile-account-row\n        class=\"sd-layout-user-menu__mobile-row sd-layout-user-menu__mobile--inline d-flex align-items-center gap-8\">\n        <div data-user-summary class=\"sd-layout-user-menu__summary d-flex align-items-center gap-8 flex-1\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action sd-layout-user-menu__signout d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n\n      @if (updateProfileAction() || settingAction() || notificationAction() || changePasswordAction()) {\n        <div data-mobile-account-actions class=\"sd-layout-user-menu__mobile-actions d-flex flex-column gap-4\">\n          @if (updateProfileAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"update-profile\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runUpdateProfile()\">\n              <sd-icon name=\"edit\"></sd-icon>\n              {{ 'core.module.layout.user.update-profile' | translate }}\n            </button>\n          }\n          @if (settingAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"setting\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runSetting()\">\n              <sd-icon name=\"settings\"></sd-icon>\n              {{ 'core.module.layout.user.setting' | translate }}\n            </button>\n          }\n          @if (notificationAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"notification\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runNotification()\">\n              <sd-icon name=\"notifications\"></sd-icon>\n              <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n              @if (_notificationBadge) {\n                <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n              }\n            </button>\n          }\n          @if (changePasswordAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"change-password\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runChangePassword()\">\n              <sd-icon name=\"lock\"></sd-icon>\n              {{ 'core.module.layout.user.change-password' | translate }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <button\n      #trigger\n      type=\"button\"\n      data-user-trigger\n      class=\"sd-layout-user-menu__trigger d-flex align-items-center text-left\"\n      [class.sd-layout-user-menu__trigger--compact]=\"compact()\"\n      [class.w-full]=\"!compact()\"\n      [class.gap-8]=\"!compact()\"\n      [class.w-56]=\"compact()\"\n      [class.gap-0]=\"compact()\"\n      aria-haspopup=\"menu\"\n      [attr.aria-label]=\"compact() ? displayName() : null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      (click)=\"toggle()\">\n      <sd-avatar [src]=\"avatar()\" [size]=\"compact() ? 32 : 40\"></sd-avatar>\n      @if (!compact()) {\n        <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n          <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n          @if (userInfo().email) {\n            <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n          }\n        </span>\n        <sd-icon [name]=\"isOpen() ? 'expand_less' : 'expand_more'\"></sd-icon>\n      }\n    </button>\n\n    @if (isOpen()) {\n      <div\n        #menu\n        data-user-menu\n        class=\"sd-layout-user-menu__popup d-flex flex-column gap-4 p-8 bg-white border border-black200 rounded-8 mat-elevation-z4\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        (keydown)=\"onMenuKeydown($event)\">\n        <div data-user-identity class=\"sd-layout-user-menu__identity d-flex align-items-center gap-8 px-8 py-4\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (updateProfileAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"update-profile\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runUpdateProfile()\">\n            <sd-icon name=\"edit\"></sd-icon>\n            {{ 'core.module.layout.user.update-profile' | translate }}\n          </button>\n        }\n        @if (settingAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"setting\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runSetting()\">\n            <sd-icon name=\"settings\"></sd-icon>\n            {{ 'core.module.layout.user.setting' | translate }}\n          </button>\n        }\n        @if (notificationAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"notification\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runNotification()\">\n            <sd-icon name=\"notifications\"></sd-icon>\n            <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n            @if (_notificationBadge) {\n              <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n            }\n          </button>\n        }\n        @if (changePasswordAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"change-password\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runChangePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            {{ 'core.module.layout.user.change-password' | translate }}\n          </button>\n        }\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".sd-layout-user-menu__trigger,.sd-layout-user-menu__action{border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-user-menu__trigger:hover,.sd-layout-user-menu__action:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3))}.sd-layout-user-menu__trigger:focus-visible,.sd-layout-user-menu__action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-user-menu__trigger--compact{width:56px;min-height:52px;justify-content:center;gap:0;padding:0}.sd-layout-user-menu__popup{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);width:272px}.sd-layout-user-menu__popup .sd-layout-user-menu__action,.sd-layout-user-menu__mobile-actions .sd-layout-user-menu__action{width:100%}.sd-layout-user-menu__summary{min-width:0;padding:0 8px}.sd-layout-user-menu__identity{min-width:0}.sd-layout-user-menu__signout{width:auto;flex:0 0 auto;min-height:40px;white-space:nowrap}.sd-layout-user-menu__role sd-icon{width:14px;height:14px;font-size:14px;flex:0 0 auto}.sd-layout-user-menu__badge{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--sd-error, #ba1a1a);color:var(--sd-white, #ffffff);font-size:11px;line-height:18px;text-align:center}.sd-layout-user-menu__signout:hover{background:var(--sd-error-light, #ffdad6);color:var(--sd-error-dark, var(--sd-error, #ba1a1a))}@media(prefers-reduced-motion:reduce){.sd-layout-user-menu__trigger,.sd-layout-user-menu__action{transition:none}}\n"], dependencies: [{ kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutUserMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-layout-user-menu', standalone: true, imports: [SdAvatar, SdIcon, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _presentation = presentation();\n@let _role = role();\n@let _notificationBadge = notificationBadge();\n<div class=\"sd-layout-user-menu position-relative\">\n  @if (_presentation !== 'disclosure') {\n    <div class=\"sd-layout-user-menu__mobile d-flex flex-column gap-8\">\n      <div\n        data-mobile-account-row\n        class=\"sd-layout-user-menu__mobile-row sd-layout-user-menu__mobile--inline d-flex align-items-center gap-8\">\n        <div data-user-summary class=\"sd-layout-user-menu__summary d-flex align-items-center gap-8 flex-1\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action sd-layout-user-menu__signout d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n\n      @if (updateProfileAction() || settingAction() || notificationAction() || changePasswordAction()) {\n        <div data-mobile-account-actions class=\"sd-layout-user-menu__mobile-actions d-flex flex-column gap-4\">\n          @if (updateProfileAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"update-profile\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runUpdateProfile()\">\n              <sd-icon name=\"edit\"></sd-icon>\n              {{ 'core.module.layout.user.update-profile' | translate }}\n            </button>\n          }\n          @if (settingAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"setting\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runSetting()\">\n              <sd-icon name=\"settings\"></sd-icon>\n              {{ 'core.module.layout.user.setting' | translate }}\n            </button>\n          }\n          @if (notificationAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"notification\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runNotification()\">\n              <sd-icon name=\"notifications\"></sd-icon>\n              <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n              @if (_notificationBadge) {\n                <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n              }\n            </button>\n          }\n          @if (changePasswordAction()) {\n            <button\n              type=\"button\"\n              data-user-action=\"change-password\"\n              class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n              (click)=\"runChangePassword()\">\n              <sd-icon name=\"lock\"></sd-icon>\n              {{ 'core.module.layout.user.change-password' | translate }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <button\n      #trigger\n      type=\"button\"\n      data-user-trigger\n      class=\"sd-layout-user-menu__trigger d-flex align-items-center text-left\"\n      [class.sd-layout-user-menu__trigger--compact]=\"compact()\"\n      [class.w-full]=\"!compact()\"\n      [class.gap-8]=\"!compact()\"\n      [class.w-56]=\"compact()\"\n      [class.gap-0]=\"compact()\"\n      aria-haspopup=\"menu\"\n      [attr.aria-label]=\"compact() ? displayName() : null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      (click)=\"toggle()\">\n      <sd-avatar [src]=\"avatar()\" [size]=\"compact() ? 32 : 40\"></sd-avatar>\n      @if (!compact()) {\n        <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n          <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n          @if (userInfo().email) {\n            <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n          }\n        </span>\n        <sd-icon [name]=\"isOpen() ? 'expand_less' : 'expand_more'\"></sd-icon>\n      }\n    </button>\n\n    @if (isOpen()) {\n      <div\n        #menu\n        data-user-menu\n        class=\"sd-layout-user-menu__popup d-flex flex-column gap-4 p-8 bg-white border border-black200 rounded-8 mat-elevation-z4\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        (keydown)=\"onMenuKeydown($event)\">\n        <div data-user-identity class=\"sd-layout-user-menu__identity d-flex align-items-center gap-8 px-8 py-4\">\n          <sd-avatar [src]=\"avatar()\" [size]=\"40\"></sd-avatar>\n          <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n            <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n            @if (userInfo().email) {\n              <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n            }\n            @if (_role) {\n              <span\n                data-user-role\n                class=\"sd-layout-user-menu__role d-flex align-items-center gap-4 T12R text-ellipsis\"\n                [style.color]=\"_role.color\">\n                @if (_role.icon) {\n                  <sd-icon [name]=\"_role.icon\"></sd-icon>\n                }\n                {{ _role.text }}\n              </span>\n            }\n          </span>\n        </div>\n        @if (updateProfileAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"update-profile\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runUpdateProfile()\">\n            <sd-icon name=\"edit\"></sd-icon>\n            {{ 'core.module.layout.user.update-profile' | translate }}\n          </button>\n        }\n        @if (settingAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"setting\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runSetting()\">\n            <sd-icon name=\"settings\"></sd-icon>\n            {{ 'core.module.layout.user.setting' | translate }}\n          </button>\n        }\n        @if (notificationAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"notification\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runNotification()\">\n            <sd-icon name=\"notifications\"></sd-icon>\n            <span class=\"flex-1\">{{ 'core.module.layout.user.notification' | translate }}</span>\n            @if (_notificationBadge) {\n              <span data-notification-badge class=\"sd-layout-user-menu__badge\">{{ _notificationBadge }}</span>\n            }\n          </button>\n        }\n        @if (changePasswordAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"change-password\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n            (click)=\"runChangePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            {{ 'core.module.layout.user.change-password' | translate }}\n          </button>\n        }\n        @if (signoutAction()) {\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            data-user-action=\"signout\"\n            class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n            (click)=\"runSignout()\">\n            <sd-icon name=\"logout\"></sd-icon>\n            {{ 'core.module.layout.user.logout' | translate }}\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".sd-layout-user-menu__trigger,.sd-layout-user-menu__action{border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-user-menu__trigger:hover,.sd-layout-user-menu__action:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3))}.sd-layout-user-menu__trigger:focus-visible,.sd-layout-user-menu__action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-user-menu__trigger--compact{width:56px;min-height:52px;justify-content:center;gap:0;padding:0}.sd-layout-user-menu__popup{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);width:272px}.sd-layout-user-menu__popup .sd-layout-user-menu__action,.sd-layout-user-menu__mobile-actions .sd-layout-user-menu__action{width:100%}.sd-layout-user-menu__summary{min-width:0;padding:0 8px}.sd-layout-user-menu__identity{min-width:0}.sd-layout-user-menu__signout{width:auto;flex:0 0 auto;min-height:40px;white-space:nowrap}.sd-layout-user-menu__role sd-icon{width:14px;height:14px;font-size:14px;flex:0 0 auto}.sd-layout-user-menu__badge{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--sd-error, #ba1a1a);color:var(--sd-white, #ffffff);font-size:11px;line-height:18px;text-align:center}.sd-layout-user-menu__signout:hover{background:var(--sd-error-light, #ffdad6);color:var(--sd-error-dark, var(--sd-error, #ba1a1a))}@media(prefers-reduced-motion:reduce){.sd-layout-user-menu__trigger,.sd-layout-user-menu__action{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], signout: [{ type: i0.Input, args: [{ isSignal: true, alias: "signout", required: false }] }], changePassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePassword", required: false }] }], updateProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateProfile", required: false }] }], setting: [{ type: i0.Input, args: [{ isSignal: true, alias: "setting", required: false }] }], notification: [{ type: i0.Input, args: [{ isSignal: true, alias: "notification", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
 let LayoutUserComponent$1 = class LayoutUserComponent {
-    // ==========================================
-    // INJECT SERVICES
-    // ==========================================
-    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION);
-    // ==========================================
-    // SIGNAL INPUTS & OUTPUTS
-    // ==========================================
     isMobileOrTablet = input(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
     isMenuLock = input(false, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : /* istanbul ignore next */ []));
     isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : /* istanbul ignore next */ []));
     userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
-    // Chuyển thành void vì các hàm emit hiện tại không truyền data
     menuClosed = output();
     menuOpened = output();
     toggleMenuLock = output();
-    // Config actions
-    singoutLayoutConfig = this.#layoutConfiguration.signout;
-    changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
-    // ==========================================
-    // EVENT HANDLERS
-    // ==========================================
-    onMenuOpened = () => {
+    onMenuOpened() {
         this.menuOpened.emit();
-    };
-    onMenuClosed = () => {
+    }
+    onMenuClosed() {
         this.menuClosed.emit();
-    };
-    keepOpenWhenClickInsideMenu = (event) => {
-        event.stopPropagation();
-    };
-    logout = () => {
-        this.singoutLayoutConfig();
-    };
-    changePassword = () => {
-        // Dùng Optional Chaining gọi hàm cực gọn
-        this.changePasswordLayoutConfig?.();
-    };
-    onToggleMenuLock = (event) => {
+    }
+    onToggleMenuLock(event) {
         this.toggleMenuLock.emit(event);
-    };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "<div class=\"c-layout-user-wrapper\">\n  <sd-layout-user-menu\n    class=\"c-layout-user-avatar\"\n    [userInfo]=\"userInfo()\"\n    [compact]=\"true\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n  @if (!isMobileOrTablet()) {\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  }\n</div>\n", styles: [".c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout-user', imports: [SdIcon, MatMenuModule, MatButtonModule, MatTooltipModule, SdAvatar, TranslatePipe], standalone: true, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n<div class=\"c-layout-user-wrapper\">\n  <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n    <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n  </div>\n\n  @if (!isMobileOrTablet()) {\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  }\n</div>\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo.fullName || _userInfo.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>", styles: ["::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'lib-layout-user', imports: [SdIcon, SdLayoutUserMenuComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-layout-user-wrapper\">\n  <sd-layout-user-menu\n    class=\"c-layout-user-avatar\"\n    [userInfo]=\"userInfo()\"\n    [compact]=\"true\"\n    (opened)=\"onMenuOpened()\"\n    (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n  @if (!isMobileOrTablet()) {\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  }\n</div>\n", styles: [".c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { isMobileOrTablet: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileOrTablet", required: false }] }], isMenuLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMenuLock", required: false }] }], isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], toggleMenuLock: [{ type: i0.Output, args: ["toggleMenuLock"] }] } });
 
 class SidebarComponent {
@@ -640,6 +765,7 @@ class SidebarComponent {
     // COMPUTED STATE
     // ==========================================
     totalMenuInMenusByGroup = computed(() => this.#getTotalMenus(this.menusByGroup()), ...(ngDevMode ? [{ debugName: "totalMenuInMenusByGroup" }] : /* istanbul ignore next */ []));
+    logoUrl = computed(() => this.sidebar().logoUrl?.trim() || undefined, ...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
     pinnedNodeKeys = computed(() => new Set(this.pinnedMenuGroup().children?.map(m => this.#getMenuNodeKey(m)) ?? []), ...(ngDevMode ? [{ debugName: "pinnedNodeKeys" }] : /* istanbul ignore next */ []));
     isPinnedMenuGroupActive = computed(() => this.idMenuGroupActive() === this.pinnedMenuGroup().id, ...(ngDevMode ? [{ debugName: "isPinnedMenuGroupActive" }] : /* istanbul ignore next */ []));
     // ==========================================
@@ -1091,20 +1217,20 @@ class SidebarComponent {
         return str.trim();
     };
     #getTotalMenus = (menus) => {
-        return menus.reduce((total, menu) => total + this.#countMenuChildrenNode(menu), 0);
+        return menus.reduce((total, menu) => total + this.#countMenuNode(menu), 0);
     };
-    #countMenuChildrenNode = (menu) => {
+    #countMenuNode = (menu) => {
         if (!('children' in menu) || !menu.children?.length) {
-            return 0;
+            return 1;
         }
-        let count = menu.children.length;
+        let count = 1;
         for (const child of menu.children) {
-            count += this.#countMenuChildrenNode(child);
+            count += this.#countMenuNode(child);
         }
         return count;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobile() ? '100dvh' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\"\n                name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\"\n                  [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [autoId]=\"'layout-v1-menu-search'\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (currentPath() | menuFocus: node)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon\n                          class=\"c-menu-node-description-icon-expand\"\n                          [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobile()\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\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;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.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{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.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: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i2$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i2$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: true, transformFunction: null }, menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: true, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandSideBar: "expandSideBar", popupUserMenuClosed: "popupUserMenuClosed", popupUserMenuOpened: "popupUserMenuOpened", showSideBar: "showSideBar" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobile() ? '100dvh' : '100%'\">\n    <div class=\"c-header\">\n      <div class=\"c-logo\">\n        <a href=\"javascript:;\" aria-label=\"Trang ch\u1EE7\" (click)=\"openHomePage()\">\n          @if (logoUrl(); as _logoUrl) {\n            <img alt=\"\" [src]=\"_logoUrl\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n        </a>\n      </div>\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\"\n                name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\"\n                  [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() > 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [autoId]=\"'layout-v1-menu-search'\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (currentPath() | menuFocus: node)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon\n                          class=\"c-menu-node-description-icon-expand\"\n                          [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobile()\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\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 a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sd-text-secondary, #44474f)}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:contain}.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;flex:0 0 60px;min-width:60px;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;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.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{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}:host ::ng-deep .c-menu-tree-search input:focus-visible{outline:1px solid var(--sd-primary, #005cbb);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i2.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "component", type: i2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i2.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }, { kind: "component", type: LayoutUserComponent$1, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "pipe", type: MenuFocusPipe, name: "menuFocus" }, { kind: "pipe", type: HighlightSearchPipe, name: "highLightSearch" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -1123,7 +1249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         SdSuffixDefDirective,
                         LayoutUserComponent$1,
                         TranslatePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobile() ? '100dvh' : '100%'\">\n    <div class=\"c-header\">\n      @if (_sidebar.logoUrl) {\n        <div class=\"c-logo\">\n          <a href=\"javascript:;\" (click)=\"openHomePage()\">\n            <img alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n          </a>\n        </div>\n      }\n      <div class=\"c-title-menu-group\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\"\n                name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\"\n                  [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\">\n          @if (totalMenuInMenusByGroup() >= 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [autoId]=\"'layout-v1-menu-search'\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (currentPath() | menuFocus: node)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon\n                          class=\"c-menu-node-description-icon-expand\"\n                          [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobile()\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\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;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.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{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n  <div class=\"wrapper\" [style.height]=\"isMobile() ? '100dvh' : '100%'\">\n    <div class=\"c-header\">\n      <div class=\"c-logo\">\n        <a href=\"javascript:;\" aria-label=\"Trang ch\u1EE7\" (click)=\"openHomePage()\">\n          @if (logoUrl(); as _logoUrl) {\n            <img alt=\"\" [src]=\"_logoUrl\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n        </a>\n      </div>\n      <div class=\"c-title-menu-group\" [class.d-none]=\"!isShowSidebar()\">\n        <span>{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n      </div>\n    </div>\n    <div class=\"c-body\">\n      <div class=\"c-menu\">\n        <div class=\"c-menu-group\">\n          @if (_sidebar?.pin?.enabled && pinnedMenuGroup().children?.length) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n              (click)=\"expandPinnedGroup()\"\n              [matTooltip]=\"'\u0110\u00E3 ghim'\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              <sd-icon\n                class=\"c-menu-group-icon\"\n                [ngStyle]=\"{\n                  color: isPinnedMenuGroupActive()\n                    ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                    : 'var(--sd-text-secondary, #44474f)',\n                  backgroundColor: isPinnedMenuGroupActive()\n                    ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                    : 'transparent',\n                }\"\n                name=\"push_pin\"></sd-icon>\n            </button>\n          }\n          @for (nodeMenuGroup of menus(); track nodeMenuGroup.id) {\n            <button\n              (mouseenter)=\"onMouseOverMenuGroupNode($event, nodeMenuGroup)\"\n              (mouseleave)=\"onMouseLeaveMenuGroupNode($event, nodeMenuGroup)\"\n              (click)=\"expandMenuGroup(nodeMenuGroup)\"\n              [matTooltip]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\n              [matTooltipClass]=\"'c-tooltip-menu-group-7a22ab15-0083-4d4c-9c0c-00a30bc8c140'\"\n              [matTooltipPosition]=\"'right'\"\n              style=\"padding: 0; margin: 0; border: none; background-color: transparent\">\n              @if (nodeMenuGroup.iconUrl) {\n                <span\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\">\n                  <img width=\"24px\" height=\"24px\" [src]=\"nodeMenuGroup.iconUrl\" [alt]=\"nodeMenuGroup.title\" />\n                </span>\n              } @else {\n                <sd-icon\n                  class=\"c-menu-group-icon\"\n                  [ngStyle]=\"{\n                    color:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                        : 'var(--sd-text-secondary, #44474f)',\n                    backgroundColor:\n                      idMenuGroupActive() === nodeMenuGroup?.id\n                        ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)'\n                        : 'transparent',\n                  }\"\n                  [name]=\"nodeMenuGroup.icon || 'widgets'\"></sd-icon>\n              }\n            </button>\n          }\n        </div>\n        <div class=\"c-menu-tree\" [class.d-none]=\"!isShowSidebar()\" [attr.inert]=\"!isShowSidebar() ? '' : null\">\n          @if (totalMenuInMenusByGroup() > 10) {\n            <div style=\"padding: 0px 4px\" class=\"c-menu-tree-search\">\n              <sd-input\n                size=\"sm\"\n                [placeholder]=\"'core.module.layout.sidebar.search' | translate\"\n                [autoId]=\"'layout-v1-menu-search'\"\n                [model]=\"searchText()\"\n                (sdChange)=\"onFilterSearchText($event)\">\n                <ng-template sdSuffixDef>\n                  @if (searchText()) {\n                    <sd-icon class=\"c-search-prefix-icon cancel\" (click)=\"onClearSearchText()\" name=\"cancel\"></sd-icon>\n                  } @else {\n                    <sd-icon class=\"c-search-prefix-icon search\" name=\"search\"></sd-icon>\n                  }\n                </ng-template>\n              </sd-input>\n            </div>\n          }\n          <div class=\"c-menu-tree-container\">\n            <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.backgroundColor]=\"'transparent'\">\n              <mat-nested-tree-node *matTreeNodeDef=\"let node; when: !hasChild\">\n                <li\n                  class=\"c-menu-node\"\n                  (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                  (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n                  [ngStyle]=\"{\n                    backgroundColor:\n                      (currentPath() | menuFocus: node) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n                  }\">\n                  <div aria-hidden=\"true\" class=\"c-menu-node-description\" (click)=\"navigate(node)\" [class.d-none]=\"!isShowSidebar()\">\n                    <div\n                      class=\"c-menu-node-description-content\"\n                      [ngStyle]=\"{\n                        color:\n                          (currentPath() | menuFocus: node)\n                            ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n                            : 'var(--sd-text, #1a1b1f)',\n                      }\"\n                      [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n\n                    @if (_sidebar?.pin?.enabled) {\n                      <sd-icon\n                        class=\"c-menu-node-description-icon-pin\"\n                        [style.opacity]=\"isPinnedNode(node) || isHoveredNode(node) ? '1' : null\"\n                        [style.color]=\"\n                          isPinnedNode(node) || isHoveredNode(node) ? sidebar().brandColor || 'var(--sd-primary, #005cbb)' : null\n                        \"\n                        (click)=\"onTogglePin($event, node)\"\n                        name=\"push_pin\"></sd-icon>\n                    }\n                  </div>\n                </li>\n              </mat-nested-tree-node>\n\n              <mat-nested-tree-node\n                *matTreeNodeDef=\"let node; when: hasChild\"\n                aria-hidden=\"true\"\n                [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n                <li>\n                  <div\n                    class=\"c-menu-node\"\n                    (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n                    (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n                    <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n                      <div [class.d-none]=\"!isShowSidebar()\" class=\"c-menu-node-description\" (click)=\"onToggleMenuNode(node)\">\n                        <div\n                          class=\"c-menu-node-description-content\"\n                          [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></div>\n                        <sd-icon\n                          class=\"c-menu-node-description-icon-expand\"\n                          [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n                      </div>\n                    </div>\n                  </div>\n                  <ul class=\"p-0\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n                    <ng-container matTreeNodeOutlet></ng-container>\n                  </ul>\n                </li>\n              </mat-nested-tree-node>\n            </mat-tree>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"c-footer\">\n      <lib-layout-user\n        [userInfo]=\"_userInfo\"\n        [isMobileOrTablet]=\"isMobile()\"\n        (menuOpened)=\"onUserMenuOpened()\"\n        (menuClosed)=\"onUserMenuClosed()\"\n        [isShowSidebar]=\"isShowSidebar()\"\n        (toggleMenuLock)=\"toggleMenuLock($event)\">\n      </lib-layout-user>\n    </div>\n\n    <div class=\"c-vertical\"></div>\n  </div>\n}\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 a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sd-text-secondary, #44474f)}.wrapper .c-header .c-logo img{width:32px;height:32px;object-fit:contain}.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;flex:0 0 60px;min-width:60px;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;transition:all .15s}.wrapper .c-body .c-menu .c-menu-group .c-menu-group-icon img{height:24px;width:24px;object-fit:contain}.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{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:20px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description .c-menu-node-description-icon-pin{display:flex;align-items:center;justify-content:start;background-color:transparent;border:none;font-size:18px;opacity:0}.wrapper .c-footer{height:80px}.wrapper .c-vertical{position:fixed;height:100vh;left:58px;width:2px;background-color:#f8f9fa;pointer-events:none}:host ::ng-deep .c-menu-tree-search input:focus-visible{outline:1px solid var(--sd-primary, #005cbb);outline-offset:1px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], expandSideBar: [{ type: i0.Output, args: ["expandSideBar"] }], popupUserMenuClosed: [{ type: i0.Output, args: ["popupUserMenuClosed"] }], popupUserMenuOpened: [{ type: i0.Output, args: ["popupUserMenuOpened"] }], showSideBar: [{ type: i0.Output, args: ["showSideBar"] }] } });
 
 class SidebarV1Component {
@@ -1223,6 +1349,11 @@ class SidebarV1Component {
         }
         this.#mouseLeave();
     };
+    onSidenavOpenedChange = (opened) => {
+        if (this.isMobile()) {
+            this.isShowSidebar.set(opened);
+        }
+    };
     onToggle = (data) => {
         if (data === null) {
             this.#handleMouseLeaveTransition();
@@ -1231,34 +1362,29 @@ class SidebarV1Component {
             this.#mouseLeave();
             this.isShowSidebar.set(data);
             this.isMenuLock.set(data);
-            // Toggle component MatSidenav
-            const sidenavComp = this.sidenav();
-            if (sidenavComp) {
-                if (data) {
-                    sidenavComp.open();
-                }
-                else {
-                    sidenavComp.close();
+            // Desktop keeps the Material drawer mounted as a 60px rail; mobile still opens and closes the overlay.
+            if (this.isMobile()) {
+                const sidenavComp = this.sidenav();
+                if (sidenavComp) {
+                    if (data) {
+                        sidenavComp.open();
+                    }
+                    else {
+                        sidenavComp.close();
+                    }
                 }
             }
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SidebarV1Component, isStandalone: true, selector: "sidebar-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobile()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isMobile]=\"isMobile()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar", "isMobile"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SidebarV1Component, isStandalone: true, selector: "sidebar-v1", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"!isMobile() || isShowSidebar()\"\n    (openedChange)=\"onSidenavOpenedChange($event)\"\n    class=\"c-layout-sidebar\"\n    [class.is-expanded]=\"isShowSidebar()\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobile()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isMobile]=\"isMobile()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:clip!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.is-expanded{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i1$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i1$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["isShowSidebar", "menus", "userInfo", "sidebar", "isMobile"], outputs: ["expandSideBar", "popupUserMenuClosed", "popupUserMenuOpened", "showSideBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV1Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar-v1', imports: [MatSidenavModule, CommonModule, SidebarComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"isShowSidebar()\"\n    (openedChange)=\"isShowSidebar.set($event)\"\n    class=\"c-layout-sidebar\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobile()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isMobile]=\"isMobile()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:hidden!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.mat-drawer-opened{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"] }]
+            args: [{ selector: 'sidebar-v1', imports: [MatSidenavModule, CommonModule, SidebarComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container class=\"c-layout-wrapper\">\n  <mat-sidenav\n    #sidenav\n    [opened]=\"!isMobile() || isShowSidebar()\"\n    (openedChange)=\"onSidenavOpenedChange($event)\"\n    class=\"c-layout-sidebar\"\n    [class.is-expanded]=\"isShowSidebar()\"\n    (click)=\"openSidebar()\"\n    (mouseleave)=\"onMouseleaveSideBar()\"\n    [mode]=\"isMobile() ? 'over' : 'side'\"\n    [fixedInViewport]=\"isMobile()\">\n    <sidebar\n      [menus]=\"menus()\"\n      [userInfo]=\"userInfo()\"\n      [sidebar]=\"sidebar()\"\n      [isMobile]=\"isMobile()\"\n      [isShowSidebar]=\"isShowSidebar()\"\n      (showSideBar)=\"onToggle($event)\"\n      (expandSideBar)=\"onExpandSideBar()\"\n      (popupUserMenuOpened)=\"onPopupOfSideBarOpened()\"\n      (popupUserMenuClosed)=\"onPopupOfSideBarClosed()\">\n    </sidebar>\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"c-layout-content\" [class.isShowSidebar]=\"isMenuLock()\">\n    <mat-drawer-container class=\"c-mat-drawer-container\">\n      <mat-drawer-content>\n        <ng-content></ng-content>\n      </mat-drawer-content>\n    </mat-drawer-container>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host ::ng-deep .c-layout-wrapper{width:100%}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar{margin-top:0;width:60px;height:100vh!important;transform:none!important;overflow:clip!important;visibility:visible!important;transition:width .15s!important;box-shadow:0 0 6px #0003!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar .mat-drawer-inner-container{position:relative;overflow:visible;display:block!important}:host ::ng-deep .c-layout-wrapper .c-layout-sidebar.is-expanded{width:290px;transition:width .15s}:host ::ng-deep .c-layout-wrapper .c-layout-content{background-color:#fff;box-sizing:border-box;height:100vh!important;margin-left:60px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content.isShowSidebar{margin-left:290px!important}:host ::ng-deep .c-layout-wrapper .c-layout-content .c-mat-drawer-container{height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sidenav: [{ type: i0.ViewChild, args: ['sidenav', { isSignal: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }] } });
 
 class LayoutUserComponent {
-    // ==========================================
-    // INJECT SERVICES
-    // ==========================================
-    #layoutConfiguration = inject(SD_LAYOUT_CONFIGURATION);
-    // ==========================================
-    // SIGNAL INPUTS & OUTPUTS
-    // ==========================================
     isMobileOrTablet = input(false, ...(ngDevMode ? [{ debugName: "isMobileOrTablet" }] : /* istanbul ignore next */ []));
     isMenuLock = input(false, ...(ngDevMode ? [{ debugName: "isMenuLock" }] : /* istanbul ignore next */ []));
     isShowSidebar = input(false, ...(ngDevMode ? [{ debugName: "isShowSidebar" }] : /* istanbul ignore next */ []));
@@ -1266,47 +1392,21 @@ class LayoutUserComponent {
     menuClosed = output();
     menuOpened = output();
     toggleMenuLock = output();
-    // Config actions
-    singoutLayoutConfig = this.#layoutConfiguration.signout;
-    changePasswordLayoutConfig = this.#layoutConfiguration?.changePassword;
-    // Accordion state for mobile inline expand
-    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
-    // ==========================================
-    // EVENT HANDLERS
-    // ==========================================
-    onMenuOpened = () => {
+    onMenuOpened() {
         this.menuOpened.emit();
-    };
-    onMenuClosed = () => {
+    }
+    onMenuClosed() {
         this.menuClosed.emit();
-    };
-    keepOpenWhenClickInsideMenu = (event) => {
-        event.stopPropagation();
-    };
-    toggleExpanded = () => {
-        this.isExpanded.update(v => !v);
-        if (this.isExpanded()) {
-            this.menuOpened.emit();
-        }
-        else {
-            this.menuClosed.emit();
-        }
-    };
-    logout = () => {
-        this.singoutLayoutConfig();
-    };
-    changePassword = () => {
-        this.changePasswordLayoutConfig?.();
-    };
-    onToggleMenuLock = (event) => {
+    }
+    onToggleMenuLock(event) {
         this.toggleMenuLock.emit(event);
-    };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <sd-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\" name=\"keyboard_arrow_down\"></sd-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <sd-icon name=\"logout\"></sd-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action sd-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout sd-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LayoutUserComponent, isStandalone: true, selector: "lib-layout-user", inputs: { isMobileOrTablet: { classPropertyName: "isMobileOrTablet", publicName: "isMobileOrTablet", isSignal: true, isRequired: false, transformFunction: null }, isMenuLock: { classPropertyName: "isMenuLock", publicName: "isMenuLock", isSignal: true, isRequired: false, transformFunction: null }, isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", toggleMenuLock: "toggleMenuLock" }, ngImport: i0, template: "@if (isMobileOrTablet()) {\n  <sd-layout-user-menu [userInfo]=\"userInfo()\" presentation=\"mobile\"></sd-layout-user-menu>\n} @else {\n  <div class=\"c-layout-user-wrapper\">\n    <sd-layout-user-menu\n      class=\"c-layout-user-avatar\"\n      [userInfo]=\"userInfo()\"\n      [compact]=\"true\"\n      (opened)=\"onMenuOpened()\"\n      (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LayoutUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout-user', imports: [SdIcon, MatMenuModule, MatButtonModule, MatTooltipModule, SdAvatar, TranslatePipe], standalone: true, template: "@let _userInfo = userInfo();\n@let avatar = _userInfo?.avatar || _userInfo?.fullName || _userInfo?.username || _userInfo?.email;\n\n@if (isMobileOrTablet()) {\n  <!-- Mobile: accordion inline expand -->\n  <div class=\"m-user-card\">\n    <button class=\"m-user-row\" (click)=\"toggleExpanded()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"44\"></sd-avatar>\n      <div class=\"m-user-info\">\n        <span class=\"m-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n        @if (_userInfo?.email) {\n          <span class=\"m-user-email\">{{ _userInfo?.email }}</span>\n        }\n      </div>\n      <sd-icon class=\"m-expand-icon\" [class.m-expand-icon--open]=\"isExpanded()\" name=\"keyboard_arrow_down\"></sd-icon>\n    </button>\n\n    @if (isExpanded()) {\n      <div class=\"m-user-body\">\n        @if (changePasswordLayoutConfig) {\n          <button class=\"m-user-action\" (click)=\"changePassword()\">\n            <sd-icon name=\"lock\"></sd-icon>\n            <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n          </button>\n        }\n        <button class=\"m-user-action m-user-action--logout\" (click)=\"logout()\">\n          <sd-icon name=\"logout\"></sd-icon>\n          <span>{{ 'core.module.layout.user.logout' | translate }}</span>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <!-- Desktop: ch\u1EC9 hi\u1EC3n th\u1ECB avatar + n\u00FAt toggle -->\n  <div class=\"c-layout-user-wrapper\">\n    <div class=\"c-layout-user-avatar\" [matMenuTriggerFor]=\"userMenu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n      <sd-avatar [src]=\"avatar\" [size]=\"32\"></sd-avatar>\n    </div>\n\n    <div aria-hidden=\"true\" mat-mini-fab class=\"c-layout-icon-toggle\" (click)=\"onToggleMenuLock($event)\">\n      <sd-icon style=\"color: #8c8c8c\" [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </div>\n  </div>\n}\n\n<mat-menu #userMenu=\"matMenu\" xPosition=\"before\" backdropClass=\"c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0\">\n  <div aria-hidden=\"true\" class=\"c-user-menu-wrapper\" (click)=\"keepOpenWhenClickInsideMenu($event)\">\n    <div class=\"c-user-info-wrapper\">\n      <div class=\"c-user-avatar\">\n        <sd-avatar [src]=\"avatar\" [size]=\"40\"></sd-avatar>\n      </div>\n      <span class=\"c-user-name\">{{ _userInfo?.fullName || _userInfo?.username }}</span>\n      <span class=\"c-user-email\">{{ _userInfo?.email }}</span>\n    </div>\n\n    @if (changePasswordLayoutConfig) {\n      <div class=\"c-sign-button-wrapper\">\n        <button class=\"c-account-options\" (click)=\"changePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          <span>{{ 'core.module.layout.user.change-password' | translate }}</span>\n        </button>\n      </div>\n    }\n\n    <div class=\"c-sign-button-wrapper\">\n      <button class=\"c-sign-button\" mat-flat-button (click)=\"logout()\">{{ 'core.module.layout.user.logout' | translate }}</button>\n    </div>\n  </div>\n</mat-menu>\n", styles: ["@media(min-width:1024px){::ng-deep .c-user-menu-backdrop-f90ce131-fa4c-4f71-a49b-ab7fa374fdd0+* .cdk-overlay-pane{transform:translate(277px,83px)}}.m-user-card{width:100%}.m-user-row{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:none;background:transparent;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}.m-user-info{flex:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}.m-user-name{font-size:15px;font-weight:600;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-user-email{font-size:13px;color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-expand-icon{color:#8c8c8c;flex-shrink:0;transition:transform .2s ease}.m-expand-icon--open{transform:rotate(180deg)}.m-user-body{margin-top:8px;border-top:1px solid #EBEBEB;padding-top:4px;display:flex;flex-direction:column}.m-user-action{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:none;background:transparent;cursor:pointer;font-size:15px;color:#1f1f1f;-webkit-tap-highlight-color:transparent}.m-user-action sd-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-user-action:active{background-color:#f5f5f5}.m-user-action--logout{color:#e53935}.m-user-action--logout sd-icon{color:#e53935}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-wrapper .c-layout-user-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}.c-layout-user-wrapper .c-layout-icon-toggle{background-color:transparent;border-top:1px solid #f0f0f0;box-shadow:none;margin-top:10px;width:32px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.c-user-menu-wrapper .c-user-info-wrapper{width:250px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-avatar{width:40px;height:40px}.c-user-menu-wrapper .c-user-info-wrapper .c-user-name{font-size:16px;font-weight:700;text-align:center}.c-user-menu-wrapper .c-user-info-wrapper .c-user-email{font-size:14px;color:#7a7a7a;text-align:center}.c-user-menu-wrapper .c-sign-button-wrapper{text-align:center;padding:16px 16px 8px;width:100%;border-top:1px solid #dee2e6}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options{all:unset;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}.c-user-menu-wrapper .c-sign-button-wrapper .c-account-options sd-icon{font-size:21px;width:21px;height:21px;color:#8c8c8c}.c-user-menu-wrapper .c-sign-button-wrapper .c-sign-button{width:100%;color:#000;padding:16px;font-weight:700;background-color:#eef0f2}.c-avatar{max-width:100%;object-fit:cover}\n"] }]
+            args: [{ selector: 'lib-layout-user', imports: [SdIcon, SdLayoutUserMenuComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileOrTablet()) {\n  <sd-layout-user-menu [userInfo]=\"userInfo()\" presentation=\"mobile\"></sd-layout-user-menu>\n} @else {\n  <div class=\"c-layout-user-wrapper\">\n    <sd-layout-user-menu\n      class=\"c-layout-user-avatar\"\n      [userInfo]=\"userInfo()\"\n      [compact]=\"true\"\n      (opened)=\"onMenuOpened()\"\n      (closed)=\"onMenuClosed()\"></sd-layout-user-menu>\n\n    <button\n      type=\"button\"\n      class=\"c-layout-icon-toggle\"\n      [attr.aria-label]=\"'core.module.layout.sidebar.toggle' | translate\"\n      (click)=\"onToggleMenuLock($event)\">\n      <sd-icon [name]=\"isShowSidebar() ? 'keyboard_arrow_right' : 'keyboard_arrow_left'\"></sd-icon>\n    </button>\n  </div>\n}\n", styles: [":host{display:block;width:100%}.c-layout-user-wrapper{display:flex;flex-direction:column;align-items:center;width:60px;height:80px}.c-layout-user-avatar{display:block;width:56px;height:52px}.c-layout-icon-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:28px;margin:0;padding:0;border:0;border-top:1px solid var(--sd-black200, #f0f0f0);background:transparent;color:var(--sd-black400, #8c8c8c);cursor:pointer}.c-layout-icon-toggle:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { isMobileOrTablet: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileOrTablet", required: false }] }], isMenuLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMenuLock", required: false }] }], isShowSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowSidebar", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], toggleMenuLock: [{ type: i0.Output, args: ["toggleMenuLock"] }] } });
 
 class SidebarMobileOverlayComponent {
@@ -1501,15 +1601,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class SdLayoutMenuTreeComponent {
+    #destroyRef = inject(DestroyRef);
+    #hoveredPinKey = signal(null, ...(ngDevMode ? [{ debugName: "#hoveredPinKey" }] : /* istanbul ignore next */ []));
+    #pinHoverTimerId;
     menus = input([], ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
     query = input('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     activePath = input('', ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
     pinnedKeys = input([], ...(ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []));
     showPin = input(true, ...(ngDevMode ? [{ debugName: "showPin" }] : /* istanbul ignore next */ []));
+    pinVisibility = input('hover', ...(ngDevMode ? [{ debugName: "pinVisibility" }] : /* istanbul ignore next */ []));
     navigate = output();
     togglePinned = output();
     nodes = computed(() => {
         const pinnedKeys = new Set(this.pinnedKeys());
+        const hoveredPinKey = this.#hoveredPinKey();
+        const alwaysShowPin = this.pinVisibility() === 'always';
         const query = this.query().trim();
         const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
         const nodes = [];
@@ -1529,6 +1635,7 @@ class SdLayoutMenuTreeComponent {
                     isGroup,
                     isActive: !!path && this.#pathMatches(this.activePath(), path),
                     isPinned: pinnedKeys.has(key),
+                    isPinVisible: alwaysShowPin || pinnedKeys.has(key) || hoveredPinKey === key,
                 });
                 if (isGroup && 'children' in menu)
                     append(menu.children ?? [], depth + 1, [...ancestors, menu.title ?? key]);
@@ -1537,6 +1644,9 @@ class SdLayoutMenuTreeComponent {
         append(menus, 0, []);
         return nodes;
     }, ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.#destroyRef.onDestroy(() => this.#clearPinHoverTimer());
+    }
     onNavigate(menu) {
         if ('path' in menu)
             this.navigate.emit(menu);
@@ -1545,115 +1655,50 @@ class SdLayoutMenuTreeComponent {
         event.stopPropagation();
         this.togglePinned.emit(menu);
     }
+    onPinHoverStart(key) {
+        if (this.pinVisibility() === 'always')
+            return;
+        this.#clearPinHoverTimer();
+        this.#pinHoverTimerId = setTimeout(() => {
+            this.#hoveredPinKey.set(key);
+            this.#pinHoverTimerId = undefined;
+        }, 300);
+    }
+    onPinHoverEnd(key) {
+        this.#clearPinHoverTimer();
+        if (this.#hoveredPinKey() === key)
+            this.#hoveredPinKey.set(null);
+    }
+    #clearPinHoverTimer() {
+        if (this.#pinHoverTimerId === undefined)
+            return;
+        clearTimeout(this.#pinHoverTimerId);
+        this.#pinHoverTimerId = undefined;
+    }
     #pathMatches(currentPath, menuPath) {
         const normalize = (path) => (path.endsWith('/') ? path : `${path}/`);
         return currentPath === menuPath || normalize(currentPath).startsWith(normalize(menuPath));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutMenuTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutMenuTreeComponent, isStandalone: true, selector: "sd-layout-menu-tree", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, activePath: { classPropertyName: "activePath", publicName: "activePath", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, showPin: { classPropertyName: "showPin", publicName: "showPin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", togglePinned: "togglePinned" }, ngImport: i0, template: "<nav class=\"d-flex flex-column gap-4\" aria-label=\"Navigation menu\">\n  @for (node of nodes(); track node.key) {\n    @if (node.isGroup) {\n      <div class=\"sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400\" [style.padding-left.px]=\"node.paddingLeft\">\n        <sd-icon [name]=\"node.menu.icon || 'folder'\"></sd-icon>\n        <span class=\"text-ellipsis\">{{ node.title }}</span>\n      </div>\n    } @else {\n      <div class=\"sd-layout-menu-tree__route d-flex align-items-center gap-4\">\n        <button\n          type=\"button\"\n          class=\"sd-layout-menu-tree__route-button d-flex align-items-center gap-8 flex-1 text-left T14R\"\n          data-menu-route\n          [attr.data-menu-key]=\"node.key\"\n          [attr.aria-current]=\"node.isActive ? 'page' : null\"\n          [class.sd-layout-menu-tree__route-button--active]=\"node.isActive\"\n          [style.padding-left.px]=\"node.paddingLeft\"\n          (click)=\"onNavigate(node.menu)\">\n          @if (node.menu.iconUrl) {\n            <img class=\"sd-layout-menu-tree__icon-image\" [src]=\"node.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"node.menu.icon || 'chevron_right'\"></sd-icon>\n          }\n          <span class=\"text-ellipsis\">{{ node.title }}</span>\n        </button>\n        @if (showPin()) {\n          <button\n            type=\"button\"\n            class=\"sd-layout-menu-tree__pin d-flex align-items-center justify-content-center\"\n            [attr.data-pin-key]=\"node.key\"\n            [attr.aria-label]=\"node.isPinned ? 'Unpin ' + node.title : 'Pin ' + node.title\"\n            [attr.aria-pressed]=\"node.isPinned\"\n            (click)=\"onTogglePinned($event, node.menu)\">\n            <sd-icon [name]=\"node.isPinned ? 'push_pin' : 'keep'\"></sd-icon>\n          </button>\n        }\n      </div>\n    }\n  } @empty {\n    <div class=\"d-flex flex-column align-items-center justify-content-center gap-12 p-24 text-black400 T14R\">\n      Kh\u00F4ng t\u00ECm th\u1EA5y menu ph\u00F9 h\u1EE3p\n    </div>\n  }\n</nav>\n", styles: [".sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{min-height:40px;border:0;background:transparent;color:var(--sd-black500);cursor:pointer;border-radius:8px}.sd-layout-menu-tree__route-button--active{color:var(--sd-primary);background:var(--sd-primary-light);font-weight:500}.sd-layout-menu-tree__route-button:hover,.sd-layout-menu-tree__pin:hover{background:var(--sd-black100)}.sd-layout-menu-tree__route-button:focus-visible,.sd-layout-menu-tree__pin:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-menu-tree__pin{width:36px;flex:0 0 36px}.sd-layout-menu-tree__group{min-height:32px}.sd-layout-menu-tree__icon-image{width:20px;height:20px;object-fit:contain}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutMenuTreeComponent, isStandalone: true, selector: "sd-layout-menu-tree", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, activePath: { classPropertyName: "activePath", publicName: "activePath", isSignal: true, isRequired: false, transformFunction: null }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null }, showPin: { classPropertyName: "showPin", publicName: "showPin", isSignal: true, isRequired: false, transformFunction: null }, pinVisibility: { classPropertyName: "pinVisibility", publicName: "pinVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", togglePinned: "togglePinned" }, ngImport: i0, template: "<nav class=\"d-flex flex-column gap-4\" aria-label=\"Navigation menu\">\n  @for (node of nodes(); track node.key) {\n    @if (node.isGroup) {\n      <div class=\"sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400\" [style.padding-left.px]=\"node.paddingLeft\">\n        <sd-icon [name]=\"node.menu.icon || 'folder'\"></sd-icon>\n        <span class=\"text-ellipsis\">{{ node.title }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"sd-layout-menu-tree__route d-flex align-items-center gap-4\"\n        (mouseenter)=\"onPinHoverStart(node.key)\"\n        (mouseleave)=\"onPinHoverEnd(node.key)\">\n        <button\n          type=\"button\"\n          class=\"sd-layout-menu-tree__route-button d-flex align-items-center gap-8 flex-1 text-left T14R\"\n          data-menu-route\n          [attr.data-menu-key]=\"node.key\"\n          [attr.aria-current]=\"node.isActive ? 'page' : null\"\n          [class.sd-layout-menu-tree__route-button--active]=\"node.isActive\"\n          [style.padding-left.px]=\"node.paddingLeft\"\n          (click)=\"onNavigate(node.menu)\">\n          @if (node.menu.iconUrl) {\n            <img class=\"sd-layout-menu-tree__icon-image\" [src]=\"node.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"node.menu.icon || 'chevron_right'\"></sd-icon>\n          }\n          <span class=\"text-ellipsis\">{{ node.title }}</span>\n        </button>\n        @if (showPin()) {\n          <button\n            type=\"button\"\n            class=\"sd-layout-menu-tree__pin d-flex align-items-center justify-content-center\"\n            [class.sd-layout-menu-tree__pin--visible]=\"node.isPinVisible\"\n            [attr.data-pin-key]=\"node.key\"\n            [attr.aria-label]=\"node.isPinned ? 'Unpin ' + node.title : 'Pin ' + node.title\"\n            [attr.aria-pressed]=\"node.isPinned\"\n            (click)=\"onTogglePinned($event, node.menu)\">\n            <sd-icon name=\"push_pin\"></sd-icon>\n          </button>\n        }\n      </div>\n    }\n  } @empty {\n    <div class=\"d-flex flex-column align-items-center justify-content-center gap-12 p-24 text-black400 T14R\">\n      Kh\u00F4ng t\u00ECm th\u1EA5y menu ph\u00F9 h\u1EE3p\n    </div>\n  }\n</nav>\n", styles: [".sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{min-height:40px;border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-menu-tree__route-button--active{color:var(--sd-primary);background:var(--sd-primary-light);font-weight:500}.sd-layout-menu-tree__route-button:hover,.sd-layout-menu-tree__pin:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3));color:var(--sd-primary, #005cbb)}.sd-layout-menu-tree__route-button--active:hover{background:var(--sd-primary-light, #d7e3ff)}.sd-layout-menu-tree__route-button:focus-visible,.sd-layout-menu-tree__pin:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-menu-tree__pin{width:36px;flex:0 0 36px;opacity:0;pointer-events:none;transition:opacity .12s ease,background-color .12s ease,color .12s ease}.sd-layout-menu-tree__pin--visible,.sd-layout-menu-tree__pin:focus-visible{opacity:1;pointer-events:auto}.sd-layout-menu-tree__group{min-height:32px}.sd-layout-menu-tree__icon-image{width:20px;height:20px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutMenuTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-layout-menu-tree', standalone: true, imports: [SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"d-flex flex-column gap-4\" aria-label=\"Navigation menu\">\n  @for (node of nodes(); track node.key) {\n    @if (node.isGroup) {\n      <div class=\"sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400\" [style.padding-left.px]=\"node.paddingLeft\">\n        <sd-icon [name]=\"node.menu.icon || 'folder'\"></sd-icon>\n        <span class=\"text-ellipsis\">{{ node.title }}</span>\n      </div>\n    } @else {\n      <div class=\"sd-layout-menu-tree__route d-flex align-items-center gap-4\">\n        <button\n          type=\"button\"\n          class=\"sd-layout-menu-tree__route-button d-flex align-items-center gap-8 flex-1 text-left T14R\"\n          data-menu-route\n          [attr.data-menu-key]=\"node.key\"\n          [attr.aria-current]=\"node.isActive ? 'page' : null\"\n          [class.sd-layout-menu-tree__route-button--active]=\"node.isActive\"\n          [style.padding-left.px]=\"node.paddingLeft\"\n          (click)=\"onNavigate(node.menu)\">\n          @if (node.menu.iconUrl) {\n            <img class=\"sd-layout-menu-tree__icon-image\" [src]=\"node.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"node.menu.icon || 'chevron_right'\"></sd-icon>\n          }\n          <span class=\"text-ellipsis\">{{ node.title }}</span>\n        </button>\n        @if (showPin()) {\n          <button\n            type=\"button\"\n            class=\"sd-layout-menu-tree__pin d-flex align-items-center justify-content-center\"\n            [attr.data-pin-key]=\"node.key\"\n            [attr.aria-label]=\"node.isPinned ? 'Unpin ' + node.title : 'Pin ' + node.title\"\n            [attr.aria-pressed]=\"node.isPinned\"\n            (click)=\"onTogglePinned($event, node.menu)\">\n            <sd-icon [name]=\"node.isPinned ? 'push_pin' : 'keep'\"></sd-icon>\n          </button>\n        }\n      </div>\n    }\n  } @empty {\n    <div class=\"d-flex flex-column align-items-center justify-content-center gap-12 p-24 text-black400 T14R\">\n      Kh\u00F4ng t\u00ECm th\u1EA5y menu ph\u00F9 h\u1EE3p\n    </div>\n  }\n</nav>\n", styles: [".sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{min-height:40px;border:0;background:transparent;color:var(--sd-black500);cursor:pointer;border-radius:8px}.sd-layout-menu-tree__route-button--active{color:var(--sd-primary);background:var(--sd-primary-light);font-weight:500}.sd-layout-menu-tree__route-button:hover,.sd-layout-menu-tree__pin:hover{background:var(--sd-black100)}.sd-layout-menu-tree__route-button:focus-visible,.sd-layout-menu-tree__pin:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-menu-tree__pin{width:36px;flex:0 0 36px}.sd-layout-menu-tree__group{min-height:32px}.sd-layout-menu-tree__icon-image{width:20px;height:20px;object-fit:contain}\n"] }]
-        }], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], activePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePath", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], showPin: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPin", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], togglePinned: [{ type: i0.Output, args: ["togglePinned"] }] } });
+            args: [{ selector: 'sd-layout-menu-tree', standalone: true, imports: [SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"d-flex flex-column gap-4\" aria-label=\"Navigation menu\">\n  @for (node of nodes(); track node.key) {\n    @if (node.isGroup) {\n      <div class=\"sd-layout-menu-tree__group d-flex align-items-center gap-8 T12M text-black400\" [style.padding-left.px]=\"node.paddingLeft\">\n        <sd-icon [name]=\"node.menu.icon || 'folder'\"></sd-icon>\n        <span class=\"text-ellipsis\">{{ node.title }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"sd-layout-menu-tree__route d-flex align-items-center gap-4\"\n        (mouseenter)=\"onPinHoverStart(node.key)\"\n        (mouseleave)=\"onPinHoverEnd(node.key)\">\n        <button\n          type=\"button\"\n          class=\"sd-layout-menu-tree__route-button d-flex align-items-center gap-8 flex-1 text-left T14R\"\n          data-menu-route\n          [attr.data-menu-key]=\"node.key\"\n          [attr.aria-current]=\"node.isActive ? 'page' : null\"\n          [class.sd-layout-menu-tree__route-button--active]=\"node.isActive\"\n          [style.padding-left.px]=\"node.paddingLeft\"\n          (click)=\"onNavigate(node.menu)\">\n          @if (node.menu.iconUrl) {\n            <img class=\"sd-layout-menu-tree__icon-image\" [src]=\"node.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"node.menu.icon || 'chevron_right'\"></sd-icon>\n          }\n          <span class=\"text-ellipsis\">{{ node.title }}</span>\n        </button>\n        @if (showPin()) {\n          <button\n            type=\"button\"\n            class=\"sd-layout-menu-tree__pin d-flex align-items-center justify-content-center\"\n            [class.sd-layout-menu-tree__pin--visible]=\"node.isPinVisible\"\n            [attr.data-pin-key]=\"node.key\"\n            [attr.aria-label]=\"node.isPinned ? 'Unpin ' + node.title : 'Pin ' + node.title\"\n            [attr.aria-pressed]=\"node.isPinned\"\n            (click)=\"onTogglePinned($event, node.menu)\">\n            <sd-icon name=\"push_pin\"></sd-icon>\n          </button>\n        }\n      </div>\n    }\n  } @empty {\n    <div class=\"d-flex flex-column align-items-center justify-content-center gap-12 p-24 text-black400 T14R\">\n      Kh\u00F4ng t\u00ECm th\u1EA5y menu ph\u00F9 h\u1EE3p\n    </div>\n  }\n</nav>\n", styles: [".sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{min-height:40px;border:0;background:transparent;color:var(--sd-black500, var(--sd-text, #1a1b1f));cursor:pointer;border-radius:8px;transition:background-color .12s ease,color .12s ease}.sd-layout-menu-tree__route-button--active{color:var(--sd-primary);background:var(--sd-primary-light);font-weight:500}.sd-layout-menu-tree__route-button:hover,.sd-layout-menu-tree__pin:hover{background:var(--sd-black100, var(--sd-surface-muted, #f3f3f3));color:var(--sd-primary, #005cbb)}.sd-layout-menu-tree__route-button--active:hover{background:var(--sd-primary-light, #d7e3ff)}.sd-layout-menu-tree__route-button:focus-visible,.sd-layout-menu-tree__pin:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-menu-tree__pin{width:36px;flex:0 0 36px;opacity:0;pointer-events:none;transition:opacity .12s ease,background-color .12s ease,color .12s ease}.sd-layout-menu-tree__pin--visible,.sd-layout-menu-tree__pin:focus-visible{opacity:1;pointer-events:auto}.sd-layout-menu-tree__group{min-height:32px}.sd-layout-menu-tree__icon-image{width:20px;height:20px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-layout-menu-tree__route-button,.sd-layout-menu-tree__pin{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], activePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePath", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], showPin: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPin", required: false }] }], pinVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinVisibility", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], togglePinned: [{ type: i0.Output, args: ["togglePinned"] }] } });
 
-class SdLayoutUserMenuComponent {
-    #configuration = inject(SD_LAYOUT_CONFIGURATION, { optional: true });
-    #destroyRef = inject(DestroyRef);
-    #document = inject(DOCUMENT);
-    #host = inject(ElementRef);
-    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
-    menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
-    userInfo = input.required(...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
-    signout = input(...(ngDevMode ? [undefined, { debugName: "signout" }] : /* istanbul ignore next */ []));
-    changePassword = input(...(ngDevMode ? [undefined, { debugName: "changePassword" }] : /* istanbul ignore next */ []));
-    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    avatar = computed(() => {
-        const user = this.userInfo();
-        return user.avatar || user.fullName || user.username || user.email;
-    }, ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
-    displayName = computed(() => this.userInfo().fullName || this.userInfo().username || this.userInfo().email || 'User', ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
-    signoutAction = computed(() => this.signout() ?? this.#configuration?.signout, ...(ngDevMode ? [{ debugName: "signoutAction" }] : /* istanbul ignore next */ []));
-    changePasswordAction = computed(() => this.changePassword() ?? this.#configuration?.changePassword, ...(ngDevMode ? [{ debugName: "changePasswordAction" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            if (!this.isOpen())
-                return;
-            this.menu()?.nativeElement.querySelector('[role="menuitem"]')?.focus();
-        });
-        const onDocumentKeydown = (event) => {
-            if (!this.isOpen() || event.key !== 'Escape')
-                return;
-            event.preventDefault();
-            this.close();
-        };
-        const onDocumentPointerDown = (event) => {
-            if (!this.isOpen())
-                return;
-            const nodeConstructor = this.#document.defaultView?.Node;
-            if (!nodeConstructor || !(event.target instanceof nodeConstructor) || this.#host.nativeElement.contains(event.target))
-                return;
-            this.close(false);
-        };
-        this.#document.addEventListener('keydown', onDocumentKeydown);
-        this.#document.addEventListener('pointerdown', onDocumentPointerDown);
-        this.#destroyRef.onDestroy(() => {
-            this.#document.removeEventListener('keydown', onDocumentKeydown);
-            this.#document.removeEventListener('pointerdown', onDocumentPointerDown);
-        });
-    }
-    open() {
-        this.isOpen.set(true);
-    }
-    toggle() {
-        if (this.isOpen())
-            this.close(false);
-        else
-            this.open();
-    }
-    close(restoreFocus = true) {
-        this.isOpen.set(false);
-        if (restoreFocus)
-            this.trigger()?.nativeElement.focus();
-    }
-    onMenuKeydown(event) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-            return;
-        }
-        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || !(event.currentTarget instanceof HTMLElement))
-            return;
-        const actions = [...event.currentTarget.querySelectorAll('[role="menuitem"]')];
-        if (!actions.length)
-            return;
-        event.preventDefault();
-        const currentIndex = actions.findIndex(action => action === this.#document.activeElement);
-        const nextIndex = event.key === 'Home'
-            ? 0
-            : event.key === 'End'
-                ? actions.length - 1
-                : event.key === 'ArrowDown'
-                    ? (currentIndex + 1) % actions.length
-                    : (currentIndex - 1 + actions.length) % actions.length;
-        actions[nextIndex].focus();
-    }
-    runChangePassword() {
-        this.changePasswordAction()?.();
-        this.close();
-    }
-    runSignout() {
-        this.signoutAction()?.();
-        this.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutUserMenuComponent, isStandalone: true, selector: "sd-layout-user-menu", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, signout: { classPropertyName: "signout", publicName: "signout", isSignal: true, isRequired: false, transformFunction: null }, changePassword: { classPropertyName: "changePassword", publicName: "changePassword", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sd-layout-user-menu position-relative\">\n  <button\n    #trigger\n    type=\"button\"\n    data-user-trigger\n    class=\"sd-layout-user-menu__trigger d-flex align-items-center gap-8 w-full text-left\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"toggle()\">\n    <sd-avatar [src]=\"avatar()\" [size]=\"compact() ? 32 : 40\"></sd-avatar>\n    @if (!compact()) {\n      <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n        <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n        @if (userInfo().email) {\n          <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n        }\n      </span>\n    }\n    <sd-icon [name]=\"isOpen() ? 'expand_less' : 'expand_more'\"></sd-icon>\n  </button>\n\n  @if (isOpen()) {\n    <div\n      #menu\n      data-user-menu\n      class=\"sd-layout-user-menu__popup d-flex flex-column gap-4 p-8 bg-white border border-black200 rounded-8 mat-elevation-z4\"\n      role=\"menu\"\n      tabindex=\"-1\"\n      (keydown)=\"onMenuKeydown($event)\">\n      <div class=\"d-flex flex-column gap-4 px-8 py-4\">\n        <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n        @if (userInfo().email) {\n          <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n        }\n      </div>\n      @if (changePasswordAction()) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          data-user-action=\"change-password\"\n          class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n          (click)=\"runChangePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          \u0110\u1ED5i m\u1EADt kh\u1EA9u\n        </button>\n      }\n      @if (signoutAction()) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          data-user-action=\"signout\"\n          class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n          (click)=\"runSignout()\">\n          <sd-icon name=\"logout\"></sd-icon>\n          \u0110\u0103ng xu\u1EA5t\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".sd-layout-user-menu__trigger,.sd-layout-user-menu__action{border:0;background:transparent;color:var(--sd-black500);cursor:pointer;border-radius:8px}.sd-layout-user-menu__trigger:hover,.sd-layout-user-menu__action:hover{background:var(--sd-black100)}.sd-layout-user-menu__trigger:focus-visible,.sd-layout-user-menu__action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-user-menu__popup{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);width:240px}\n"], dependencies: [{ kind: "component", type: SdAvatar, selector: "sd-avatar", inputs: ["src", "size"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class SdLayoutSearchFieldComponent {
+    model = input('', ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    autoId = input.required(...(ngDevMode ? [{ debugName: "autoId" }] : /* istanbul ignore next */ []));
+    sdChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutSearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SdLayoutSearchFieldComponent, isStandalone: true, selector: "sd-layout-search-field", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sdChange: "sdChange" }, ngImport: i0, template: "<div\n  data-layout-search\n  class=\"sd-layout-search-field sd-layout-search-field--soft-pill d-flex align-items-center gap-8\">\n  <sd-icon class=\"sd-layout-search-field__icon\" name=\"search\"></sd-icon>\n  <sd-input\n    class=\"sd-layout-search-field__control\"\n    size=\"sm\"\n    hideInlineError\n    [placeholder]=\"placeholder()\"\n    [autoId]=\"autoId()\"\n    [model]=\"model()\"\n    (sdChange)=\"sdChange.emit($event)\">\n  </sd-input>\n</div>\n", styles: [":host{display:block;min-width:0}.sd-layout-search-field{min-height:38px;padding:0 12px;border:0;border-radius:9999px;outline:1px solid transparent;outline-offset:1px;background:var(--sd-black100, var(--sd-surface-muted));color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field:focus-within{outline-color:var(--sd-primary)}.sd-layout-search-field__icon{flex:0 0 auto;color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field__control{flex:1;min-width:0;--sd-border: transparent;--mdc-outlined-text-field-outline-color: transparent;--mdc-outlined-text-field-hover-outline-color: transparent;--mdc-outlined-text-field-focus-outline-color: transparent;--mdc-outlined-text-field-input-text-placeholder-color: var(--sd-black400, var(--sd-text-muted));--mdc-outlined-text-field-container-shape: 0px}:host ::ng-deep .sd-layout-search-field__control input:focus-visible{outline:0}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutUserMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutSearchFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-layout-user-menu', standalone: true, imports: [SdAvatar, SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-layout-user-menu position-relative\">\n  <button\n    #trigger\n    type=\"button\"\n    data-user-trigger\n    class=\"sd-layout-user-menu__trigger d-flex align-items-center gap-8 w-full text-left\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen()\"\n    (click)=\"toggle()\">\n    <sd-avatar [src]=\"avatar()\" [size]=\"compact() ? 32 : 40\"></sd-avatar>\n    @if (!compact()) {\n      <span class=\"d-flex flex-column flex-1 overflow-hidden\">\n        <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n        @if (userInfo().email) {\n          <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n        }\n      </span>\n    }\n    <sd-icon [name]=\"isOpen() ? 'expand_less' : 'expand_more'\"></sd-icon>\n  </button>\n\n  @if (isOpen()) {\n    <div\n      #menu\n      data-user-menu\n      class=\"sd-layout-user-menu__popup d-flex flex-column gap-4 p-8 bg-white border border-black200 rounded-8 mat-elevation-z4\"\n      role=\"menu\"\n      tabindex=\"-1\"\n      (keydown)=\"onMenuKeydown($event)\">\n      <div class=\"d-flex flex-column gap-4 px-8 py-4\">\n        <span class=\"T14M text-ellipsis\">{{ displayName() }}</span>\n        @if (userInfo().email) {\n          <span class=\"T12R text-black400 text-ellipsis\">{{ userInfo().email }}</span>\n        }\n      </div>\n      @if (changePasswordAction()) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          data-user-action=\"change-password\"\n          class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left\"\n          (click)=\"runChangePassword()\">\n          <sd-icon name=\"lock\"></sd-icon>\n          \u0110\u1ED5i m\u1EADt kh\u1EA9u\n        </button>\n      }\n      @if (signoutAction()) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          data-user-action=\"signout\"\n          class=\"sd-layout-user-menu__action d-flex align-items-center gap-8 px-8 py-8 T14R text-left text-error\"\n          (click)=\"runSignout()\">\n          <sd-icon name=\"logout\"></sd-icon>\n          \u0110\u0103ng xu\u1EA5t\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".sd-layout-user-menu__trigger,.sd-layout-user-menu__action{border:0;background:transparent;color:var(--sd-black500);cursor:pointer;border-radius:8px}.sd-layout-user-menu__trigger:hover,.sd-layout-user-menu__action:hover{background:var(--sd-black100)}.sd-layout-user-menu__trigger:focus-visible,.sd-layout-user-menu__action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-layout-user-menu__popup{position:absolute;z-index:40;left:0;bottom:calc(100% + 8px);width:240px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], signout: [{ type: i0.Input, args: [{ isSignal: true, alias: "signout", required: false }] }], changePassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePassword", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+            args: [{ selector: 'sd-layout-search-field', standalone: true, imports: [SdIcon, SdInput], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  data-layout-search\n  class=\"sd-layout-search-field sd-layout-search-field--soft-pill d-flex align-items-center gap-8\">\n  <sd-icon class=\"sd-layout-search-field__icon\" name=\"search\"></sd-icon>\n  <sd-input\n    class=\"sd-layout-search-field__control\"\n    size=\"sm\"\n    hideInlineError\n    [placeholder]=\"placeholder()\"\n    [autoId]=\"autoId()\"\n    [model]=\"model()\"\n    (sdChange)=\"sdChange.emit($event)\">\n  </sd-input>\n</div>\n", styles: [":host{display:block;min-width:0}.sd-layout-search-field{min-height:38px;padding:0 12px;border:0;border-radius:9999px;outline:1px solid transparent;outline-offset:1px;background:var(--sd-black100, var(--sd-surface-muted));color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field:focus-within{outline-color:var(--sd-primary)}.sd-layout-search-field__icon{flex:0 0 auto;color:var(--sd-black400, var(--sd-text-muted))}.sd-layout-search-field__control{flex:1;min-width:0;--sd-border: transparent;--mdc-outlined-text-field-outline-color: transparent;--mdc-outlined-text-field-hover-outline-color: transparent;--mdc-outlined-text-field-focus-outline-color: transparent;--mdc-outlined-text-field-input-text-placeholder-color: var(--sd-black400, var(--sd-text-muted));--mdc-outlined-text-field-container-shape: 0px}:host ::ng-deep .sd-layout-search-field__control input:focus-visible{outline:0}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: true }] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }] } });
 
 class SidebarV2Component {
     #router = inject(Router);
@@ -1768,11 +1813,11 @@ class SidebarV2Component {
             this.#navigationState.patchVersionState(2, { locked: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarV2Component, isStandalone: true, selector: "sidebar-v2", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-v2\" (keydown.escape)=\"closeFromEscape()\">\n  <aside class=\"sd-sidebar-v2__rail d-flex flex-column align-items-center gap-8 py-12 bg-white border-right border-black200\">\n    <button type=\"button\" class=\"sd-sidebar-v2__brand d-flex align-items-center justify-content-center\" aria-label=\"Trang ch\u1EE7\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-v2__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      } @else {\n        <sd-icon name=\"apps\"></sd-icon>\n      }\n    </button>\n\n    <nav class=\"d-flex flex-column align-items-center gap-4 flex-1\" aria-label=\"Nh\u00F3m menu\">\n      @for (item of railItems(); track item.key) {\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-v2__rail-action d-flex flex-column align-items-center justify-content-center gap-4\"\n          [attr.data-v2-group-key]=\"item.key\"\n          [attr.aria-label]=\"item.title\"\n          [attr.aria-expanded]=\"activeGroupKey() === item.key && isFlyoutOpen()\"\n          [class.sd-sidebar-v2__rail-action--active]=\"activeGroupKey() === item.key\"\n          (click)=\"selectGroup(item.menu)\"\n          (mouseenter)=\"previewGroup(item.menu)\"\n          (focus)=\"previewGroup(item.menu)\">\n          @if (item.menu.iconUrl) {\n            <img class=\"sd-sidebar-v2__rail-icon\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n          }\n          <span class=\"sd-sidebar-v2__rail-label text-ellipsis\">{{ item.title }}</span>\n        </button>\n      }\n    </nav>\n\n    <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"true\"></sd-layout-user-menu>\n  </aside>\n\n  @if (isFlyoutOpen()) {\n    <button\n      type=\"button\"\n      class=\"sd-sidebar-v2__backdrop\"\n      aria-label=\"\u0110\u00F3ng menu\"\n      (click)=\"closeFromBackdrop()\"\n      (keydown.escape)=\"closeFromEscape()\"></button>\n    <section\n      class=\"sd-sidebar-v2__flyout d-flex flex-column bg-white border-right border-black200 mat-elevation-z4\"\n      [attr.aria-label]=\"activeGroup()?.title || 'Menu'\"\n      (mouseleave)=\"leaveFlyout()\"\n      (keydown.escape)=\"closeFromEscape()\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ activeGroup()?.title || sidebar().defaultTitle || 'Menu' }}</span>\n        @if (isFlyoutLocked()) {\n          <sd-icon name=\"lock\"></sd-icon>\n        }\n      </header>\n      <div class=\"p-12\">\n        <sd-input\n          size=\"sm\"\n          placeholder=\"T\u00ECm trong nh\u00F3m\"\n          [autoId]=\"'layout-v2-context-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-input>\n      </div>\n      <div class=\"flex-1 overflow-auto px-8 pb-12\">\n        <sd-layout-menu-tree\n          [menus]=\"contextMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n\n  <main class=\"sd-sidebar-v2__content\" data-v2-content data-content-offset=\"rail\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v2{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v2__rail{position:fixed;z-index:30;inset:0 auto 0 0;width:72px}.sd-sidebar-v2__brand,.sd-sidebar-v2__rail-action{width:56px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v2__rail-action:hover,.sd-sidebar-v2__rail-action--active{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v2__brand:focus-visible,.sd-sidebar-v2__rail-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v2__rail-label{width:52px;font-size:10px;line-height:12px;text-align:center}.sd-sidebar-v2__logo,.sd-sidebar-v2__rail-icon{width:24px;height:24px;object-fit:contain}.sd-sidebar-v2__backdrop{position:fixed;z-index:10;inset:0;border:0;background:transparent}.sd-sidebar-v2__flyout{position:fixed;z-index:20;inset:0 auto 0 72px;width:320px}.sd-sidebar-v2__content{min-height:100vh;margin-left:72px}@media(prefers-reduced-motion:reduce){.sd-sidebar-v2__flyout{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarV2Component, isStandalone: true, selector: "sidebar-v2", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-v2\" (keydown.escape)=\"closeFromEscape()\">\n  <aside class=\"sd-sidebar-v2__rail d-flex flex-column align-items-center gap-8 py-12 bg-white border-right border-black200\">\n    <button type=\"button\" class=\"sd-sidebar-v2__brand d-flex align-items-center justify-content-center\" aria-label=\"Trang ch\u1EE7\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-v2__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      } @else {\n        <sd-icon name=\"apps\"></sd-icon>\n      }\n    </button>\n\n    <nav class=\"d-flex flex-column align-items-center gap-4 flex-1\" aria-label=\"Nh\u00F3m menu\">\n      @for (item of railItems(); track item.key) {\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-v2__rail-action d-flex flex-column align-items-center justify-content-center gap-4\"\n          [attr.data-v2-group-key]=\"item.key\"\n          [attr.aria-label]=\"item.title\"\n          [attr.aria-expanded]=\"activeGroupKey() === item.key && isFlyoutOpen()\"\n          [class.sd-sidebar-v2__rail-action--active]=\"activeGroupKey() === item.key\"\n          (click)=\"selectGroup(item.menu)\"\n          (mouseenter)=\"previewGroup(item.menu)\"\n          (focus)=\"previewGroup(item.menu)\">\n          @if (item.menu.iconUrl) {\n            <img class=\"sd-sidebar-v2__rail-icon\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n          }\n          <span class=\"sd-sidebar-v2__rail-label text-ellipsis\">{{ item.title }}</span>\n        </button>\n      }\n    </nav>\n\n    <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"true\"></sd-layout-user-menu>\n  </aside>\n\n  @if (isFlyoutOpen()) {\n    <button\n      type=\"button\"\n      class=\"sd-sidebar-v2__backdrop\"\n      aria-label=\"\u0110\u00F3ng menu\"\n      (click)=\"closeFromBackdrop()\"\n      (keydown.escape)=\"closeFromEscape()\"></button>\n    <section\n      class=\"sd-sidebar-v2__flyout d-flex flex-column bg-white border-right border-black200 mat-elevation-z4\"\n      [attr.aria-label]=\"activeGroup()?.title || 'Menu'\"\n      (mouseleave)=\"leaveFlyout()\"\n      (keydown.escape)=\"closeFromEscape()\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ activeGroup()?.title || sidebar().defaultTitle || 'Menu' }}</span>\n        @if (isFlyoutLocked()) {\n          <sd-icon name=\"lock\"></sd-icon>\n        }\n      </header>\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong nh\u00F3m\"\n          [autoId]=\"'layout-v2-context-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"flex-1 overflow-auto px-8 pb-12\">\n        <sd-layout-menu-tree\n          [menus]=\"contextMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n\n  <main class=\"sd-sidebar-v2__content\" data-v2-content data-content-offset=\"rail\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v2{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v2__rail{position:fixed;z-index:30;inset:0 auto 0 0;width:72px}.sd-sidebar-v2__brand,.sd-sidebar-v2__rail-action{width:56px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v2__rail-action:hover,.sd-sidebar-v2__rail-action--active{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v2__brand:focus-visible,.sd-sidebar-v2__rail-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v2__rail-label{width:52px;font-size:10px;line-height:12px;text-align:center}.sd-sidebar-v2__logo,.sd-sidebar-v2__rail-icon{width:24px;height:24px;object-fit:contain}.sd-sidebar-v2__backdrop{position:fixed;z-index:10;inset:0;border:0;background:transparent}.sd-sidebar-v2__flyout{position:fixed;z-index:20;inset:0 auto 0 72px;width:320px}.sd-sidebar-v2__content{min-height:100vh;margin-left:72px}@media(prefers-reduced-motion:reduce){.sd-sidebar-v2__flyout{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar-v2', standalone: true, imports: [SdIcon, SdInput, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-v2\" (keydown.escape)=\"closeFromEscape()\">\n  <aside class=\"sd-sidebar-v2__rail d-flex flex-column align-items-center gap-8 py-12 bg-white border-right border-black200\">\n    <button type=\"button\" class=\"sd-sidebar-v2__brand d-flex align-items-center justify-content-center\" aria-label=\"Trang ch\u1EE7\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-v2__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      } @else {\n        <sd-icon name=\"apps\"></sd-icon>\n      }\n    </button>\n\n    <nav class=\"d-flex flex-column align-items-center gap-4 flex-1\" aria-label=\"Nh\u00F3m menu\">\n      @for (item of railItems(); track item.key) {\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-v2__rail-action d-flex flex-column align-items-center justify-content-center gap-4\"\n          [attr.data-v2-group-key]=\"item.key\"\n          [attr.aria-label]=\"item.title\"\n          [attr.aria-expanded]=\"activeGroupKey() === item.key && isFlyoutOpen()\"\n          [class.sd-sidebar-v2__rail-action--active]=\"activeGroupKey() === item.key\"\n          (click)=\"selectGroup(item.menu)\"\n          (mouseenter)=\"previewGroup(item.menu)\"\n          (focus)=\"previewGroup(item.menu)\">\n          @if (item.menu.iconUrl) {\n            <img class=\"sd-sidebar-v2__rail-icon\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n          }\n          <span class=\"sd-sidebar-v2__rail-label text-ellipsis\">{{ item.title }}</span>\n        </button>\n      }\n    </nav>\n\n    <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"true\"></sd-layout-user-menu>\n  </aside>\n\n  @if (isFlyoutOpen()) {\n    <button\n      type=\"button\"\n      class=\"sd-sidebar-v2__backdrop\"\n      aria-label=\"\u0110\u00F3ng menu\"\n      (click)=\"closeFromBackdrop()\"\n      (keydown.escape)=\"closeFromEscape()\"></button>\n    <section\n      class=\"sd-sidebar-v2__flyout d-flex flex-column bg-white border-right border-black200 mat-elevation-z4\"\n      [attr.aria-label]=\"activeGroup()?.title || 'Menu'\"\n      (mouseleave)=\"leaveFlyout()\"\n      (keydown.escape)=\"closeFromEscape()\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ activeGroup()?.title || sidebar().defaultTitle || 'Menu' }}</span>\n        @if (isFlyoutLocked()) {\n          <sd-icon name=\"lock\"></sd-icon>\n        }\n      </header>\n      <div class=\"p-12\">\n        <sd-input\n          size=\"sm\"\n          placeholder=\"T\u00ECm trong nh\u00F3m\"\n          [autoId]=\"'layout-v2-context-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-input>\n      </div>\n      <div class=\"flex-1 overflow-auto px-8 pb-12\">\n        <sd-layout-menu-tree\n          [menus]=\"contextMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n\n  <main class=\"sd-sidebar-v2__content\" data-v2-content data-content-offset=\"rail\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v2{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v2__rail{position:fixed;z-index:30;inset:0 auto 0 0;width:72px}.sd-sidebar-v2__brand,.sd-sidebar-v2__rail-action{width:56px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v2__rail-action:hover,.sd-sidebar-v2__rail-action--active{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v2__brand:focus-visible,.sd-sidebar-v2__rail-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v2__rail-label{width:52px;font-size:10px;line-height:12px;text-align:center}.sd-sidebar-v2__logo,.sd-sidebar-v2__rail-icon{width:24px;height:24px;object-fit:contain}.sd-sidebar-v2__backdrop{position:fixed;z-index:10;inset:0;border:0;background:transparent}.sd-sidebar-v2__flyout{position:fixed;z-index:20;inset:0 auto 0 72px;width:320px}.sd-sidebar-v2__content{min-height:100vh;margin-left:72px}@media(prefers-reduced-motion:reduce){.sd-sidebar-v2__flyout{transition:none}}\n"] }]
+            args: [{ selector: 'sidebar-v2', standalone: true, imports: [SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-v2\" (keydown.escape)=\"closeFromEscape()\">\n  <aside class=\"sd-sidebar-v2__rail d-flex flex-column align-items-center gap-8 py-12 bg-white border-right border-black200\">\n    <button type=\"button\" class=\"sd-sidebar-v2__brand d-flex align-items-center justify-content-center\" aria-label=\"Trang ch\u1EE7\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-v2__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      } @else {\n        <sd-icon name=\"apps\"></sd-icon>\n      }\n    </button>\n\n    <nav class=\"d-flex flex-column align-items-center gap-4 flex-1\" aria-label=\"Nh\u00F3m menu\">\n      @for (item of railItems(); track item.key) {\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-v2__rail-action d-flex flex-column align-items-center justify-content-center gap-4\"\n          [attr.data-v2-group-key]=\"item.key\"\n          [attr.aria-label]=\"item.title\"\n          [attr.aria-expanded]=\"activeGroupKey() === item.key && isFlyoutOpen()\"\n          [class.sd-sidebar-v2__rail-action--active]=\"activeGroupKey() === item.key\"\n          (click)=\"selectGroup(item.menu)\"\n          (mouseenter)=\"previewGroup(item.menu)\"\n          (focus)=\"previewGroup(item.menu)\">\n          @if (item.menu.iconUrl) {\n            <img class=\"sd-sidebar-v2__rail-icon\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n          } @else {\n            <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n          }\n          <span class=\"sd-sidebar-v2__rail-label text-ellipsis\">{{ item.title }}</span>\n        </button>\n      }\n    </nav>\n\n    <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"true\"></sd-layout-user-menu>\n  </aside>\n\n  @if (isFlyoutOpen()) {\n    <button\n      type=\"button\"\n      class=\"sd-sidebar-v2__backdrop\"\n      aria-label=\"\u0110\u00F3ng menu\"\n      (click)=\"closeFromBackdrop()\"\n      (keydown.escape)=\"closeFromEscape()\"></button>\n    <section\n      class=\"sd-sidebar-v2__flyout d-flex flex-column bg-white border-right border-black200 mat-elevation-z4\"\n      [attr.aria-label]=\"activeGroup()?.title || 'Menu'\"\n      (mouseleave)=\"leaveFlyout()\"\n      (keydown.escape)=\"closeFromEscape()\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ activeGroup()?.title || sidebar().defaultTitle || 'Menu' }}</span>\n        @if (isFlyoutLocked()) {\n          <sd-icon name=\"lock\"></sd-icon>\n        }\n      </header>\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong nh\u00F3m\"\n          [autoId]=\"'layout-v2-context-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"flex-1 overflow-auto px-8 pb-12\">\n        <sd-layout-menu-tree\n          [menus]=\"contextMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n\n  <main class=\"sd-sidebar-v2__content\" data-v2-content data-content-offset=\"rail\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v2{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v2__rail{position:fixed;z-index:30;inset:0 auto 0 0;width:72px}.sd-sidebar-v2__brand,.sd-sidebar-v2__rail-action{width:56px;min-height:52px;border:0;border-radius:10px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v2__rail-action:hover,.sd-sidebar-v2__rail-action--active{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v2__brand:focus-visible,.sd-sidebar-v2__rail-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v2__rail-label{width:52px;font-size:10px;line-height:12px;text-align:center}.sd-sidebar-v2__logo,.sd-sidebar-v2__rail-icon{width:24px;height:24px;object-fit:contain}.sd-sidebar-v2__backdrop{position:fixed;z-index:10;inset:0;border:0;background:transparent}.sd-sidebar-v2__flyout{position:fixed;z-index:20;inset:0 auto 0 72px;width:320px}.sd-sidebar-v2__content{min-height:100vh;margin-left:72px}@media(prefers-reduced-motion:reduce){.sd-sidebar-v2__flyout{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class SidebarMobileV2Component {
@@ -1874,11 +1919,11 @@ class SidebarMobileV2Component {
         this.#document.body.style.overflow = this.#previousBodyOverflow;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarMobileV2Component, isStandalone: true, selector: "sidebar-mobile-v2", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-mobile-v2 d-flex flex-column\">\n  <main class=\"sd-sidebar-mobile-v2__content flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  <nav class=\"sd-sidebar-mobile-v2__bar d-flex align-items-stretch bg-white border-top border-black200\" aria-label=\"\u0110i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n    @for (menu of primaryMenus(); track menu.id || menu.title) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        [attr.data-mobile-menu-key]=\"menu.id ? 'id:' + menu.id : null\"\n        [attr.aria-label]=\"menu.tooltipTitle || menu.title || 'Menu'\"\n        [attr.aria-expanded]=\"sheetGroupKey() === (menu.id ? 'id:' + menu.id : '') && isSheetOpen()\"\n        (click)=\"activateMenu(menu, $event.currentTarget)\">\n        @if (menu.iconUrl) {\n          <img class=\"sd-sidebar-mobile-v2__icon\" [src]=\"menu.iconUrl\" alt=\"\" />\n        } @else {\n          <sd-icon [name]=\"menu.icon || 'widgets'\"></sd-icon>\n        }\n        <span class=\"sd-sidebar-mobile-v2__label text-ellipsis\">{{ menu.tooltipTitle || menu.title }}</span>\n      </button>\n    }\n    @if (overflowMenus().length) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        aria-label=\"Th\u00EAm menu\"\n        [attr.aria-expanded]=\"sheetGroupKey() === 'more' && isSheetOpen()\"\n        (click)=\"openMore($event.currentTarget)\">\n        <sd-icon name=\"more_horiz\"></sd-icon>\n        <span class=\"sd-sidebar-mobile-v2__label\">Th\u00EAm</span>\n      </button>\n    }\n  </nav>\n\n  @if (isSheetOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v2__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeSheet()\"></button>\n    <section\n      data-v2-sheet\n      class=\"sd-sidebar-mobile-v2__sheet d-flex flex-column bg-white rounded-top-16 mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"sheetTitle()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onSheetKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ sheetTitle() }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v2__close d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng\"\n          (click)=\"closeSheet()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"d-flex flex-column gap-12 p-12 overflow-auto\">\n        <sd-layout-user-menu [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <sd-input\n          size=\"sm\"\n          placeholder=\"T\u00ECm trong menu\"\n          [autoId]=\"'layout-v2-mobile-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-input>\n        <sd-layout-menu-tree\n          [menus]=\"sheetMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n</div>\n", styles: [".sd-sidebar-mobile-v2{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));background:var(--sd-light)}.sd-sidebar-mobile-v2__bar{position:fixed;z-index:30;inset:auto 0 0;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v2__bar-action,.sd-sidebar-mobile-v2__close{min-width:0;min-height:48px;border:0;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-mobile-v2__bar-action:hover,.sd-sidebar-mobile-v2__close:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v2__bar-action:focus-visible,.sd-sidebar-mobile-v2__close:focus-visible{outline:2px solid var(--sd-primary);outline-offset:-2px}.sd-sidebar-mobile-v2__label{max-width:72px;font-size:11px;line-height:14px}.sd-sidebar-mobile-v2__icon{width:22px;height:22px;object-fit:contain}.sd-sidebar-mobile-v2__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v2__sheet{position:fixed;z-index:50;inset:auto 0 0;max-height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v2__sheet{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarMobileV2Component, isStandalone: true, selector: "sidebar-mobile-v2", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-mobile-v2 d-flex flex-column\">\n  <main class=\"sd-sidebar-mobile-v2__content flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  <nav class=\"sd-sidebar-mobile-v2__bar d-flex align-items-stretch bg-white border-top border-black200\" aria-label=\"\u0110i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n    @for (menu of primaryMenus(); track menu.id || menu.title) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        [attr.data-mobile-menu-key]=\"menu.id ? 'id:' + menu.id : null\"\n        [attr.aria-label]=\"menu.tooltipTitle || menu.title || 'Menu'\"\n        [attr.aria-expanded]=\"sheetGroupKey() === (menu.id ? 'id:' + menu.id : '') && isSheetOpen()\"\n        (click)=\"activateMenu(menu, $event.currentTarget)\">\n        @if (menu.iconUrl) {\n          <img class=\"sd-sidebar-mobile-v2__icon\" [src]=\"menu.iconUrl\" alt=\"\" />\n        } @else {\n          <sd-icon [name]=\"menu.icon || 'widgets'\"></sd-icon>\n        }\n        <span class=\"sd-sidebar-mobile-v2__label text-ellipsis\">{{ menu.tooltipTitle || menu.title }}</span>\n      </button>\n    }\n    @if (overflowMenus().length) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        aria-label=\"Th\u00EAm menu\"\n        [attr.aria-expanded]=\"sheetGroupKey() === 'more' && isSheetOpen()\"\n        (click)=\"openMore($event.currentTarget)\">\n        <sd-icon name=\"more_horiz\"></sd-icon>\n        <span class=\"sd-sidebar-mobile-v2__label\">Th\u00EAm</span>\n      </button>\n    }\n  </nav>\n\n  @if (isSheetOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v2__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeSheet()\"></button>\n    <section\n      data-v2-sheet\n      class=\"sd-sidebar-mobile-v2__sheet d-flex flex-column bg-white rounded-top-16 mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"sheetTitle()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onSheetKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ sheetTitle() }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v2__close d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng\"\n          (click)=\"closeSheet()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"d-flex flex-column gap-12 p-12 overflow-auto\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong menu\"\n          [autoId]=\"'layout-v2-mobile-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n        <sd-layout-menu-tree\n          [menus]=\"sheetMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          pinVisibility=\"always\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v2{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));background:var(--sd-light)}.sd-sidebar-mobile-v2__bar{position:fixed;z-index:30;inset:auto 0 0;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v2__bar-action,.sd-sidebar-mobile-v2__close{min-width:0;min-height:48px;border:0;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-mobile-v2__bar-action:hover,.sd-sidebar-mobile-v2__close:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v2__bar-action:focus-visible,.sd-sidebar-mobile-v2__close:focus-visible{outline:2px solid var(--sd-primary);outline-offset:-2px}.sd-sidebar-mobile-v2__label{max-width:72px;font-size:11px;line-height:14px}.sd-sidebar-mobile-v2__icon{width:22px;height:22px;object-fit:contain}.sd-sidebar-mobile-v2__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v2__sheet{position:fixed;z-index:50;inset:auto 0 0;max-height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v2__sheet{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar-mobile-v2', standalone: true, imports: [A11yModule, SdIcon, SdInput, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-mobile-v2 d-flex flex-column\">\n  <main class=\"sd-sidebar-mobile-v2__content flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  <nav class=\"sd-sidebar-mobile-v2__bar d-flex align-items-stretch bg-white border-top border-black200\" aria-label=\"\u0110i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n    @for (menu of primaryMenus(); track menu.id || menu.title) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        [attr.data-mobile-menu-key]=\"menu.id ? 'id:' + menu.id : null\"\n        [attr.aria-label]=\"menu.tooltipTitle || menu.title || 'Menu'\"\n        [attr.aria-expanded]=\"sheetGroupKey() === (menu.id ? 'id:' + menu.id : '') && isSheetOpen()\"\n        (click)=\"activateMenu(menu, $event.currentTarget)\">\n        @if (menu.iconUrl) {\n          <img class=\"sd-sidebar-mobile-v2__icon\" [src]=\"menu.iconUrl\" alt=\"\" />\n        } @else {\n          <sd-icon [name]=\"menu.icon || 'widgets'\"></sd-icon>\n        }\n        <span class=\"sd-sidebar-mobile-v2__label text-ellipsis\">{{ menu.tooltipTitle || menu.title }}</span>\n      </button>\n    }\n    @if (overflowMenus().length) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        aria-label=\"Th\u00EAm menu\"\n        [attr.aria-expanded]=\"sheetGroupKey() === 'more' && isSheetOpen()\"\n        (click)=\"openMore($event.currentTarget)\">\n        <sd-icon name=\"more_horiz\"></sd-icon>\n        <span class=\"sd-sidebar-mobile-v2__label\">Th\u00EAm</span>\n      </button>\n    }\n  </nav>\n\n  @if (isSheetOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v2__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeSheet()\"></button>\n    <section\n      data-v2-sheet\n      class=\"sd-sidebar-mobile-v2__sheet d-flex flex-column bg-white rounded-top-16 mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"sheetTitle()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onSheetKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ sheetTitle() }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v2__close d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng\"\n          (click)=\"closeSheet()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"d-flex flex-column gap-12 p-12 overflow-auto\">\n        <sd-layout-user-menu [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <sd-input\n          size=\"sm\"\n          placeholder=\"T\u00ECm trong menu\"\n          [autoId]=\"'layout-v2-mobile-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-input>\n        <sd-layout-menu-tree\n          [menus]=\"sheetMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n</div>\n", styles: [".sd-sidebar-mobile-v2{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));background:var(--sd-light)}.sd-sidebar-mobile-v2__bar{position:fixed;z-index:30;inset:auto 0 0;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v2__bar-action,.sd-sidebar-mobile-v2__close{min-width:0;min-height:48px;border:0;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-mobile-v2__bar-action:hover,.sd-sidebar-mobile-v2__close:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v2__bar-action:focus-visible,.sd-sidebar-mobile-v2__close:focus-visible{outline:2px solid var(--sd-primary);outline-offset:-2px}.sd-sidebar-mobile-v2__label{max-width:72px;font-size:11px;line-height:14px}.sd-sidebar-mobile-v2__icon{width:22px;height:22px;object-fit:contain}.sd-sidebar-mobile-v2__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v2__sheet{position:fixed;z-index:50;inset:auto 0 0;max-height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v2__sheet{transition:none}}\n"] }]
+            args: [{ selector: 'sidebar-mobile-v2', standalone: true, imports: [A11yModule, SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-mobile-v2 d-flex flex-column\">\n  <main class=\"sd-sidebar-mobile-v2__content flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  <nav class=\"sd-sidebar-mobile-v2__bar d-flex align-items-stretch bg-white border-top border-black200\" aria-label=\"\u0110i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n    @for (menu of primaryMenus(); track menu.id || menu.title) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        [attr.data-mobile-menu-key]=\"menu.id ? 'id:' + menu.id : null\"\n        [attr.aria-label]=\"menu.tooltipTitle || menu.title || 'Menu'\"\n        [attr.aria-expanded]=\"sheetGroupKey() === (menu.id ? 'id:' + menu.id : '') && isSheetOpen()\"\n        (click)=\"activateMenu(menu, $event.currentTarget)\">\n        @if (menu.iconUrl) {\n          <img class=\"sd-sidebar-mobile-v2__icon\" [src]=\"menu.iconUrl\" alt=\"\" />\n        } @else {\n          <sd-icon [name]=\"menu.icon || 'widgets'\"></sd-icon>\n        }\n        <span class=\"sd-sidebar-mobile-v2__label text-ellipsis\">{{ menu.tooltipTitle || menu.title }}</span>\n      </button>\n    }\n    @if (overflowMenus().length) {\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-mobile-v2__bar-action d-flex flex-column align-items-center justify-content-center gap-4 flex-1\"\n        aria-label=\"Th\u00EAm menu\"\n        [attr.aria-expanded]=\"sheetGroupKey() === 'more' && isSheetOpen()\"\n        (click)=\"openMore($event.currentTarget)\">\n        <sd-icon name=\"more_horiz\"></sd-icon>\n        <span class=\"sd-sidebar-mobile-v2__label\">Th\u00EAm</span>\n      </button>\n    }\n  </nav>\n\n  @if (isSheetOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v2__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeSheet()\"></button>\n    <section\n      data-v2-sheet\n      class=\"sd-sidebar-mobile-v2__sheet d-flex flex-column bg-white rounded-top-16 mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"sheetTitle()\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onSheetKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T16M text-ellipsis\">{{ sheetTitle() }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v2__close d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng\"\n          (click)=\"closeSheet()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"d-flex flex-column gap-12 p-12 overflow-auto\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong menu\"\n          [autoId]=\"'layout-v2-mobile-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n        <sd-layout-menu-tree\n          [menus]=\"sheetMenus()\"\n          [query]=\"searchText()\"\n          [activePath]=\"activePath()\"\n          [pinnedKeys]=\"pinnedKeys()\"\n          pinVisibility=\"always\"\n          (navigate)=\"onNavigate($event)\"\n          (togglePinned)=\"onTogglePinned($event)\">\n        </sd-layout-menu-tree>\n      </div>\n    </section>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v2{min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom));background:var(--sd-light)}.sd-sidebar-mobile-v2__bar{position:fixed;z-index:30;inset:auto 0 0;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v2__bar-action,.sd-sidebar-mobile-v2__close{min-width:0;min-height:48px;border:0;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-mobile-v2__bar-action:hover,.sd-sidebar-mobile-v2__close:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v2__bar-action:focus-visible,.sd-sidebar-mobile-v2__close:focus-visible{outline:2px solid var(--sd-primary);outline-offset:-2px}.sd-sidebar-mobile-v2__label{max-width:72px;font-size:11px;line-height:14px}.sd-sidebar-mobile-v2__icon{width:22px;height:22px;object-fit:contain}.sd-sidebar-mobile-v2__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v2__sheet{position:fixed;z-index:50;inset:auto 0 0;max-height:min(78dvh,720px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v2__sheet{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class SidebarV3Component {
@@ -1947,11 +1992,11 @@ class SidebarV3Component {
         this.#navigationState.togglePinned(menu);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarV3Component, isStandalone: true, selector: "sidebar-v3", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-v3\" [class.sd-sidebar-v3--collapsed]=\"isCollapsed()\">\n  <aside\n    class=\"sd-sidebar-v3__drawer d-flex flex-column bg-white border-right border-black200\"\n    data-v3-sidebar\n    [attr.data-collapsed]=\"isCollapsed()\">\n    <header class=\"d-flex align-items-center justify-content-between gap-8 p-12 border-bottom border-black200\">\n      <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n        @if (sidebar().logoUrl) {\n          <img class=\"sd-sidebar-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n        } @else {\n          <sd-icon name=\"apps\"></sd-icon>\n        }\n        @if (!isCollapsed()) {\n          <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        }\n      </div>\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-v3__icon-action d-flex align-items-center justify-content-center\"\n        [attr.aria-label]=\"isCollapsed() ? 'M\u1EDF r\u1ED9ng sidebar' : 'Thu g\u1ECDn sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        (click)=\"toggleCollapsed()\">\n        <sd-icon [name]=\"isCollapsed() ? 'chevron_right' : 'chevron_left'\"></sd-icon>\n      </button>\n    </header>\n\n    @if (isCollapsed()) {\n      <nav class=\"d-flex flex-column align-items-center gap-4 p-8 flex-1\" aria-label=\"Menu thu g\u1ECDn\">\n        @for (item of collapsedItems(); track item.key) {\n          <button\n            type=\"button\"\n            class=\"sd-sidebar-v3__collapsed-action d-flex align-items-center justify-content-center\"\n            [attr.aria-label]=\"item.title\"\n            (click)=\"activateCollapsedMenu(item.menu)\">\n            @if (item.menu.iconUrl) {\n              <img class=\"sd-sidebar-v3__logo\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n            } @else {\n              <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n            }\n          </button>\n        }\n      </nav>\n    } @else {\n      <div class=\"p-12\">\n        <sd-input\n          size=\"sm\"\n          placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n          [autoId]=\"'layout-v3-global-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-input>\n      </div>\n      <div class=\"sd-sidebar-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto px-8 pb-12\">\n        @if (pinnedMenus().length) {\n          <section data-v3-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    }\n\n    <div class=\"p-8 border-top border-black200\">\n      <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"isCollapsed()\"></sd-layout-user-menu>\n    </div>\n  </aside>\n\n  <main class=\"sd-sidebar-v3__content\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v3{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v3__drawer{position:fixed;z-index:20;inset:0 auto 0 0;width:304px;transition:width .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__drawer{width:72px}.sd-sidebar-v3__content{min-height:100vh;margin-left:304px;transition:margin-left .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__content{margin-left:72px}.sd-sidebar-v3__icon-action,.sd-sidebar-v3__collapsed-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v3__icon-action:hover,.sd-sidebar-v3__collapsed-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v3__icon-action:focus-visible,.sd-sidebar-v3__collapsed-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v3__logo{width:28px;height:28px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-sidebar-v3__drawer,.sd-sidebar-v3__content{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarV3Component, isStandalone: true, selector: "sidebar-v3", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-sidebar-v3\" [class.sd-sidebar-v3--collapsed]=\"isCollapsed()\">\n  <aside\n    class=\"sd-sidebar-v3__drawer d-flex flex-column bg-white border-right border-black200\"\n    data-v3-sidebar\n    [attr.data-collapsed]=\"isCollapsed()\">\n    <header\n      data-v3-header\n      class=\"sd-sidebar-v3__header d-flex align-items-center gap-8 p-12 border-bottom border-black200\"\n      [class.sd-sidebar-v3__header--collapsed]=\"isCollapsed()\"\n      [class.justify-content-between]=\"!isCollapsed()\"\n      [class.justify-content-center]=\"isCollapsed()\">\n      @if (!isCollapsed()) {\n        <div data-v3-brand class=\"d-flex align-items-center gap-8 overflow-hidden\">\n          @if (sidebar().logoUrl) {\n            <img class=\"sd-sidebar-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n          <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        </div>\n      }\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-v3__icon-action d-flex align-items-center justify-content-center\"\n        [attr.aria-label]=\"isCollapsed() ? 'M\u1EDF r\u1ED9ng sidebar' : 'Thu g\u1ECDn sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        (click)=\"toggleCollapsed()\">\n        <sd-icon [name]=\"isCollapsed() ? 'chevron_right' : 'chevron_left'\"></sd-icon>\n      </button>\n    </header>\n\n    @if (isCollapsed()) {\n      <nav class=\"d-flex flex-column align-items-center gap-4 p-8 flex-1\" aria-label=\"Menu thu g\u1ECDn\">\n        @for (item of collapsedItems(); track item.key) {\n          <button\n            type=\"button\"\n            class=\"sd-sidebar-v3__collapsed-action d-flex align-items-center justify-content-center\"\n            [attr.aria-label]=\"item.title\"\n            (click)=\"activateCollapsedMenu(item.menu)\">\n            @if (item.menu.iconUrl) {\n              <img class=\"sd-sidebar-v3__logo\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n            } @else {\n              <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n            }\n          </button>\n        }\n      </nav>\n    } @else {\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n          [autoId]=\"'layout-v3-global-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"sd-sidebar-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto px-8 pb-12\">\n        @if (pinnedMenus().length) {\n          <section data-v3-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    }\n\n    <div class=\"p-8 border-top border-black200\">\n      <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"isCollapsed()\"></sd-layout-user-menu>\n    </div>\n  </aside>\n\n  <main class=\"sd-sidebar-v3__content\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v3{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v3__drawer{position:fixed;z-index:20;inset:0 auto 0 0;width:304px;transition:width .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__drawer{width:72px}.sd-sidebar-v3__content{min-height:100vh;margin-left:304px;transition:margin-left .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__content{margin-left:72px}.sd-sidebar-v3__icon-action,.sd-sidebar-v3__collapsed-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v3__icon-action:hover,.sd-sidebar-v3__collapsed-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v3__icon-action:focus-visible,.sd-sidebar-v3__collapsed-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v3__logo{width:28px;height:28px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-sidebar-v3__drawer,.sd-sidebar-v3__content{transition:none}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarV3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar-v3', standalone: true, imports: [SdIcon, SdInput, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-v3\" [class.sd-sidebar-v3--collapsed]=\"isCollapsed()\">\n  <aside\n    class=\"sd-sidebar-v3__drawer d-flex flex-column bg-white border-right border-black200\"\n    data-v3-sidebar\n    [attr.data-collapsed]=\"isCollapsed()\">\n    <header class=\"d-flex align-items-center justify-content-between gap-8 p-12 border-bottom border-black200\">\n      <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n        @if (sidebar().logoUrl) {\n          <img class=\"sd-sidebar-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n        } @else {\n          <sd-icon name=\"apps\"></sd-icon>\n        }\n        @if (!isCollapsed()) {\n          <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        }\n      </div>\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-v3__icon-action d-flex align-items-center justify-content-center\"\n        [attr.aria-label]=\"isCollapsed() ? 'M\u1EDF r\u1ED9ng sidebar' : 'Thu g\u1ECDn sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        (click)=\"toggleCollapsed()\">\n        <sd-icon [name]=\"isCollapsed() ? 'chevron_right' : 'chevron_left'\"></sd-icon>\n      </button>\n    </header>\n\n    @if (isCollapsed()) {\n      <nav class=\"d-flex flex-column align-items-center gap-4 p-8 flex-1\" aria-label=\"Menu thu g\u1ECDn\">\n        @for (item of collapsedItems(); track item.key) {\n          <button\n            type=\"button\"\n            class=\"sd-sidebar-v3__collapsed-action d-flex align-items-center justify-content-center\"\n            [attr.aria-label]=\"item.title\"\n            (click)=\"activateCollapsedMenu(item.menu)\">\n            @if (item.menu.iconUrl) {\n              <img class=\"sd-sidebar-v3__logo\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n            } @else {\n              <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n            }\n          </button>\n        }\n      </nav>\n    } @else {\n      <div class=\"p-12\">\n        <sd-input\n          size=\"sm\"\n          placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n          [autoId]=\"'layout-v3-global-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-input>\n      </div>\n      <div class=\"sd-sidebar-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto px-8 pb-12\">\n        @if (pinnedMenus().length) {\n          <section data-v3-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    }\n\n    <div class=\"p-8 border-top border-black200\">\n      <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"isCollapsed()\"></sd-layout-user-menu>\n    </div>\n  </aside>\n\n  <main class=\"sd-sidebar-v3__content\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v3{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v3__drawer{position:fixed;z-index:20;inset:0 auto 0 0;width:304px;transition:width .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__drawer{width:72px}.sd-sidebar-v3__content{min-height:100vh;margin-left:304px;transition:margin-left .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__content{margin-left:72px}.sd-sidebar-v3__icon-action,.sd-sidebar-v3__collapsed-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v3__icon-action:hover,.sd-sidebar-v3__collapsed-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v3__icon-action:focus-visible,.sd-sidebar-v3__collapsed-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v3__logo{width:28px;height:28px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-sidebar-v3__drawer,.sd-sidebar-v3__content{transition:none}}\n"] }]
+            args: [{ selector: 'sidebar-v3', standalone: true, imports: [SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-v3\" [class.sd-sidebar-v3--collapsed]=\"isCollapsed()\">\n  <aside\n    class=\"sd-sidebar-v3__drawer d-flex flex-column bg-white border-right border-black200\"\n    data-v3-sidebar\n    [attr.data-collapsed]=\"isCollapsed()\">\n    <header\n      data-v3-header\n      class=\"sd-sidebar-v3__header d-flex align-items-center gap-8 p-12 border-bottom border-black200\"\n      [class.sd-sidebar-v3__header--collapsed]=\"isCollapsed()\"\n      [class.justify-content-between]=\"!isCollapsed()\"\n      [class.justify-content-center]=\"isCollapsed()\">\n      @if (!isCollapsed()) {\n        <div data-v3-brand class=\"d-flex align-items-center gap-8 overflow-hidden\">\n          @if (sidebar().logoUrl) {\n            <img class=\"sd-sidebar-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n          } @else {\n            <sd-icon name=\"apps\"></sd-icon>\n          }\n          <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        </div>\n      }\n      <button\n        type=\"button\"\n        class=\"sd-sidebar-v3__icon-action d-flex align-items-center justify-content-center\"\n        [attr.aria-label]=\"isCollapsed() ? 'M\u1EDF r\u1ED9ng sidebar' : 'Thu g\u1ECDn sidebar'\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        (click)=\"toggleCollapsed()\">\n        <sd-icon [name]=\"isCollapsed() ? 'chevron_right' : 'chevron_left'\"></sd-icon>\n      </button>\n    </header>\n\n    @if (isCollapsed()) {\n      <nav class=\"d-flex flex-column align-items-center gap-4 p-8 flex-1\" aria-label=\"Menu thu g\u1ECDn\">\n        @for (item of collapsedItems(); track item.key) {\n          <button\n            type=\"button\"\n            class=\"sd-sidebar-v3__collapsed-action d-flex align-items-center justify-content-center\"\n            [attr.aria-label]=\"item.title\"\n            (click)=\"activateCollapsedMenu(item.menu)\">\n            @if (item.menu.iconUrl) {\n              <img class=\"sd-sidebar-v3__logo\" [src]=\"item.menu.iconUrl\" alt=\"\" />\n            } @else {\n              <sd-icon [name]=\"item.menu.icon || 'widgets'\"></sd-icon>\n            }\n          </button>\n        }\n      </nav>\n    } @else {\n      <div class=\"p-12\">\n        <sd-layout-search-field\n          placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n          [autoId]=\"'layout-v3-global-search'\"\n          [model]=\"searchText()\"\n          (sdChange)=\"searchText.set($event)\">\n        </sd-layout-search-field>\n      </div>\n      <div class=\"sd-sidebar-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto px-8 pb-12\">\n        @if (pinnedMenus().length) {\n          <section data-v3-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    }\n\n    <div class=\"p-8 border-top border-black200\">\n      <sd-layout-user-menu [userInfo]=\"userInfo()\" [compact]=\"isCollapsed()\"></sd-layout-user-menu>\n    </div>\n  </aside>\n\n  <main class=\"sd-sidebar-v3__content\">\n    <ng-content></ng-content>\n  </main>\n</div>\n", styles: [".sd-sidebar-v3{min-height:100vh;background:var(--sd-light)}.sd-sidebar-v3__drawer{position:fixed;z-index:20;inset:0 auto 0 0;width:304px;transition:width .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__drawer{width:72px}.sd-sidebar-v3__content{min-height:100vh;margin-left:304px;transition:margin-left .16s ease}.sd-sidebar-v3--collapsed .sd-sidebar-v3__content{margin-left:72px}.sd-sidebar-v3__icon-action,.sd-sidebar-v3__collapsed-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black400);cursor:pointer}.sd-sidebar-v3__icon-action:hover,.sd-sidebar-v3__collapsed-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-v3__icon-action:focus-visible,.sd-sidebar-v3__collapsed-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-v3__logo{width:28px;height:28px;object-fit:contain}@media(prefers-reduced-motion:reduce){.sd-sidebar-v3__drawer,.sd-sidebar-v3__content{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class SidebarMobileV3Component {
@@ -2047,11 +2092,11 @@ class SidebarMobileV3Component {
         this.#document.body.style.overflow = this.#previousBodyOverflow;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarMobileV3Component, isStandalone: true, selector: "sidebar-mobile-v3", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sd-sidebar-mobile-v3 d-flex flex-column\">\n  <header\n    class=\"sd-sidebar-mobile-v3__topbar d-flex align-items-center justify-content-between gap-8 px-16 bg-white border-bottom border-black200\">\n    <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-mobile-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      }\n      <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button\n      #trigger\n      type=\"button\"\n      data-v3-mobile-trigger\n      class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n      aria-label=\"M\u1EDF menu\"\n      [attr.aria-expanded]=\"isDrawerOpen()\"\n      (click)=\"openDrawer($event.currentTarget)\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </header>\n\n  <main class=\"flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  @if (isDrawerOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v3__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeFromBackdrop()\"></button>\n    <aside\n      class=\"sd-sidebar-mobile-v3__drawer d-flex flex-column bg-white mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu ch\u00EDnh\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onDrawerKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T18M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng menu\"\n          (click)=\"closeFromBackdrop()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"sd-sidebar-mobile-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto p-12\">\n        <sd-layout-user-menu [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <div class=\"sd-sidebar-mobile-v3__search bg-white\">\n          <sd-input\n            size=\"sm\"\n            placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n            [autoId]=\"'layout-v3-mobile-global-search'\"\n            [model]=\"searchText()\"\n            (sdChange)=\"searchText.set($event)\">\n          </sd-input>\n        </div>\n        @if (pinnedMenus().length) {\n          <section data-v3-mobile-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-mobile-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [".sd-sidebar-mobile-v3{min-height:100dvh;background:var(--sd-light)}.sd-sidebar-mobile-v3__topbar{min-height:56px}.sd-sidebar-mobile-v3__icon-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black500);cursor:pointer}.sd-sidebar-mobile-v3__icon-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v3__icon-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-mobile-v3__logo{width:28px;height:28px;object-fit:contain}.sd-sidebar-mobile-v3__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v3__drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v3__search{position:sticky;z-index:2;top:0}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v3__drawer{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "mask", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SidebarMobileV3Component, isStandalone: true, selector: "sidebar-mobile-v3", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: true, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sd-sidebar-mobile-v3 d-flex flex-column\">\n  <header\n    class=\"sd-sidebar-mobile-v3__topbar d-flex align-items-center justify-content-between gap-8 px-16 bg-white border-bottom border-black200\">\n    <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-mobile-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      }\n      <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button\n      #trigger\n      type=\"button\"\n      data-v3-mobile-trigger\n      class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n      aria-label=\"M\u1EDF menu\"\n      [attr.aria-expanded]=\"isDrawerOpen()\"\n      (click)=\"openDrawer($event.currentTarget)\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </header>\n\n  <main class=\"flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  @if (isDrawerOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v3__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeFromBackdrop()\"></button>\n    <aside\n      class=\"sd-sidebar-mobile-v3__drawer d-flex flex-column bg-white mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu ch\u00EDnh\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onDrawerKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T18M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng menu\"\n          (click)=\"closeFromBackdrop()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"sd-sidebar-mobile-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto p-12\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <div class=\"sd-sidebar-mobile-v3__search bg-white\">\n          <sd-layout-search-field\n            placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n            [autoId]=\"'layout-v3-mobile-global-search'\"\n            [model]=\"searchText()\"\n            (sdChange)=\"searchText.set($event)\">\n          </sd-layout-search-field>\n        </div>\n        @if (pinnedMenus().length) {\n          <section data-v3-mobile-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              pinVisibility=\"always\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-mobile-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            pinVisibility=\"always\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v3{min-height:100dvh;background:var(--sd-light)}.sd-sidebar-mobile-v3__topbar{min-height:56px}.sd-sidebar-mobile-v3__icon-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black500);cursor:pointer}.sd-sidebar-mobile-v3__icon-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v3__icon-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-mobile-v3__logo{width:28px;height:28px;object-fit:contain}.sd-sidebar-mobile-v3__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v3__drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v3__search{position:sticky;z-index:2;top:-12px;margin:-12px;padding:12px;background:var(--sd-white, #fff)}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v3__drawer{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: SdLayoutSearchFieldComponent, selector: "sd-layout-search-field", inputs: ["model", "placeholder", "autoId"], outputs: ["sdChange"] }, { kind: "component", type: SdLayoutMenuTreeComponent, selector: "sd-layout-menu-tree", inputs: ["menus", "query", "activePath", "pinnedKeys", "showPin", "pinVisibility"], outputs: ["navigate", "togglePinned"] }, { kind: "component", type: SdLayoutUserMenuComponent, selector: "sd-layout-user-menu", inputs: ["userInfo", "signout", "changePassword", "updateProfile", "setting", "notification", "compact", "presentation"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarMobileV3Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sidebar-mobile-v3', standalone: true, imports: [A11yModule, SdIcon, SdInput, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-mobile-v3 d-flex flex-column\">\n  <header\n    class=\"sd-sidebar-mobile-v3__topbar d-flex align-items-center justify-content-between gap-8 px-16 bg-white border-bottom border-black200\">\n    <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-mobile-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      }\n      <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button\n      #trigger\n      type=\"button\"\n      data-v3-mobile-trigger\n      class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n      aria-label=\"M\u1EDF menu\"\n      [attr.aria-expanded]=\"isDrawerOpen()\"\n      (click)=\"openDrawer($event.currentTarget)\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </header>\n\n  <main class=\"flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  @if (isDrawerOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v3__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeFromBackdrop()\"></button>\n    <aside\n      class=\"sd-sidebar-mobile-v3__drawer d-flex flex-column bg-white mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu ch\u00EDnh\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onDrawerKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T18M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng menu\"\n          (click)=\"closeFromBackdrop()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"sd-sidebar-mobile-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto p-12\">\n        <sd-layout-user-menu [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <div class=\"sd-sidebar-mobile-v3__search bg-white\">\n          <sd-input\n            size=\"sm\"\n            placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n            [autoId]=\"'layout-v3-mobile-global-search'\"\n            [model]=\"searchText()\"\n            (sdChange)=\"searchText.set($event)\">\n          </sd-input>\n        </div>\n        @if (pinnedMenus().length) {\n          <section data-v3-mobile-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-mobile-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [".sd-sidebar-mobile-v3{min-height:100dvh;background:var(--sd-light)}.sd-sidebar-mobile-v3__topbar{min-height:56px}.sd-sidebar-mobile-v3__icon-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black500);cursor:pointer}.sd-sidebar-mobile-v3__icon-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v3__icon-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-mobile-v3__logo{width:28px;height:28px;object-fit:contain}.sd-sidebar-mobile-v3__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v3__drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v3__search{position:sticky;z-index:2;top:0}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v3__drawer{transition:none}}\n"] }]
+            args: [{ selector: 'sidebar-mobile-v3', standalone: true, imports: [A11yModule, SdIcon, SdLayoutSearchFieldComponent, SdLayoutMenuTreeComponent, SdLayoutUserMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-sidebar-mobile-v3 d-flex flex-column\">\n  <header\n    class=\"sd-sidebar-mobile-v3__topbar d-flex align-items-center justify-content-between gap-8 px-16 bg-white border-bottom border-black200\">\n    <div class=\"d-flex align-items-center gap-8 overflow-hidden\">\n      @if (sidebar().logoUrl) {\n        <img class=\"sd-sidebar-mobile-v3__logo\" [src]=\"sidebar().logoUrl\" alt=\"\" />\n      }\n      <span class=\"T16M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n    </div>\n    <button\n      #trigger\n      type=\"button\"\n      data-v3-mobile-trigger\n      class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n      aria-label=\"M\u1EDF menu\"\n      [attr.aria-expanded]=\"isDrawerOpen()\"\n      (click)=\"openDrawer($event.currentTarget)\">\n      <sd-icon name=\"menu\"></sd-icon>\n    </button>\n  </header>\n\n  <main class=\"flex-1 overflow-auto\">\n    <ng-content></ng-content>\n  </main>\n\n  @if (isDrawerOpen()) {\n    <button type=\"button\" class=\"sd-sidebar-mobile-v3__backdrop\" aria-label=\"\u0110\u00F3ng menu\" (click)=\"closeFromBackdrop()\"></button>\n    <aside\n      class=\"sd-sidebar-mobile-v3__drawer d-flex flex-column bg-white mat-elevation-z8\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Menu ch\u00EDnh\"\n      cdkTrapFocus\n      [cdkTrapFocusAutoCapture]=\"true\"\n      (keydown)=\"onDrawerKeydown($event)\">\n      <header class=\"d-flex align-items-center justify-content-between gap-8 px-16 py-12 border-bottom border-black200\">\n        <span class=\"T18M text-ellipsis\">{{ sidebar().defaultTitle || 'Back Office' }}</span>\n        <button\n          type=\"button\"\n          class=\"sd-sidebar-mobile-v3__icon-action d-flex align-items-center justify-content-center\"\n          aria-label=\"\u0110\u00F3ng menu\"\n          (click)=\"closeFromBackdrop()\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      </header>\n      <div class=\"sd-sidebar-mobile-v3__navigation d-flex flex-column gap-16 flex-1 overflow-auto p-12\">\n        <sd-layout-user-menu presentation=\"mobile-inline\" [userInfo]=\"userInfo()\"></sd-layout-user-menu>\n        <div class=\"sd-sidebar-mobile-v3__search bg-white\">\n          <sd-layout-search-field\n            placeholder=\"T\u00ECm trong t\u1EA5t c\u1EA3 menu\"\n            [autoId]=\"'layout-v3-mobile-global-search'\"\n            [model]=\"searchText()\"\n            (sdChange)=\"searchText.set($event)\">\n          </sd-layout-search-field>\n        </div>\n        @if (pinnedMenus().length) {\n          <section data-v3-mobile-pinned class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">\u0110\u00E3 ghim</h2>\n            <sd-layout-menu-tree\n              [menus]=\"pinnedMenus()\"\n              [activePath]=\"activePath()\"\n              [pinnedKeys]=\"pinnedKeys()\"\n              pinVisibility=\"always\"\n              (navigate)=\"navigateMenu($event)\"\n              (togglePinned)=\"onTogglePinned($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        @if (recentConfiguration().enabled && recentMenus().length) {\n          <section data-v3-mobile-recent class=\"d-flex flex-column gap-4\">\n            <h2 class=\"T12M text-black400 px-12 m-0\">G\u1EA7n \u0111\u00E2y</h2>\n            <sd-layout-menu-tree [menus]=\"recentMenus()\" [activePath]=\"activePath()\" [showPin]=\"false\" (navigate)=\"navigateMenu($event)\">\n            </sd-layout-menu-tree>\n          </section>\n        }\n        <section class=\"d-flex flex-column gap-4\">\n          <h2 class=\"T12M text-black400 px-12 m-0\">T\u1EA5t c\u1EA3 menu</h2>\n          <sd-layout-menu-tree\n            [menus]=\"menus()\"\n            [query]=\"searchText()\"\n            [activePath]=\"activePath()\"\n            [pinnedKeys]=\"pinnedKeys()\"\n            pinVisibility=\"always\"\n            (navigate)=\"navigateMenu($event)\"\n            (togglePinned)=\"onTogglePinned($event)\">\n          </sd-layout-menu-tree>\n        </section>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{display:block}.sd-sidebar-mobile-v3{min-height:100dvh;background:var(--sd-light)}.sd-sidebar-mobile-v3__topbar{min-height:56px}.sd-sidebar-mobile-v3__icon-action{width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--sd-black500);cursor:pointer}.sd-sidebar-mobile-v3__icon-action:hover{color:var(--sd-primary);background:var(--sd-primary-light)}.sd-sidebar-mobile-v3__icon-action:focus-visible{outline:2px solid var(--sd-primary);outline-offset:2px}.sd-sidebar-mobile-v3__logo{width:28px;height:28px;object-fit:contain}.sd-sidebar-mobile-v3__backdrop{position:fixed;z-index:40;inset:0;border:0;background:color-mix(in srgb,var(--sd-black) 40%,transparent)}.sd-sidebar-mobile-v3__drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);max-width:100%;padding-bottom:env(safe-area-inset-bottom)}.sd-sidebar-mobile-v3__search{position:sticky;z-index:2;top:-12px;margin:-12px;padding:12px;background:var(--sd-white, #fff)}@media(prefers-reduced-motion:reduce){.sd-sidebar-mobile-v3__drawer{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: true }] }] } });
 
 class SdLayoutComponent {
@@ -2087,7 +2132,7 @@ class SdLayoutComponent {
     mobileBreakpoint = normalizeLayoutMobileBreakpoint(this.#layoutConfiguration?.mobileBreakpoint);
     isMobile = computed(() => this.#responsiveService.isMobile(this.mobileBreakpoint), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutComponent, isStandalone: true, selector: "sd-layout", inputs: { menusInput: { classPropertyName: "menusInput", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: SidebarV1Component, selector: "sidebar-v1", inputs: ["menus", "userInfo", "sidebar", "isMobile"] }, { kind: "component", type: SidebarMobileV1Component, selector: "sidebar-mobile-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarV2Component, selector: "sidebar-v2", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV2Component, selector: "sidebar-mobile-v2", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarV3Component, selector: "sidebar-v3", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV3Component, selector: "sidebar-mobile-v3", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdLayoutComponent, isStandalone: true, selector: "sd-layout", inputs: { menusInput: { classPropertyName: "menusInput", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: SidebarV1Component, selector: "sidebar-v1", inputs: ["menus", "userInfo", "sidebar", "isMobile"] }, { kind: "component", type: SidebarMobileV1Component, selector: "sidebar-mobile-v1", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarV2Component, selector: "sidebar-v2", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV2Component, selector: "sidebar-mobile-v2", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarV3Component, selector: "sidebar-v3", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "component", type: SidebarMobileV3Component, selector: "sidebar-mobile-v3", inputs: ["menus", "userInfo", "sidebar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutComponent, decorators: [{
             type: Component,
@@ -2099,7 +2144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         SidebarV3Component,
                         SidebarMobileV3Component,
                         NgTemplateOutlet,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { menusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }] } });
 
 // End
@@ -2221,7 +2266,7 @@ const routes = [
 ];
 class HomeRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, imports: [i1$4.RouterModule], exports: [RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HomeRoutingModule, decorators: [{
@@ -2296,7 +2341,7 @@ const Routes$2 = [{ path: '', component: RootComponent$1 }];
 
 class NotFoundModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, imports: [CommonModule, i1$4.RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, imports: [CommonModule, i1$3.RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, imports: [CommonModule, RouterModule.forChild(Routes$2)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NotFoundModule, decorators: [{
@@ -2358,7 +2403,7 @@ const Routes$1 = [{ path: '', component: RootComponent }];
 
 class ForbiddenModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, i1$4.RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, i1$3.RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, imports: [CommonModule, RouterModule.forChild(Routes$1)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ForbiddenModule, decorators: [{
@@ -2396,7 +2441,7 @@ const Routes = [
 
 class SdLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, imports: [i1$4.RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, imports: [i1$3.RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, imports: [RouterModule.forChild(Routes)] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutModule, decorators: [{