@sdcorejs/angular 21.1.5 → 21.1.6

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

@@ -515,19 +515,61 @@ class HighlightSearchPipe {
             return value;
         }
         value = value?.trim() || '';
-        const regex = new RegExp(StringUtilities.changeAliasLowerCase(keyword), 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
+        const aliasKeyword = StringUtilities.changeAliasLowerCase(keyword);
         const aliasLowerCaseStr = StringUtilities.changeAliasLowerCase(value);
+        // Ưu tiên highlight theo chuỗi con liền nhau (khớp trực tiếp với tiêu đề/route)
+        const substringHighlight = this.#highlightSubstring(value, aliasLowerCaseStr, aliasKeyword, color);
+        if (substringHighlight !== null) {
+            return substringHighlight;
+        }
+        // Không có chuỗi con nào khớp -> thử highlight theo ký tự đầu (viết tắt), vd "sp" -> "Sản phẩm"
+        return this.#highlightOrderedInitials(value, aliasLowerCaseStr, aliasKeyword, color) ?? value;
+    }
+    #highlightSubstring = (value, aliasLowerCaseStr, aliasKeyword, color) => {
+        const regex = new RegExp(aliasKeyword, 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
         const strs = [];
         let previousOffset = 0;
+        let hasMatch = false;
         aliasLowerCaseStr.replace(regex, (_, offset) => {
+            hasMatch = true;
             strs.push(value.substring(previousOffset, offset));
-            strs.push(`<mark style="background-color: ${color}">${value.substring(offset, offset + keyword.length)}</mark>`);
-            previousOffset = offset + keyword.length;
-            return `<mark style="background-color: ${color}">${value.substring(offset, offset + keyword.length)}</mark>`;
+            strs.push(`<mark style="background-color: ${color}">${value.substring(offset, offset + aliasKeyword.length)}</mark>`);
+            previousOffset = offset + aliasKeyword.length;
+            return `<mark style="background-color: ${color}">${value.substring(offset, offset + aliasKeyword.length)}</mark>`;
         });
+        if (!hasMatch) {
+            return null;
+        }
         strs.push(value.substring(previousOffset, value.length));
         return strs.join('');
-    }
+    };
+    #highlightOrderedInitials = (value, aliasLowerCaseStr, aliasKeyword, color) => {
+        const wordRegex = /\S+/g;
+        const matchedPositions = [];
+        let matchedCount = 0;
+        let wordMatch;
+        while ((wordMatch = wordRegex.exec(aliasLowerCaseStr))) {
+            if (matchedCount >= aliasKeyword.length) {
+                break;
+            }
+            if (wordMatch[0][0] === aliasKeyword[matchedCount]) {
+                matchedPositions.push(wordMatch.index);
+                matchedCount++;
+            }
+        }
+        if (matchedCount !== aliasKeyword.length) {
+            return null;
+        }
+        let result = '';
+        let cursor = 0;
+        for (const position of matchedPositions) {
+            result += value.substring(cursor, position);
+            result += `<mark style="background-color: ${color}">${value.charAt(position)}</mark>`;
+            cursor = position + 1;
+        }
+        result += value.substring(cursor);
+        return result;
+    };
     #normalizeValue = (keyword) => {
         let str = keyword?.toString() ?? '';
         /* eslint-disable no-useless-escape */
@@ -1151,7 +1193,10 @@ class SidebarComponent {
         const result = [];
         for (const menu of menus) {
             const aliasTitle = StringUtilities.changeAliasLowerCase(menu.title);
-            if (aliasTitle.includes(aliasSearchText)) {
+            // why: hỗ trợ search theo route (path) và search theo ký tự đầu (viết tắt) bên cạnh search theo tiêu đề
+            const matchByRoutePath = 'path' in menu && !!menu.path && menu.path.toLowerCase().includes(aliasSearchText);
+            const matchByInitials = this.#matchesTitleInitials(aliasTitle, aliasSearchText);
+            if (aliasTitle.includes(aliasSearchText) || matchByRoutePath || matchByInitials) {
                 result.push(menu);
                 continue;
             }
@@ -1165,6 +1210,23 @@ class SidebarComponent {
         }
         return result;
     };
+    #matchesTitleInitials = (aliasTitle, aliasSearchText) => {
+        const initials = aliasTitle
+            .split(' ')
+            .filter(word => word)
+            .map(word => word[0])
+            .join('');
+        return this.#isOrderedSubsequence(aliasSearchText, initials);
+    };
+    #isOrderedSubsequence = (needle, haystack) => {
+        let matchedCount = 0;
+        for (const char of haystack) {
+            if (char === needle[matchedCount]) {
+                matchedCount++;
+            }
+        }
+        return matchedCount === needle.length;
+    };
     #isMenuPathMatchByCurrentPath = (path) => {
         if (!path) {
             return false;
@@ -2147,6 +2209,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n\n@let _userInfo = userInfo();\n@let _sidebarV1 = sidebarV1();\n@let _sidebarV2 = sidebarV2();\n@let _sidebarV3 = sidebarV3();\n\n@if (_userInfo && _sidebarV1) {\n  @if (!isMobile()) {\n    <sidebar-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\" [isMobile]=\"false\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v1>\n  } @else {\n    <sidebar-mobile-v1 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV1\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v1>\n  }\n}\n\n@if (_userInfo && _sidebarV3) {\n  @if (!isMobile()) {\n    <sidebar-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v3>\n  } @else {\n    <sidebar-mobile-v3 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV3\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v3>\n  }\n}\n\n@if (_userInfo && _sidebarV2) {\n  @if (!isMobile()) {\n    <sidebar-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-v2>\n  } @else {\n    <sidebar-mobile-v2 [menus]=\"menus()\" [userInfo]=\"_userInfo\" [sidebar]=\"_sidebarV2\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\"></ng-container>\n    </sidebar-mobile-v2>\n  }\n}\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { menusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }] } });
 
+/**
+ * Resolve a translated tab name for `@SdTabComponent`.
+ *
+ * WHY not I18nService: the decorator runs at module-evaluation time, before
+ * Angular's DI exists, so the service cannot be injected. We read the language
+ * the app persisted and look the key up in the static catalog instead.
+ */
+function resolveTabName(key) {
+    const lang = (() => {
+        try {
+            const stored = localStorage.getItem(I18N_STORAGE_KEY);
+            if (stored)
+                return stored;
+        }
+        catch {
+            // localStorage can throw (private mode, SSR shim) — fall back below.
+        }
+        return 'vi';
+    })();
+    return I18N_MESSAGES[lang]?.[key] ?? I18N_MESSAGES.vi[key] ?? key;
+}
+
 // End
 let HomePageComponent = class HomePageComponent {
     // ==========================================
@@ -2209,22 +2293,7 @@ let HomePageComponent = class HomePageComponent {
 HomePageComponent = __decorate([
     SdTabComponent({
         component: HomePageComponent,
-        // WHY: decorator chạy trước Angular DI, nên không inject được I18nService.
-        // Đọc ngôn ngữ hiện tại trực tiếp từ localStorage + I18N_MESSAGES để có giá trị đã dịch.
-        name: () => {
-            const lang = (() => {
-                try {
-                    const stored = localStorage.getItem(I18N_STORAGE_KEY);
-                    if (stored)
-                        return stored;
-                }
-                catch {
-                    /* ignore */
-                }
-                return 'vi';
-            })();
-            return I18N_MESSAGES[lang]?.['core.module.layout.home.tab-name'] ?? I18N_MESSAGES.vi['core.module.layout.home.tab-name'];
-        },
+        name: () => resolveTabName('core.module.layout.home.tab-name'),
         icon: 'home',
         color: 'primary',
     })
@@ -2332,6 +2401,14 @@ let RootComponent$1 = class RootComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: RootComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"not-found\" class=\"sd-image-not-found\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.not-found.title' | translate }}</span>\n      <span class=\"T16R text-secondary mt-4\">\n        {{ 'core.module.layout.not-found.message' | translate }}\n      </span>\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.not-found.back' | translate\" prefixIcon=\"arrow_back\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 };
+RootComponent$1 = __decorate([
+    SdTabComponent({
+        component: RootComponent$1,
+        name: () => resolveTabName('core.module.layout.not-found.tab-name'),
+        icon: 'search_off',
+        color: 'warning',
+    })
+], RootComponent$1);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RootComponent$1, decorators: [{
             type: Component,
             args: [{ imports: [SdButton, SdPageComponent, TranslatePipe], template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"not-found\" class=\"sd-image-not-found\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.not-found.title' | translate }}</span>\n      <span class=\"T16R text-secondary mt-4\">\n        {{ 'core.module.layout.not-found.message' | translate }}\n      </span>\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.not-found.back' | translate\" prefixIcon=\"arrow_back\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"] }]
@@ -2358,7 +2435,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
 });
 
 // End
-class RootComponent {
+let RootComponent = class RootComponent {
     // ==========================================
     // INJECT SERVICES (Modern Angular)
     // ==========================================
@@ -2393,7 +2470,15 @@ class RootComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: RootComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"forbidden\" class=\"sd-image-forbidden\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.forbidden.title' | translate }}</span>\n      <span class=\"T14R text-secondary mt-4\"\n        >{{ 'core.module.layout.forbidden.message' | translate }}</span\n      >\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.forbidden.back-home' | translate\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"], dependencies: [{ kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdPageComponent, selector: "sd-page", inputs: ["title", "description", "noHeader"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
+};
+RootComponent = __decorate([
+    SdTabComponent({
+        component: RootComponent,
+        name: () => resolveTabName('core.module.layout.forbidden.tab-name'),
+        icon: 'block',
+        color: 'error',
+    })
+], RootComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RootComponent, decorators: [{
             type: Component,
             args: [{ imports: [SdButton, SdPageComponent, TranslatePipe], template: "@let _userInfo = userInfo();\n<sd-page>\n  <div class=\"d-flex flex-column\" headerLeft>\n    <div class=\"font-weight-medium fs-20\">{{ 'core.module.layout.greeting.hello' | translate: { name: _userInfo?.fullName ?? _userInfo?.email ?? _userInfo?.username ?? '' } }}</div>\n    <span class=\"T12R text-secondary\">{{ todayInfo() }}</span>\n  </div>\n  <div class=\"h-full d-flex flex-column align-items-center\">\n    <div class=\"h-full d-flex flex-column align-items-center justify-content-center text-center wrapper\">\n      <img alt=\"forbidden\" class=\"sd-image-forbidden\" />\n      <span class=\"T16M mt-24\">{{ 'core.module.layout.forbidden.title' | translate }}</span>\n      <span class=\"T14R text-secondary mt-4\"\n        >{{ 'core.module.layout.forbidden.message' | translate }}</span\n      >\n      <sd-button class=\"mt-16\" type=\"fill\" color=\"primary\" (click)=\"reload()\" [title]=\"'core.module.layout.forbidden.back-home' | translate\"> </sd-button>\n    </div>\n  </div>\n</sd-page>\n", styles: [".wrapper{width:300px}\n"] }]
@@ -2457,5 +2542,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_LAYOUT_MOBILE_BREAKPOINT, ForbiddenModule, HighlightSearchPipe, HomeModule, MenuFocusPipe, MenuPipe, NotFoundModule, SD_LAYOUT_CONFIGURATION, SD_LAYOUT_VIEWPORT, SdLayoutComponent, SdLayoutMenuTreeComponent, SdLayoutModule, SdLayoutNavigationStateService, SdLayoutResponsiveService, SdLayoutService, SdLayoutStorageService, SdLayoutUserMenuComponent, SdPageComponent, SidebarMobileOverlayComponent, SidebarMobileV1Component, SidebarMobileV2Component, SidebarMobileV3Component, SidebarV2Component, SidebarV3Component, flattenMenuLeaves, getMenuStableKey, normalizeLayoutMobileBreakpoint, normalizeSidebarConfiguration, resolveMenuKeys, resolveSidebarV2Interaction, resolveSidebarV3Recent, searchMenuLeaves, selectPrimaryMenuGroups };
+export { DEFAULT_LAYOUT_MOBILE_BREAKPOINT, ForbiddenModule, HighlightSearchPipe, HomeModule, MenuFocusPipe, MenuPipe, NotFoundModule, SD_LAYOUT_CONFIGURATION, SD_LAYOUT_VIEWPORT, SdLayoutComponent, SdLayoutMenuTreeComponent, SdLayoutModule, SdLayoutNavigationStateService, SdLayoutResponsiveService, SdLayoutService, SdLayoutStorageService, SdLayoutUserMenuComponent, SdPageComponent, SidebarMobileOverlayComponent, SidebarMobileV1Component, SidebarMobileV2Component, SidebarMobileV3Component, SidebarV2Component, SidebarV3Component, flattenMenuLeaves, getMenuStableKey, normalizeLayoutMobileBreakpoint, normalizeSidebarConfiguration, resolveMenuKeys, resolveSidebarV2Interaction, resolveSidebarV3Recent, resolveTabName, searchMenuLeaves, selectPrimaryMenuGroups };
 //# sourceMappingURL=sdcorejs-angular-modules-layout.mjs.map