@indigina/ui-kit 1.1.447 → 1.1.448

package/fesm2022/indigina-ui-kit.mjs

@@ -4235,7 +4235,6 @@ class KitNavigationMenuComponent {
         this.KitSvgIconType = KitSvgIconType;
         this.KitTooltipPosition = KitTooltipPosition;
         this.isAbsoluteLink = isAbsoluteLink;
-        this.setExpandedStateOnRouterChange();
     }
     ngOnInit() {
         this.setExpandedStateOnRouterChange();
@@ -4268,29 +4267,16 @@ class KitNavigationMenuComponent {
         this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef)).subscribe((event) => this.updateNavigationState(this.menuItems(), event.url));
     }
     updateNavigationState(items, url) {
-        const matchLink = (item) => {
-            const rootPath = '/';
-            if (!item.link) {
-                return false;
-            }
-            if (item.link === rootPath) {
-                return url === rootPath;
-            }
-            if (!(url === item.link || url.startsWith(item.link))) {
-                return false;
-            }
-            if (!item.queryParams || Object.keys(item.queryParams).length === 0) {
-                return true;
-            }
-            const currentQueryParams = this.router.parseUrl(url).queryParams;
-            return Object.keys(item.queryParams).every(key => currentQueryParams[key] === item.queryParams?.[key]);
-        };
+        const currentPath = this.getPathname(url);
+        const currentQueryParams = this.router.parseUrl(url).queryParams;
         items.forEach(item => {
-            if (item.items) {
+            const itemMatches = this.isItemMatch(item, currentPath, currentQueryParams);
+            if (item.items?.length) {
                 this.updateNavigationState(item.items, url);
-                item.expanded = item.items.some(child => child.expanded) ||
-                    item.items.some(child => matchLink(child));
-                item.active = item.items.some(child => child.active);
+                const hasActiveChild = item.items.some(child => child.active);
+                const hasExpandedChild = item.items.some(child => child.expanded);
+                item.active = hasActiveChild || itemMatches;
+                item.expanded = hasExpandedChild || hasActiveChild || itemMatches;
                 if (item.expanded) {
                     this.selectedItem.set(item);
                     this.selectedAppsItems.set(null);
@@ -4299,7 +4285,7 @@ class KitNavigationMenuComponent {
             }
             else {
                 item.expanded = false;
-                item.active = matchLink(item);
+                item.active = itemMatches;
                 if (item.active) {
                     this.selectedItem.set(item);
                     this.selectedAppsItems.set(null);
@@ -4309,6 +4295,44 @@ class KitNavigationMenuComponent {
         });
         this.menuItems.set([...items]);
     }
+    isItemMatch(item, currentPath, currentQueryParams) {
+        if (item.link) {
+            return this.isLinkMatch(item, currentPath, currentQueryParams);
+        }
+        return this.isGroupPathMatch(item, currentPath);
+    }
+    isGroupPathMatch(item, currentPath) {
+        if (!item.items?.length) {
+            return false;
+        }
+        return item.items.some(child => {
+            if (child.link) {
+                return this.isSameOrChildPath(this.getPathname(child.link), currentPath);
+            }
+            return this.isGroupPathMatch(child, currentPath);
+        });
+    }
+    isLinkMatch(item, currentPath, currentQueryParams) {
+        const rootPath = '/';
+        if (!item.link) {
+            return false;
+        }
+        const itemPath = this.getPathname(item.link);
+        if (itemPath === rootPath) {
+            return currentPath === rootPath;
+        }
+        if (!this.isSameOrChildPath(currentPath, itemPath)) {
+            return false;
+        }
+        if (!item.queryParams || Object.keys(item.queryParams).length === 0) {
+            return true;
+        }
+        return Object.keys(item.queryParams).every(key => currentQueryParams[key] === item.queryParams?.[key]);
+    }
+    getPathname(url) {
+        const segments = this.router.parseUrl(url).root.children.primary?.segments ?? [];
+        return segments.length ? `/${segments.map(segment => segment.path).join('/')}` : '/';
+    }
     collapseAllItems(items) {
         this.kitNavigationMenuService.setCollapsedState(true);
         items.forEach(item => item.expanded = false);
@@ -4322,6 +4346,9 @@ class KitNavigationMenuComponent {
     updateMenuState() {
         this.kitNavigationMenuService.setSelectedState(!!this.selectedItem()?.items, !!this.selectedAppsItems());
     }
+    isSameOrChildPath(currentPath, targetPath) {
+        return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitNavigationMenuComponent, isStandalone: true, selector: "kit-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems().length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-wrap\">\n      <div class=\"nav-list\">\n        @for (item of menuItems(); track $index) {\n          @if (item.items?.length) {\n            <a class=\"nav-link\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [class.active]=\"item.active\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          } @else {\n            @if (item.link) {\n              @if (isAbsoluteLink(item.link)) {\n                <a class=\"nav-link\"\n                   kitTooltip\n                   kitTooltipFilter=\".nav-link\"\n                   target=\"_blank\"\n                   [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n                   [title]=\"item.title\"\n                   [href]=\"item.link\"\n                   (click)=\"handleClick(item)\">\n                  @if (item.icon) {\n                    <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                    ></ng-container>\n                  }\n                </a>\n              } @else {\n                <a class=\"nav-link\"\n                   kitTooltip\n                   kitTooltipFilter=\".nav-link\"\n                   [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n                   [title]=\"item.title\"\n                   [class.active]=\"item.active\"\n                   [routerLink]=\"item.link\"\n                   [queryParams]=\"item.queryParams\"\n                   (click)=\"handleClick(item)\">\n                  @if (item.icon) {\n                    <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                    ></ng-container>\n                  }\n                </a>\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             expandCollapseAnimation('width'),
@@ -4339,7 +4366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         NgClass,
                         NgTemplateOutlet,
                     ], template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems().length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-wrap\">\n      <div class=\"nav-list\">\n        @for (item of menuItems(); track $index) {\n          @if (item.items?.length) {\n            <a class=\"nav-link\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [class.active]=\"item.active\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          } @else {\n            @if (item.link) {\n              @if (isAbsoluteLink(item.link)) {\n                <a class=\"nav-link\"\n                   kitTooltip\n                   kitTooltipFilter=\".nav-link\"\n                   target=\"_blank\"\n                   [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n                   [title]=\"item.title\"\n                   [href]=\"item.link\"\n                   (click)=\"handleClick(item)\">\n                  @if (item.icon) {\n                    <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                    ></ng-container>\n                  }\n                </a>\n              } @else {\n                <a class=\"nav-link\"\n                   kitTooltip\n                   kitTooltipFilter=\".nav-link\"\n                   [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n                   [title]=\"item.title\"\n                   [class.active]=\"item.active\"\n                   [routerLink]=\"item.link\"\n                   [queryParams]=\"item.queryParams\"\n                   (click)=\"handleClick(item)\">\n                  @if (item.icon) {\n                    <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                    ></ng-container>\n                  }\n                </a>\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }, { type: i0.Output, args: ["menuItemsChange"] }], appsMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsMenuItems", required: false }] }], logoPath: [{
+        }], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }, { type: i0.Output, args: ["menuItemsChange"] }], appsMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsMenuItems", required: false }] }], logoPath: [{
                 type: Input
             }] } });