@sdcorejs/angular 21.2.1 → 21.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,7 +6,7 @@ import * as i1$3 from '@angular/router';
|
|
|
6
6
|
import { Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
|
|
7
7
|
import { __decorate } from 'tslib';
|
|
8
8
|
import { SdAvatar, SdTabComponent, SdButton } from '@sdcorejs/angular/components';
|
|
9
|
-
import { I18nService,
|
|
9
|
+
import { I18nService, I18N_STORAGE_KEY, I18N_MESSAGES, SdTranslatePipe } from '@sdcorejs/angular/i18n';
|
|
10
10
|
import { SdStorageService } from '@sdcorejs/angular/services';
|
|
11
11
|
import { StringUtilities, Utilities } from '@sdcorejs/utils/fns';
|
|
12
12
|
import { SD_VIEWPORT, SdViewportService } from '@sdcorejs/angular/services/viewport';
|
|
@@ -627,31 +627,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
627
627
|
}]
|
|
628
628
|
}], ctorParameters: () => [] });
|
|
629
629
|
|
|
630
|
+
// End
|
|
631
|
+
/** Thêm '/' ở cuối để so khớp theo segment: '/appointment' không khớp nhầm '/appointments'. */
|
|
632
|
+
const normalizeMenuPath = (path) => {
|
|
633
|
+
return path.endsWith('/') ? path : path + '/';
|
|
634
|
+
};
|
|
635
|
+
/** Route hiện tại có nằm trong nhánh của `path` không (khớp chính xác hoặc khớp phần đầu). */
|
|
636
|
+
const isMenuPathMatch = (routePath, path) => {
|
|
637
|
+
if (!routePath || !path) {
|
|
638
|
+
return false;
|
|
639
|
+
}
|
|
640
|
+
if (routePath === path) {
|
|
641
|
+
return true;
|
|
642
|
+
}
|
|
643
|
+
return normalizeMenuPath(routePath).startsWith(normalizeMenuPath(path));
|
|
644
|
+
};
|
|
645
|
+
/** Mọi path trong cây menu khớp với route hiện tại. */
|
|
646
|
+
const collectMatchedMenuPaths = (menus, routePath) => {
|
|
647
|
+
const matched = [];
|
|
648
|
+
const visit = (items) => {
|
|
649
|
+
for (const item of items) {
|
|
650
|
+
if ('path' in item && isMenuPathMatch(routePath, item.path)) {
|
|
651
|
+
matched.push(item.path);
|
|
652
|
+
}
|
|
653
|
+
if ('children' in item && item.children?.length) {
|
|
654
|
+
visit(item.children);
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
};
|
|
658
|
+
visit(menus ?? []);
|
|
659
|
+
return matched;
|
|
660
|
+
};
|
|
661
|
+
/**
|
|
662
|
+
* Path khớp sát nhất với route hiện tại trong cả cây menu.
|
|
663
|
+
* Khi cả '/appointment' và '/appointment/cs' cùng khớp route '/appointment/cs',
|
|
664
|
+
* chỉ path dài nhất được coi là active — path còn lại không được highlight.
|
|
665
|
+
* Hoà nhau thì lấy path xuất hiện trước theo thứ tự khai báo.
|
|
666
|
+
*/
|
|
667
|
+
const resolveActiveMenuPath = (menus, routePath) => {
|
|
668
|
+
const matched = collectMatchedMenuPaths(menus, routePath);
|
|
669
|
+
if (!matched.length) {
|
|
670
|
+
return null;
|
|
671
|
+
}
|
|
672
|
+
return matched.reduce((best, path) => (normalizeMenuPath(path).length > normalizeMenuPath(best).length ? path : best));
|
|
673
|
+
};
|
|
674
|
+
/** Chính menu này, hoặc bất kỳ menu con nào ở mọi cấp, có đúng path đó. */
|
|
675
|
+
const containsMenuPath = (menuItem, path) => {
|
|
676
|
+
if ('path' in menuItem && menuItem.path === path) {
|
|
677
|
+
return true;
|
|
678
|
+
}
|
|
679
|
+
if ('children' in menuItem && menuItem.children?.length) {
|
|
680
|
+
return menuItem.children.some(child => containsMenuPath(child, path));
|
|
681
|
+
}
|
|
682
|
+
return false;
|
|
683
|
+
};
|
|
684
|
+
|
|
685
|
+
/**
|
|
686
|
+
* Resolve a translated tab name for `@SdTabComponent`.
|
|
687
|
+
*
|
|
688
|
+
* WHY not I18nService: the decorator runs at module-evaluation time, before
|
|
689
|
+
* Angular's DI exists, so the service cannot be injected. We read the language
|
|
690
|
+
* the app persisted and look the key up in the static catalog instead.
|
|
691
|
+
*/
|
|
692
|
+
function resolveTabName(key) {
|
|
693
|
+
const lang = (() => {
|
|
694
|
+
try {
|
|
695
|
+
const stored = localStorage.getItem(I18N_STORAGE_KEY);
|
|
696
|
+
if (stored)
|
|
697
|
+
return stored;
|
|
698
|
+
}
|
|
699
|
+
catch {
|
|
700
|
+
// localStorage can throw (private mode, SSR shim) — fall back below.
|
|
701
|
+
}
|
|
702
|
+
return 'vi';
|
|
703
|
+
})();
|
|
704
|
+
return I18N_MESSAGES[lang]?.[key] ?? I18N_MESSAGES.vi[key] ?? key;
|
|
705
|
+
}
|
|
706
|
+
|
|
630
707
|
// End
|
|
631
708
|
class MenuFocusPipe {
|
|
632
|
-
|
|
709
|
+
/**
|
|
710
|
+
* @param activeMenuPath Path khớp sát nhất với route hiện tại (xem `resolveActiveMenuPath`).
|
|
711
|
+
* Truyền vào thì chỉ menu chứa đúng path đó mới focus, nên '/appointment' không sáng khi đang ở
|
|
712
|
+
* '/appointment/cs'. Bỏ trống thì giữ cách khớp phần đầu cũ.
|
|
713
|
+
*/
|
|
714
|
+
transform(routePath, menuItem, activeMenuPath) {
|
|
633
715
|
if (!routePath) {
|
|
634
716
|
return false;
|
|
635
717
|
}
|
|
718
|
+
if (activeMenuPath !== undefined) {
|
|
719
|
+
return activeMenuPath ? containsMenuPath(menuItem, activeMenuPath) : false;
|
|
720
|
+
}
|
|
636
721
|
if ('children' in menuItem && menuItem.children) {
|
|
637
722
|
return menuItem.children.some(child => {
|
|
638
|
-
return 'path' in child && child.path ?
|
|
723
|
+
return 'path' in child && child.path ? isMenuPathMatch(routePath, child.path) : false;
|
|
639
724
|
});
|
|
640
725
|
}
|
|
641
|
-
return 'path' in menuItem &&
|
|
726
|
+
return 'path' in menuItem && isMenuPathMatch(routePath, menuItem.path);
|
|
642
727
|
}
|
|
643
|
-
#match = (routePath, path) => {
|
|
644
|
-
if (!path) {
|
|
645
|
-
return false;
|
|
646
|
-
}
|
|
647
|
-
if (routePath === path) {
|
|
648
|
-
return true;
|
|
649
|
-
}
|
|
650
|
-
return this.#normalizePath(routePath).startsWith(this.#normalizePath(path));
|
|
651
|
-
};
|
|
652
|
-
#normalizePath = (p) => {
|
|
653
|
-
return p.endsWith('/') ? p : p + '/';
|
|
654
|
-
};
|
|
655
728
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuFocusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
656
729
|
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: MenuFocusPipe, isStandalone: true, name: "menuFocus" });
|
|
657
730
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuFocusPipe, providedIn: 'root' });
|
|
@@ -972,6 +1045,8 @@ class SdSidebarV1Panel {
|
|
|
972
1045
|
logoUrl = computed(() => this.sidebar().logoUrl?.trim() || undefined, ...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
|
|
973
1046
|
pinnedNodeKeys = computed(() => new Set(this.pinnedMenuGroup().children?.map(m => this.#getMenuNodeKey(m)) ?? []), ...(ngDevMode ? [{ debugName: "pinnedNodeKeys" }] : /* istanbul ignore next */ []));
|
|
974
1047
|
isPinnedMenuGroupActive = computed(() => this.idMenuGroupActive() === this.pinnedMenuGroup().id, ...(ngDevMode ? [{ debugName: "isPinnedMenuGroupActive" }] : /* istanbul ignore next */ []));
|
|
1048
|
+
// Path khớp sát nhất trong nhánh menu đang hiển thị. Nhờ nó '/appointment' hết sáng khi đang ở '/appointment/cs'.
|
|
1049
|
+
activeMenuPath = computed(() => resolveActiveMenuPath(this.menusByGroup(), this.currentPath()), ...(ngDevMode ? [{ debugName: "activeMenuPath" }] : /* istanbul ignore next */ []));
|
|
975
1050
|
// ==========================================
|
|
976
1051
|
// DATA STRUCTURES
|
|
977
1052
|
// ==========================================
|
|
@@ -1192,7 +1267,7 @@ class SdSidebarV1Panel {
|
|
|
1192
1267
|
}, this.#pinIconHoverTimerDelay));
|
|
1193
1268
|
}
|
|
1194
1269
|
}
|
|
1195
|
-
if (!this.#menuFocusPipe.transform(this.currentPath(), menuItem)) {
|
|
1270
|
+
if (!this.#menuFocusPipe.transform(this.currentPath(), menuItem, this.activeMenuPath())) {
|
|
1196
1271
|
const iconMenu = menuNode.querySelector('.c-menu-node-icon');
|
|
1197
1272
|
const content = menuNode.querySelector('.c-menu-node-description-content');
|
|
1198
1273
|
const iconExpand = menuNode.querySelector('.c-menu-node-description-icon-expand');
|
|
@@ -1233,7 +1308,7 @@ class SdSidebarV1Panel {
|
|
|
1233
1308
|
}
|
|
1234
1309
|
}
|
|
1235
1310
|
}
|
|
1236
|
-
if (!this.#menuFocusPipe.transform(this.currentPath(), menuItem)) {
|
|
1311
|
+
if (!this.#menuFocusPipe.transform(this.currentPath(), menuItem, this.activeMenuPath())) {
|
|
1237
1312
|
const iconMenu = menuNode.querySelector('.c-menu-node-icon');
|
|
1238
1313
|
const content = menuNode.querySelector('.c-menu-node-description-content');
|
|
1239
1314
|
const iconExpand = menuNode.querySelector('.c-menu-node-description-icon-expand');
|
|
@@ -1271,19 +1346,27 @@ class SdSidebarV1Panel {
|
|
|
1271
1346
|
}
|
|
1272
1347
|
return node.title || '';
|
|
1273
1348
|
};
|
|
1274
|
-
#getMenuGroupByCurrentPath = (menus
|
|
1349
|
+
#getMenuGroupByCurrentPath = (menus) => {
|
|
1350
|
+
const activePath = resolveActiveMenuPath(menus, this.currentPath());
|
|
1351
|
+
if (!activePath) {
|
|
1352
|
+
return [];
|
|
1353
|
+
}
|
|
1354
|
+
const menuGroup = this.#findMenuGroupByPath(menus, activePath);
|
|
1355
|
+
return menuGroup ? [menuGroup] : [];
|
|
1356
|
+
};
|
|
1357
|
+
#findMenuGroupByPath = (menus, activePath, menuGroup) => {
|
|
1275
1358
|
for (const menu of menus) {
|
|
1276
|
-
if ('path' in menu &&
|
|
1277
|
-
return
|
|
1359
|
+
if ('path' in menu && menu.path === activePath) {
|
|
1360
|
+
return menuGroup ?? menu;
|
|
1278
1361
|
}
|
|
1279
1362
|
if ('children' in menu && menu.children?.length) {
|
|
1280
|
-
const result = this.#
|
|
1281
|
-
if (result
|
|
1363
|
+
const result = this.#findMenuGroupByPath(menu.children, activePath, menuGroup ?? menu);
|
|
1364
|
+
if (result) {
|
|
1282
1365
|
return result;
|
|
1283
1366
|
}
|
|
1284
1367
|
}
|
|
1285
1368
|
}
|
|
1286
|
-
return
|
|
1369
|
+
return null;
|
|
1287
1370
|
};
|
|
1288
1371
|
#bindingMenuGroupByCurrentPath = (menus) => {
|
|
1289
1372
|
// Chỉ bindingGroup mới khi người dùng không searchText
|
|
@@ -1351,13 +1434,17 @@ class SdSidebarV1Panel {
|
|
|
1351
1434
|
}
|
|
1352
1435
|
};
|
|
1353
1436
|
#expandParentNodesByCurrentPath(menus) {
|
|
1437
|
+
const activePath = resolveActiveMenuPath(menus, this.currentPath());
|
|
1438
|
+
return activePath ? this.#expandParentNodesByPath(menus, activePath) : false;
|
|
1439
|
+
}
|
|
1440
|
+
#expandParentNodesByPath(menus, activePath) {
|
|
1354
1441
|
let shouldPropagate = false;
|
|
1355
1442
|
for (const menu of menus) {
|
|
1356
|
-
if ('path' in menu &&
|
|
1443
|
+
if ('path' in menu && menu.path === activePath) {
|
|
1357
1444
|
shouldPropagate = true;
|
|
1358
1445
|
}
|
|
1359
1446
|
if ('children' in menu && menu.children?.length) {
|
|
1360
|
-
const childHasMatch = this.#
|
|
1447
|
+
const childHasMatch = this.#expandParentNodesByPath(menu.children, activePath);
|
|
1361
1448
|
if (childHasMatch) {
|
|
1362
1449
|
this.treeControl.expand(menu);
|
|
1363
1450
|
shouldPropagate = true;
|
|
@@ -1419,16 +1506,6 @@ class SdSidebarV1Panel {
|
|
|
1419
1506
|
}
|
|
1420
1507
|
return matchedCount === needle.length;
|
|
1421
1508
|
};
|
|
1422
|
-
#isMenuPathMatchByCurrentPath = (path) => {
|
|
1423
|
-
if (!path) {
|
|
1424
|
-
return false;
|
|
1425
|
-
}
|
|
1426
|
-
if (this.currentPath() === path) {
|
|
1427
|
-
return true;
|
|
1428
|
-
}
|
|
1429
|
-
return this.#normalizePath(this.currentPath()).startsWith(this.#normalizePath(path));
|
|
1430
|
-
};
|
|
1431
|
-
#normalizePath = (p) => (p.endsWith('/') ? p : p + '/');
|
|
1432
1509
|
#closeMenu() {
|
|
1433
1510
|
this.showSideBar.emit(null);
|
|
1434
1511
|
}
|
|
@@ -1484,7 +1561,7 @@ class SdSidebarV1Panel {
|
|
|
1484
1561
|
return count;
|
|
1485
1562
|
};
|
|
1486
1563
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSidebarV1Panel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSidebarV1Panel, isStandalone: true, selector: "sd-sidebar-v1-panel", 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\n href=\"/layout/home\"\n [attr.aria-label]=\"'core.module.layout.home.tab-name' | sdTranslate\"\n (click)=\"$event.preventDefault(); 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 type=\"button\"\n [attr.aria-label]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\n (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n (click)=\"expandPinnedGroup()\"\n [matTooltip]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\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 type=\"button\"\n [attr.aria-label]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\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' | sdTranslate\"\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 <div\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 class=\"c-menu-node-description\" [class.d-none]=\"!isShowSidebar()\">\n <a\n class=\"c-menu-node-description-content\"\n [href]=\"menuNodeHref(node)\"\n [attr.aria-current]=\"(currentPath() | menuFocus: node) ? 'page' : null\"\n (click)=\"onMenuNodeClick($event, node)\"\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\"></a>\n\n <!-- why: n\u00FAt ghim tr\u01B0\u1EDBc \u0111\u00E2y l\u00E0 <sd-icon (click)> \u2014 custom element kh\u00F4ng nh\u1EADn\n focus b\u00E0n ph\u00EDm v\u00E0 kh\u00F4ng c\u00F3 t\u00EAn kh\u1EA3 truy c\u1EADp, n\u00EAn kh\u00F4ng ghim \u0111\u01B0\u1EE3c b\u1EB1ng ph\u00EDm.\n \u0110\u1ED5i sang <button type=\"button\"> + aria-pressed, gi\u1ED1ng pattern \u0111\u00E3 d\u00F9ng \u1EDF\n `shared/menu-tree`. -->\n @if (_sidebar?.pin?.enabled) {\n <button\n type=\"button\"\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 [attr.aria-pressed]=\"isPinnedNode(node)\"\n [attr.aria-label]=\"\n (isPinnedNode(node) ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin')\n | sdTranslate: { title: node.title }\n \"\n (click)=\"onTogglePin($event, node)\">\n <sd-icon name=\"push_pin\"></sd-icon>\n </button>\n }\n </div>\n </div>\n </mat-nested-tree-node>\n\n <mat-nested-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n <div class=\"c-menu-node\" (mouseenter)=\"onMouseOverMenuNode($event, node)\" (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n <button\n type=\"button\"\n [class.d-none]=\"!isShowSidebar()\"\n class=\"c-menu-node-description\"\n [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n (click)=\"onToggleMenuNode(node)\">\n <span\n class=\"c-menu-node-description-content\"\n [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></span>\n <sd-icon\n aria-hidden=\"true\"\n class=\"c-menu-node-description-icon-expand\"\n [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n </button>\n </div>\n </div>\n <div class=\"c-menu-node-group p-0\" role=\"group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\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 .c-menu-node-group .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:48px!important}.c-menu-node-group{margin-top:0;margin-bottom:0}.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 button.c-menu-node-description{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.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;padding:0;font-size:18px;opacity:0}.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:focus-visible{opacity:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node a.c-menu-node-description-content{color:inherit;text-decoration:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description-content:focus-visible,.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node button.c-menu-node-description:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.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: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSidebarV1Panel, isStandalone: true, selector: "sd-sidebar-v1-panel", 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\n href=\"/layout/home\"\n [attr.aria-label]=\"'core.module.layout.home.tab-name' | sdTranslate\"\n (click)=\"$event.preventDefault(); 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 type=\"button\"\n [attr.aria-label]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\n (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n (click)=\"expandPinnedGroup()\"\n [matTooltip]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\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 type=\"button\"\n [attr.aria-label]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\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' | sdTranslate\"\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 <div\n class=\"c-menu-node\"\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n [ngStyle]=\"{\n backgroundColor:\n (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n }\">\n <div class=\"c-menu-node-description\" [class.d-none]=\"!isShowSidebar()\">\n <a\n class=\"c-menu-node-description-content\"\n [href]=\"menuNodeHref(node)\"\n [attr.aria-current]=\"(currentPath() | menuFocus: node : activeMenuPath()) ? 'page' : null\"\n (click)=\"onMenuNodeClick($event, node)\"\n [ngStyle]=\"{\n color:\n (currentPath() | menuFocus: node : activeMenuPath())\n ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n : 'var(--sd-text, #1a1b1f)',\n }\"\n [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></a>\n\n <!-- why: n\u00FAt ghim tr\u01B0\u1EDBc \u0111\u00E2y l\u00E0 <sd-icon (click)> \u2014 custom element kh\u00F4ng nh\u1EADn\n focus b\u00E0n ph\u00EDm v\u00E0 kh\u00F4ng c\u00F3 t\u00EAn kh\u1EA3 truy c\u1EADp, n\u00EAn kh\u00F4ng ghim \u0111\u01B0\u1EE3c b\u1EB1ng ph\u00EDm.\n \u0110\u1ED5i sang <button type=\"button\"> + aria-pressed, gi\u1ED1ng pattern \u0111\u00E3 d\u00F9ng \u1EDF\n `shared/menu-tree`. -->\n @if (_sidebar?.pin?.enabled) {\n <button\n type=\"button\"\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 [attr.aria-pressed]=\"isPinnedNode(node)\"\n [attr.aria-label]=\"\n (isPinnedNode(node) ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin')\n | sdTranslate: { title: node.title }\n \"\n (click)=\"onTogglePin($event, node)\">\n <sd-icon name=\"push_pin\"></sd-icon>\n </button>\n }\n </div>\n </div>\n </mat-nested-tree-node>\n\n <mat-nested-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node : activeMenuPath() }\">\n <div class=\"c-menu-node\" (mouseenter)=\"onMouseOverMenuNode($event, node)\" (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n <button\n type=\"button\"\n [class.d-none]=\"!isShowSidebar()\"\n class=\"c-menu-node-description\"\n [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n (click)=\"onToggleMenuNode(node)\">\n <span\n class=\"c-menu-node-description-content\"\n [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></span>\n <sd-icon\n aria-hidden=\"true\"\n class=\"c-menu-node-description-icon-expand\"\n [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n </button>\n </div>\n </div>\n <div class=\"c-menu-node-group p-0\" role=\"group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\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 .c-menu-node-group .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:48px!important}.c-menu-node-group{margin-top:0;margin-bottom:0}.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 button.c-menu-node-description{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.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;padding:0;font-size:18px;opacity:0}.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:focus-visible{opacity:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node a.c-menu-node-description-content{color:inherit;text-decoration:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description-content:focus-visible,.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node button.c-menu-node-description:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.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: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1488
1565
|
}
|
|
1489
1566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSidebarV1Panel, decorators: [{
|
|
1490
1567
|
type: Component,
|
|
@@ -1503,7 +1580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1503
1580
|
SdSuffixDefDirective,
|
|
1504
1581
|
LayoutUserComponent$1,
|
|
1505
1582
|
SdTranslatePipe,
|
|
1506
|
-
], 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\n href=\"/layout/home\"\n [attr.aria-label]=\"'core.module.layout.home.tab-name' | sdTranslate\"\n (click)=\"$event.preventDefault(); 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 type=\"button\"\n [attr.aria-label]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\n (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n (click)=\"expandPinnedGroup()\"\n [matTooltip]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\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 type=\"button\"\n [attr.aria-label]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\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' | sdTranslate\"\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 <div\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 class=\"c-menu-node-description\" [class.d-none]=\"!isShowSidebar()\">\n <a\n class=\"c-menu-node-description-content\"\n [href]=\"menuNodeHref(node)\"\n [attr.aria-current]=\"(currentPath() | menuFocus: node) ? 'page' : null\"\n (click)=\"onMenuNodeClick($event, node)\"\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\"></a>\n\n <!-- why: n\u00FAt ghim tr\u01B0\u1EDBc \u0111\u00E2y l\u00E0 <sd-icon (click)> \u2014 custom element kh\u00F4ng nh\u1EADn\n focus b\u00E0n ph\u00EDm v\u00E0 kh\u00F4ng c\u00F3 t\u00EAn kh\u1EA3 truy c\u1EADp, n\u00EAn kh\u00F4ng ghim \u0111\u01B0\u1EE3c b\u1EB1ng ph\u00EDm.\n \u0110\u1ED5i sang <button type=\"button\"> + aria-pressed, gi\u1ED1ng pattern \u0111\u00E3 d\u00F9ng \u1EDF\n `shared/menu-tree`. -->\n @if (_sidebar?.pin?.enabled) {\n <button\n type=\"button\"\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 [attr.aria-pressed]=\"isPinnedNode(node)\"\n [attr.aria-label]=\"\n (isPinnedNode(node) ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin')\n | sdTranslate: { title: node.title }\n \"\n (click)=\"onTogglePin($event, node)\">\n <sd-icon name=\"push_pin\"></sd-icon>\n </button>\n }\n </div>\n </div>\n </mat-nested-tree-node>\n\n <mat-nested-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node }\">\n <div class=\"c-menu-node\" (mouseenter)=\"onMouseOverMenuNode($event, node)\" (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n <button\n type=\"button\"\n [class.d-none]=\"!isShowSidebar()\"\n class=\"c-menu-node-description\"\n [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n (click)=\"onToggleMenuNode(node)\">\n <span\n class=\"c-menu-node-description-content\"\n [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></span>\n <sd-icon\n aria-hidden=\"true\"\n class=\"c-menu-node-description-icon-expand\"\n [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n </button>\n </div>\n </div>\n <div class=\"c-menu-node-group p-0\" role=\"group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\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 .c-menu-node-group .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:48px!important}.c-menu-node-group{margin-top:0;margin-bottom:0}.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 button.c-menu-node-description{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.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;padding:0;font-size:18px;opacity:0}.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:focus-visible{opacity:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node a.c-menu-node-description-content{color:inherit;text-decoration:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description-content:focus-visible,.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node button.c-menu-node-description:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.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"] }]
|
|
1583
|
+
], 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\n href=\"/layout/home\"\n [attr.aria-label]=\"'core.module.layout.home.tab-name' | sdTranslate\"\n (click)=\"$event.preventDefault(); 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 type=\"button\"\n [attr.aria-label]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\n (mouseenter)=\"onMouseOverMenuGroupNode($event, pinnedMenuGroup())\"\n (mouseleave)=\"onMouseLeaveMenuGroupNode($event, pinnedMenuGroup())\"\n (click)=\"expandPinnedGroup()\"\n [matTooltip]=\"'core.module.layout.sidebar.pinned' | sdTranslate\"\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 type=\"button\"\n [attr.aria-label]=\"nodeMenuGroup.tooltipTitle || nodeMenuGroup.title\"\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' | sdTranslate\"\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 <div\n class=\"c-menu-node\"\n (mouseenter)=\"onMouseOverMenuNode($event, node)\"\n (mouseleave)=\"onMouseLeaveMenuNode($event, node)\"\n [ngStyle]=\"{\n backgroundColor:\n (currentPath() | menuFocus: node : activeMenuPath()) ? _sidebar.brandLightColor || 'var(--sd-primary-light, #d7e3ff)' : 'transparent',\n }\">\n <div class=\"c-menu-node-description\" [class.d-none]=\"!isShowSidebar()\">\n <a\n class=\"c-menu-node-description-content\"\n [href]=\"menuNodeHref(node)\"\n [attr.aria-current]=\"(currentPath() | menuFocus: node : activeMenuPath()) ? 'page' : null\"\n (click)=\"onMenuNodeClick($event, node)\"\n [ngStyle]=\"{\n color:\n (currentPath() | menuFocus: node : activeMenuPath())\n ? _sidebar.brandColor || 'var(--sd-primary, #005cbb)'\n : 'var(--sd-text, #1a1b1f)',\n }\"\n [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></a>\n\n <!-- why: n\u00FAt ghim tr\u01B0\u1EDBc \u0111\u00E2y l\u00E0 <sd-icon (click)> \u2014 custom element kh\u00F4ng nh\u1EADn\n focus b\u00E0n ph\u00EDm v\u00E0 kh\u00F4ng c\u00F3 t\u00EAn kh\u1EA3 truy c\u1EADp, n\u00EAn kh\u00F4ng ghim \u0111\u01B0\u1EE3c b\u1EB1ng ph\u00EDm.\n \u0110\u1ED5i sang <button type=\"button\"> + aria-pressed, gi\u1ED1ng pattern \u0111\u00E3 d\u00F9ng \u1EDF\n `shared/menu-tree`. -->\n @if (_sidebar?.pin?.enabled) {\n <button\n type=\"button\"\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 [attr.aria-pressed]=\"isPinnedNode(node)\"\n [attr.aria-label]=\"\n (isPinnedNode(node) ? 'core.module.layout.menu.unpin' : 'core.module.layout.menu.pin')\n | sdTranslate: { title: node.title }\n \"\n (click)=\"onTogglePin($event, node)\">\n <sd-icon name=\"push_pin\"></sd-icon>\n </button>\n }\n </div>\n </div>\n </mat-nested-tree-node>\n\n <mat-nested-tree-node\n *matTreeNodeDef=\"let node; when: hasChild\"\n [class]=\"{ expanded: treeControl.isExpanded(node), isfocus: currentPath() | menuFocus: node : activeMenuPath() }\">\n <div class=\"c-menu-node\" (mouseenter)=\"onMouseOverMenuNode($event, node)\" (mouseleave)=\"onMouseLeaveMenuNode($event, node)\">\n <div class=\"d-flex align-items-center\" style=\"gap: 10px; width: 100%\">\n <button\n type=\"button\"\n [class.d-none]=\"!isShowSidebar()\"\n class=\"c-menu-node-description\"\n [attr.aria-expanded]=\"treeControl.isExpanded(node)\"\n (click)=\"onToggleMenuNode(node)\">\n <span\n class=\"c-menu-node-description-content\"\n [innerHTML]=\"node.title | highLightSearch: searchText() | sdSafeHtml\"></span>\n <sd-icon\n aria-hidden=\"true\"\n class=\"c-menu-node-description-icon-expand\"\n [name]=\"treeControl.isExpanded(node) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n </button>\n </div>\n </div>\n <div class=\"c-menu-node-group p-0\" role=\"group\" [class.d-none]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\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 .c-menu-node-group .c-menu-node-description-content{margin-left:16px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:32px!important}:host ::ng-deep .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .mat-nested-tree-node .c-menu-node-group .c-menu-node-description-content{margin-left:48px!important}.c-menu-node-group{margin-top:0;margin-bottom:0}.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 button.c-menu-node-description{width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.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;padding:0;font-size:18px;opacity:0}.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:focus-visible{opacity:1;outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node a.c-menu-node-description-content{color:inherit;text-decoration:none}.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node .c-menu-node-description-content:focus-visible,.wrapper .c-body .c-menu .c-menu-tree .c-menu-tree-container .c-menu-node button.c-menu-node-description:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.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"] }]
|
|
1507
1584
|
}], 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"] }] } });
|
|
1508
1585
|
|
|
1509
1586
|
class SdSidebarV1 {
|
|
@@ -1798,27 +1875,27 @@ class SdSidebarMobileOverlay {
|
|
|
1798
1875
|
this.titleMenuGroupChanged.emit('');
|
|
1799
1876
|
}
|
|
1800
1877
|
};
|
|
1801
|
-
#getMenuGroupByCurrentPath = (menus
|
|
1878
|
+
#getMenuGroupByCurrentPath = (menus) => {
|
|
1879
|
+
// Nhiều menu cùng khớp route thì chỉ path sát nhất được chọn, tránh nhận nhầm group của path cha
|
|
1880
|
+
const activePath = resolveActiveMenuPath(menus, this.currentPath());
|
|
1881
|
+
if (!activePath)
|
|
1882
|
+
return [];
|
|
1883
|
+
const menuGroup = this.#findMenuGroupByPath(menus, activePath);
|
|
1884
|
+
return menuGroup ? [menuGroup] : [];
|
|
1885
|
+
};
|
|
1886
|
+
#findMenuGroupByPath = (menus, activePath, menuGroup) => {
|
|
1802
1887
|
for (const menu of menus) {
|
|
1803
|
-
if ('path' in menu &&
|
|
1804
|
-
return
|
|
1888
|
+
if ('path' in menu && menu.path === activePath) {
|
|
1889
|
+
return menuGroup ?? menu;
|
|
1805
1890
|
}
|
|
1806
1891
|
if ('children' in menu && menu.children?.length) {
|
|
1807
|
-
const result = this.#
|
|
1808
|
-
if (result
|
|
1892
|
+
const result = this.#findMenuGroupByPath(menu.children, activePath, menuGroup ?? menu);
|
|
1893
|
+
if (result)
|
|
1809
1894
|
return result;
|
|
1810
1895
|
}
|
|
1811
1896
|
}
|
|
1812
|
-
return
|
|
1897
|
+
return null;
|
|
1813
1898
|
};
|
|
1814
|
-
#isMenuPathMatchByCurrentPath = (path) => {
|
|
1815
|
-
if (!path)
|
|
1816
|
-
return false;
|
|
1817
|
-
if (this.currentPath() === path)
|
|
1818
|
-
return true;
|
|
1819
|
-
return this.#normalizePath(this.currentPath()).startsWith(this.#normalizePath(path));
|
|
1820
|
-
};
|
|
1821
|
-
#normalizePath = (p) => (p.endsWith('/') ? p : p + '/');
|
|
1822
1899
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdSidebarMobileOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1823
1900
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdSidebarMobileOverlay, isStandalone: true, selector: "sd-sidebar-mobile-overlay", inputs: { isShowSidebar: { classPropertyName: "isShowSidebar", publicName: "isShowSidebar", isSignal: true, isRequired: false, 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 } }, outputs: { showSideBar: "showSideBar", expandSideBar: "expandSideBar", popupUserMenuOpened: "popupUserMenuOpened", popupUserMenuClosed: "popupUserMenuClosed", titleMenuGroupChanged: "titleMenuGroupChanged" }, ngImport: i0, template: "@let _userInfo = userInfo();\n@let _sidebar = sidebar();\n\n@if (_userInfo && _sidebar) {\n <div\n class=\"m-backdrop\"\n [class.m-backdrop--visible]=\"isShowSidebar()\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onClose()\"\n (keydown.escape)=\"onClose()\">\n </div>\n\n <div class=\"m-wrapper\" [class.m-wrapper--open]=\"isShowSidebar()\">\n <div class=\"m-header\">\n <div class=\"m-title-group\">\n @if (_sidebar.logoUrl) {\n <img class=\"m-logo\" alt=\"logo\" [src]=\"_sidebar.logoUrl\" />\n }\n <span class=\"m-title\">{{ titleMenuGroup() || _sidebar.defaultTitle || 'Back Office' }}</span>\n </div>\n <button class=\"m-close-btn\" (click)=\"onClose()\">\n <sd-icon name=\"close\"></sd-icon>\n </button>\n </div>\n\n <div class=\"m-user-section\">\n <lib-layout-user\n [userInfo]=\"_userInfo\"\n [isMobileOrTablet]=\"true\"\n (menuOpened)=\"onUserMenuOpened()\"\n (menuClosed)=\"onUserMenuClosed()\">\n </lib-layout-user>\n </div>\n\n <div class=\"m-menu-list\">\n @for (group of menus(); track group.id) {\n <div class=\"m-menu-card\">\n <button class=\"m-card-header\" (click)=\"toggleMobileGroup(group.id)\">\n <div class=\"m-card-header-left\">\n @if (group.iconUrl) {\n <img class=\"m-group-icon\" [src]=\"group.iconUrl\" [alt]=\"group.title\" />\n } @else {\n <sd-icon class=\"m-group-icon\" [name]=\"group.icon || 'widgets'\"></sd-icon>\n }\n <span class=\"m-group-title\">{{ group.title }}</span>\n </div>\n <sd-icon class=\"m-expand-icon\" [name]=\"expandedMobileGroups().has(group.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n </button>\n\n @if (expandedMobileGroups().has(group.id ?? '') && hasChildren(group)) {\n <div class=\"m-card-body\">\n @for (child of getChildren(group); track child.id) {\n @if (hasChildren(child)) {\n <div class=\"m-sub-group\">\n <button class=\"m-sub-group-header\" (click)=\"toggleMobileGroup(child.id)\">\n <div class=\"m-item-left\">\n @if (child.iconUrl) {\n <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n } @else {\n <sd-icon class=\"m-item-icon\" [name]=\"child.icon || 'folder'\"></sd-icon>\n }\n <span class=\"m-item-title\">{{ child.title }}</span>\n </div>\n <sd-icon class=\"m-expand-icon\" [name]=\"expandedMobileGroups().has(child.id ?? '') ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\"></sd-icon>\n </button>\n @if (expandedMobileGroups().has(child.id ?? '')) {\n @for (subChild of getChildren(child); track subChild.id) {\n <button class=\"m-menu-item m-menu-item--indented\"\n (click)=\"navigate({ path: getPath(subChild), queryParams: getQueryParams(subChild) })\">\n <div class=\"m-item-left\">\n @if (subChild.iconUrl) {\n <img class=\"m-item-icon-img\" [src]=\"subChild.iconUrl\" alt=\"icon\" />\n } @else {\n <sd-icon class=\"m-item-icon\" [name]=\"subChild.icon || 'insert_drive_file'\"></sd-icon>\n }\n <span class=\"m-item-title\">{{ subChild.title }}</span>\n </div>\n <sd-icon class=\"m-nav-icon\" name=\"chevron_right\"></sd-icon>\n </button>\n }\n }\n </div>\n } @else {\n <button class=\"m-menu-item\" (click)=\"navigate({ path: getPath(child), queryParams: getQueryParams(child) })\">\n <div class=\"m-item-left\">\n @if (child.iconUrl) {\n <img class=\"m-item-icon-img\" [src]=\"child.iconUrl\" alt=\"icon\" />\n } @else {\n <sd-icon class=\"m-item-icon\" [name]=\"child.icon || 'insert_drive_file'\"></sd-icon>\n }\n <span class=\"m-item-title\">{{ child.title }}</span>\n </div>\n <sd-icon class=\"m-nav-icon\" name=\"chevron_right\"></sd-icon>\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n}\n", styles: [":host{display:block;position:fixed;inset:0;z-index:1000;pointer-events:none}.m-backdrop{position:absolute;inset:0;background:#0006;opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer;outline:none}.m-backdrop--visible{opacity:1;pointer-events:auto}.m-wrapper{display:flex;flex-direction:column;position:absolute;inset:0;background-color:#f2f2f6;padding:16px;box-sizing:border-box;overflow-y:auto;pointer-events:none;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.m-wrapper--open{transform:translate(0);pointer-events:auto}.m-wrapper .m-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.m-wrapper .m-header .m-title-group{display:flex;align-items:center;gap:12px}.m-wrapper .m-header .m-title-group .m-logo{width:32px;height:32px;object-fit:contain}.m-wrapper .m-header .m-title-group .m-title{font-size:18px;font-weight:600;color:#1f1f1f}.m-wrapper .m-header .m-close-btn{background:transparent;border:none;padding:0;color:#1f1f1f;display:flex;align-items:center;justify-content:center;cursor:pointer}.m-wrapper .m-header .m-close-btn sd-icon{font-size:28px;width:28px;height:28px}.m-wrapper .m-user-section{background-color:#fff;border-radius:12px;padding:12px 16px;margin-bottom:24px;box-shadow:0 1px 2px #00000005;border:1px solid #EBEBEB}.m-wrapper .m-user-section lib-layout-user{display:block;width:100%}.m-wrapper .m-menu-list{display:flex;flex-direction:column;gap:16px}.m-wrapper .m-menu-card{background-color:#fff;border-radius:12px;border:1px solid #EBEBEB;overflow:hidden}.m-wrapper .m-menu-card .m-card-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;background:transparent;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-header .m-card-header-left{display:flex;align-items:center;gap:16px}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-icon{font-size:24px;width:24px;height:24px;color:#1f1f1f;object-fit:contain}.m-wrapper .m-menu-card .m-card-header .m-card-header-left .m-group-title{font-size:16px;font-weight:600;color:#1f1f1f}.m-wrapper .m-menu-card .m-card-header .m-expand-icon{color:#1f1f1f;transition:transform .2s ease}.m-wrapper .m-menu-card .m-card-body{display:flex;flex-direction:column;padding-bottom:8px}.m-wrapper .m-menu-card .m-card-body .m-menu-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:transparent;transition:background-color .2s;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-menu-item:active{background-color:#f5f5f5}.m-wrapper .m-menu-card .m-card-body .m-menu-item--indented{padding-left:48px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-item-left .m-item-title{font-size:15px;color:#333}.m-wrapper .m-menu-card .m-card-body .m-menu-item .m-nav-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}.m-wrapper .m-menu-card .m-card-body .m-sub-group{border-top:1px solid #EBEBEB}.m-wrapper .m-menu-card .m-card-body .m-sub-group:first-child{border-top:none}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px 12px 24px;cursor:pointer;border:none;background:#fafafa;-webkit-tap-highlight-color:transparent}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header:active{background-color:#f0f0f0}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left{display:flex;align-items:center;gap:12px}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon{font-size:20px;width:20px;height:20px;color:#8c8c8c}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-icon-img{width:20px;height:20px;object-fit:contain;opacity:.7}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-item-left .m-item-title{font-size:15px;font-weight:500;color:#333}.m-wrapper .m-menu-card .m-card-body .m-sub-group .m-sub-group-header .m-expand-icon{color:#8c8c8c;font-size:20px;width:20px;height:20px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: LayoutUserComponent, selector: "lib-layout-user", inputs: ["isMobileOrTablet", "isMenuLock", "isShowSidebar", "userInfo"], outputs: ["menuClosed", "menuOpened", "toggleMenuLock"] }] });
|
|
1824
1901
|
}
|
|
@@ -1883,6 +1960,8 @@ class SdLayoutMenuTreeComponent {
|
|
|
1883
1960
|
const alwaysShowPin = this.pinVisibility() === 'always';
|
|
1884
1961
|
const query = this.query().trim();
|
|
1885
1962
|
const menus = query ? searchMenuLeaves(this.menus(), query) : this.menus();
|
|
1963
|
+
// Nhiều menu cùng khớp route thì chỉ path sát nhất sáng: ở '/appointment/cs' thì '/appointment' không sáng nữa
|
|
1964
|
+
const activeMenuPath = resolveActiveMenuPath(menus, this.activePath());
|
|
1886
1965
|
const nodes = [];
|
|
1887
1966
|
const append = (items, depth, ancestors) => {
|
|
1888
1967
|
for (const menu of items) {
|
|
@@ -1900,7 +1979,7 @@ class SdLayoutMenuTreeComponent {
|
|
|
1900
1979
|
depth,
|
|
1901
1980
|
paddingLeft: 12 + depth * 16,
|
|
1902
1981
|
isGroup,
|
|
1903
|
-
isActive: !!path &&
|
|
1982
|
+
isActive: !!path && path === activeMenuPath,
|
|
1904
1983
|
isPinned,
|
|
1905
1984
|
isPinVisible: alwaysShowPin || isPinned || hoveredPinKey === key,
|
|
1906
1985
|
// why: template cũ nối `'Pin ' + node.title` — chuỗi tiếng Anh cứng và ép trật tự
|
|
@@ -1946,10 +2025,6 @@ class SdLayoutMenuTreeComponent {
|
|
|
1946
2025
|
clearTimeout(this.#pinHoverTimerId);
|
|
1947
2026
|
this.#pinHoverTimerId = undefined;
|
|
1948
2027
|
}
|
|
1949
|
-
#pathMatches(currentPath, menuPath) {
|
|
1950
|
-
const normalize = (path) => (path.endsWith('/') ? path : `${path}/`);
|
|
1951
|
-
return currentPath === menuPath || normalize(currentPath).startsWith(normalize(menuPath));
|
|
1952
|
-
}
|
|
1953
2028
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdLayoutMenuTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1954
2029
|
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.pinLabel\"\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 });
|
|
1955
2030
|
}
|
|
@@ -2419,28 +2494,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2419
2494
|
args: [{ selector: 'sd-layout', imports: [SdSidebarV1, SdSidebarMobileV1, SdSidebarV2, SdSidebarMobileV2, SdSidebarV3, SdSidebarMobileV3, 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 <sd-sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n </sd-sidebar-v1>\n } @else {\n <sd-sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n </sd-sidebar-mobile-v1>\n }\n}\n\n@if (_userInfo && _sidebarV3) {\n @if (!isMobile()) {\n <sd-sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n </sd-sidebar-v3>\n } @else {\n <sd-sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n </sd-sidebar-mobile-v3>\n }\n}\n\n@if (_userInfo && _sidebarV2) {\n @if (!isMobile()) {\n <sd-sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n </sd-sidebar-v2>\n } @else {\n <sd-sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n </sd-sidebar-mobile-v2>\n }\n}\n", styles: [":host{display:block}\n"] }]
|
|
2420
2495
|
}], propDecorators: { menusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }] } });
|
|
2421
2496
|
|
|
2422
|
-
/**
|
|
2423
|
-
* Resolve a translated tab name for `@SdTabComponent`.
|
|
2424
|
-
*
|
|
2425
|
-
* WHY not I18nService: the decorator runs at module-evaluation time, before
|
|
2426
|
-
* Angular's DI exists, so the service cannot be injected. We read the language
|
|
2427
|
-
* the app persisted and look the key up in the static catalog instead.
|
|
2428
|
-
*/
|
|
2429
|
-
function resolveTabName(key) {
|
|
2430
|
-
const lang = (() => {
|
|
2431
|
-
try {
|
|
2432
|
-
const stored = localStorage.getItem(I18N_STORAGE_KEY);
|
|
2433
|
-
if (stored)
|
|
2434
|
-
return stored;
|
|
2435
|
-
}
|
|
2436
|
-
catch {
|
|
2437
|
-
// localStorage can throw (private mode, SSR shim) — fall back below.
|
|
2438
|
-
}
|
|
2439
|
-
return 'vi';
|
|
2440
|
-
})();
|
|
2441
|
-
return I18N_MESSAGES[lang]?.[key] ?? I18N_MESSAGES.vi[key] ?? key;
|
|
2442
|
-
}
|
|
2443
|
-
|
|
2444
2497
|
// End
|
|
2445
2498
|
let HomePageComponent = class HomePageComponent {
|
|
2446
2499
|
// ==========================================
|
|
@@ -2773,5 +2826,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2773
2826
|
* Generated bundle index. Do not edit.
|
|
2774
2827
|
*/
|
|
2775
2828
|
|
|
2776
|
-
export { DEFAULT_LAYOUT_MOBILE_BREAKPOINT, ForbiddenModule, HighlightSearchPipe, HomeModule, MenuFocusPipe, MenuPipe, NotFoundModule, SD_LAYOUT_CONFIGURATION, SD_LAYOUT_DEMO_FALLBACK, SD_LAYOUT_STORAGE_NAMESPACE, SD_LAYOUT_VIEWPORT, SdLayoutComponent, SdLayoutMenuTreeComponent, SdLayoutModule, SdLayoutNavigationStateService, SdLayoutResponsiveService, SdLayoutService, SdLayoutStorageService, SdLayoutUserMenuComponent, SdPageComponent, SdSidebarMobileOverlay, SdSidebarMobileV1, SdSidebarMobileV2, SdSidebarMobileV3, SdSidebarV2, SdSidebarV3, flattenMenuLeaves, getMenuStableKey, normalizeLayoutMobileBreakpoint, normalizeSidebarConfiguration, resolveMenuKeys, resolveSidebarV2Interaction, resolveSidebarV3Recent, resolveTabName, searchMenuLeaves, selectPrimaryMenuGroups };
|
|
2829
|
+
export { DEFAULT_LAYOUT_MOBILE_BREAKPOINT, ForbiddenModule, HighlightSearchPipe, HomeModule, MenuFocusPipe, MenuPipe, NotFoundModule, SD_LAYOUT_CONFIGURATION, SD_LAYOUT_DEMO_FALLBACK, SD_LAYOUT_STORAGE_NAMESPACE, SD_LAYOUT_VIEWPORT, SdLayoutComponent, SdLayoutMenuTreeComponent, SdLayoutModule, SdLayoutNavigationStateService, SdLayoutResponsiveService, SdLayoutService, SdLayoutStorageService, SdLayoutUserMenuComponent, SdPageComponent, SdSidebarMobileOverlay, SdSidebarMobileV1, SdSidebarMobileV2, SdSidebarMobileV3, SdSidebarV2, SdSidebarV3, collectMatchedMenuPaths, containsMenuPath, flattenMenuLeaves, getMenuStableKey, isMenuPathMatch, normalizeLayoutMobileBreakpoint, normalizeMenuPath, normalizeSidebarConfiguration, resolveActiveMenuPath, resolveMenuKeys, resolveSidebarV2Interaction, resolveSidebarV3Recent, resolveTabName, searchMenuLeaves, selectPrimaryMenuGroups };
|
|
2777
2830
|
//# sourceMappingURL=sdcorejs-angular-modules-layout.mjs.map
|