@updevs/components 1.0.0-alpha.40 → 1.0.0-alpha.41

package/fesm2022/updevs-components-layout.mjs

@@ -511,14 +511,17 @@ class SidebarComponent extends BaseComponent {
         this.menuItems = [];
         this.textService = inject(TextService);
         this.currentRoute = '';
+        this.menuItemsBackup = [];
         this.router = inject(Router);
         this.menuService = inject(MenuService);
     }
     ngOnInit() {
         this.currentRoute = this.router.url;
         this.menuItems = this.menuService.generateMenu();
+        this.menuItemsBackup = [...this.menuItems];
         const menuRefreshSub = this.menuService.refreshSubject.subscribe(() => {
             this.menuItems = [...this.menuService.generateMenu()];
+            this.menuItemsBackup = [...this.menuItems];
             this.updateActiveRoute();
         });
         const routerSub = this.router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(event => {
@@ -535,17 +538,19 @@ class SidebarComponent extends BaseComponent {
             }
             return;
         }
-        this.resetMenuState(this.menuItems);
-        item.isActive = true;
-        this.updateParents(item);
+        let newMenuItems = this.resetMenuState(this.menuItems);
+        newMenuItems = this.setItemActive(newMenuItems, item, this.hasChildren(item) ? !item.isActive : true);
+        newMenuItems = this.updateParents(newMenuItems, item);
+        this.menuItems = newMenuItems;
         if (!!item.clickFunction) {
             item.clickFunction();
             return;
         }
-        if ((item.children?.length || 0) > 0) {
+        if (this.hasChildren(item)) {
             return;
         }
-        this.router.navigate(item.getFullPath()).then();
+        const fullPath = this.findItemById(this.menuItemsBackup, item.id).getFullPath();
+        this.router.navigate(fullPath).then();
     }
     hasChildren(item) {
         return (item.children?.length || 0) > 0;
@@ -564,50 +569,117 @@ class SidebarComponent extends BaseComponent {
         if (item.fullPath === fullPath) {
             return item;
         }
-        else if (item.children.length > 0) {
-            let result;
-            for (let i = 0; !result && i < item.children.length; i++) {
-                result = this.findActiveNode(item.children[i], fullPath);
+        for (const child of item.children) {
+            const found = this.findActiveNode(child, fullPath);
+            if (found) {
+                return found;
             }
-            return result;
         }
         return undefined;
     }
     updateActiveRoute() {
-        this.resetMenuState(this.menuItems);
-        let item;
-        for (const mi of this.menuItems) {
-            item = this.findActiveNode(mi, this.currentRoute);
-            if (!!item) {
+        let newMenuItems = this.resetMenuState(this.menuItems);
+        const activePath = this.getActivePath(newMenuItems);
+        newMenuItems = this.setActivePath(newMenuItems, activePath);
+        this.menuItems = newMenuItems;
+    }
+    setActivePath(items, path) {
+        if (path.length === 0) {
+            return items;
+        }
+        return items.map(item => {
+            const pathItem = path.find(p => p.id === item.id);
+            if (!pathItem) {
+                return item;
+            }
+            const newItem = { ...item, isActive: true };
+            if (newItem.children?.length) {
+                newItem.children = this.setActivePath(newItem.children, path.filter(p => p.parent?.id === newItem.id));
+                newItem.children.forEach(child => child.parent = newItem);
+            }
+            return newItem;
+        });
+    }
+    getActivePath(items) {
+        let activeItem;
+        // Find the deepest active item.
+        for (const item of items) {
+            activeItem = this.findActiveNode(item, this.currentRoute);
+            if (activeItem) {
                 break;
             }
         }
-        while (!!item) {
-            item.isActive = true;
-            item = item.parent;
+        // Collect parent hierarchy.
+        const path = [];
+        while (activeItem) {
+            path.unshift(activeItem);
+            activeItem = activeItem.parent;
         }
+        return path;
     }
     resetMenuState(items) {
-        items.forEach(i => {
-            i.isActive = false;
-            if (i.children.length > 0) {
-                this.resetMenuState(i.children);
+        return items.map(item => {
+            const newItem = { ...item, isActive: false };
+            if (newItem.children?.length) {
+                newItem.children = this.resetMenuState(newItem.children);
+                newItem.children.forEach(child => child.parent = newItem);
+            }
+            return newItem;
+        });
+    }
+    setItemActive(items, target, isActive) {
+        return items.map(item => {
+            if (item.id === target.id) {
+                const newItem = { ...item, isActive };
+                if (newItem.children?.length) {
+                    newItem.children = this.setItemActive(newItem.children, target, isActive);
+                    newItem.children.forEach(child => child.parent = newItem);
+                }
+                return newItem;
             }
+            if (item.children?.length) {
+                const newChildren = this.setItemActive(item.children, target, isActive);
+                const newItem = { ...item, children: newChildren };
+                newChildren.forEach(child => child.parent = newItem);
+                return newItem;
+            }
+            return item;
         });
     }
-    updateParents(menuItem) {
-        let item = menuItem;
-        while (!!item) {
-            item.isActive = true;
-            item = item.parent;
+    updateParents(items, childItem) {
+        let parent = childItem.parent;
+        let updatedItems = [...items];
+        while (parent) {
+            updatedItems = updatedItems.map(item => {
+                if (item.id === parent.id) {
+                    return { ...parent, isActive: true };
+                }
+                return item;
+            });
+            parent = parent.parent;
+        }
+        return updatedItems;
+    }
+    findItemById(items, targetId) {
+        for (const item of items) {
+            if (item.id === targetId) {
+                return item;
+            }
+            if (item.children?.length) {
+                const child = this.findItemById(item.children, targetId);
+                if (!!child) {
+                    return child;
+                }
+            }
         }
+        return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SidebarComponent, selector: "upd-sidebar", host: { properties: { "class": "this.wrapperClasses", "attr.data-bs-theme": "this.theme" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n    <div class=\"collapse navbar-collapse\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SidebarComponent, selector: "upd-sidebar", host: { properties: { "class": "this.wrapperClasses", "attr.data-bs-theme": "this.theme" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n    <div class=\"collapse navbar-collapse\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item.id) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child.id) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n    <div class=\"collapse navbar-collapse\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
+            args: [{ selector: 'upd-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n    <div class=\"collapse navbar-collapse\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item.id) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child.id) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']