@indigina/ui-kit 1.1.46 → 1.1.47
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.
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component.mjs +9 -3
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.component.mjs +2 -2
- package/fesm2022/indigina-ui-kit.mjs +10 -4
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -9,6 +9,12 @@ export class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComp
|
|
|
9
9
|
super(...arguments);
|
|
10
10
|
this.item = null;
|
|
11
11
|
}
|
|
12
|
+
handleClick(item) {
|
|
13
|
+
if (!item.expanded && this.item?.items) {
|
|
14
|
+
this.collapseAll(this.item.items);
|
|
15
|
+
}
|
|
16
|
+
super.handleClick(item);
|
|
17
|
+
}
|
|
12
18
|
collapseMenu(item) {
|
|
13
19
|
if (this.collapsed && item) {
|
|
14
20
|
item.expanded = false;
|
|
@@ -18,7 +24,7 @@ export class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComp
|
|
|
18
24
|
}
|
|
19
25
|
}
|
|
20
26
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column}.kit-navigation-menu-submenu .nav-list-child{gap:10px;margin-top:10px}.kit-navigation-menu-submenu .nav-list-sub-child{gap:5px;margin-top:5px}.kit-navigation-menu-submenu .nav-item{position:relative}.kit-navigation-menu-submenu .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 24px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link-toggle{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active .nav-link-toggle{stroke:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-link.active .nav-link-active{display:block}.kit-navigation-menu-submenu .nav-link-active{display:none;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link{padding:10px 6px 10px 36px;color:var(--ui-kit-color-grey-12);font-size:13px}.kit-navigation-menu-submenu .child-link .nav-link-toggle{stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu.collapsed .nav-list{position:absolute;left:100%;top:0;gap:0;margin:0;padding:4px;width:220px;line-height:20px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;box-sizing:border-box;z-index:5}.kit-navigation-menu-submenu.collapsed .nav-list:before{content:\"\";position:absolute;top:0;height:100%;background:none}.kit-navigation-menu-submenu.collapsed .nav-list-child{margin-left:14px}.kit-navigation-menu-submenu.collapsed .nav-list-child:before{width:14px;left:-14px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child{top:-4px;margin-left:4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child:before{width:4px;left:-4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child .nav-link-toggle{display:none}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link{background:var(--ui-kit-color-grey-13)}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link{padding:6px 12px;color:var(--ui-kit-color-grey-10)}.kit-navigation-menu-submenu.collapsed .nav-link-toggle{margin-left:auto;width:18px;height:18px;transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link:hover,.kit-navigation-menu-submenu.collapsed .nav-link.active{background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
|
|
22
28
|
expandCollapseAnimation,
|
|
23
29
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
30
|
}
|
|
@@ -26,8 +32,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
26
32
|
type: Component,
|
|
27
33
|
args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
28
34
|
expandCollapseAnimation,
|
|
29
|
-
], template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:
|
|
35
|
+
], template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column}.kit-navigation-menu-submenu .nav-list-child{gap:10px;margin-top:10px}.kit-navigation-menu-submenu .nav-list-sub-child{gap:5px;margin-top:5px}.kit-navigation-menu-submenu .nav-item{position:relative}.kit-navigation-menu-submenu .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 24px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link-toggle{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active .nav-link-toggle{stroke:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-link.active .nav-link-active{display:block}.kit-navigation-menu-submenu .nav-link-active{display:none;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link{padding:10px 6px 10px 36px;color:var(--ui-kit-color-grey-12);font-size:13px}.kit-navigation-menu-submenu .child-link .nav-link-toggle{stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu.collapsed .nav-list{position:absolute;left:100%;top:0;gap:0;margin:0;padding:4px;width:220px;line-height:20px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;box-sizing:border-box;z-index:5}.kit-navigation-menu-submenu.collapsed .nav-list:before{content:\"\";position:absolute;top:0;height:100%;background:none}.kit-navigation-menu-submenu.collapsed .nav-list-child{margin-left:14px}.kit-navigation-menu-submenu.collapsed .nav-list-child:before{width:14px;left:-14px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child{top:-4px;margin-left:4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child:before{width:4px;left:-4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child .nav-link-toggle{display:none}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link{background:var(--ui-kit-color-grey-13)}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link{padding:6px 12px;color:var(--ui-kit-color-grey-10)}.kit-navigation-menu-submenu.collapsed .nav-link-toggle{margin-left:auto;width:18px;height:18px;transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link:hover,.kit-navigation-menu-submenu.collapsed .nav-link.active{background:var(--ui-kit-color-grey-13)}\n"] }]
|
|
30
36
|
}], propDecorators: { item: [{
|
|
31
37
|
type: Input
|
|
32
38
|
}] } });
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
39
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMva2l0LW5hdmlnYXRpb24tbWVudS9raXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnUva2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMva2l0LW5hdmlnYXRpb24tbWVudS9raXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnUva2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7O0FBV3ZGLE1BQU0sT0FBTyxpQ0FBa0MsU0FBUSw4QkFBOEI7SUFUckY7O1FBVVcsU0FBSSxHQUFpQyxJQUFJLENBQUM7S0FrQnBEO0lBaEJVLFdBQVcsQ0FBQyxJQUEyQjtRQUM5QyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRTtZQUN0QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbkM7UUFFRCxLQUFLLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRCxZQUFZLENBQUMsSUFBa0M7UUFDN0MsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUN0QixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDOUI7U0FDRjtJQUNILENBQUM7OEdBbEJVLGlDQUFpQztrR0FBakMsaUNBQWlDLG9IQ2Q5Qyw0dkVBK0RBLG0vR0RyRGM7WUFDVix1QkFBdUI7U0FDeEI7OzJGQUVVLGlDQUFpQztrQkFUN0MsU0FBUzsrQkFDRSw2QkFBNkIsbUJBR3RCLHVCQUF1QixDQUFDLE1BQU0sY0FDbkM7d0JBQ1YsdUJBQXVCO3FCQUN4Qjs4QkFHUSxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0TmF2aWdhdGlvbk1lbnVJdGVtIH0gZnJvbSAnLi4va2l0LW5hdmlnYXRpb24tbWVudS5tb2RlbCc7XG5pbXBvcnQgeyBleHBhbmRDb2xsYXBzZUFuaW1hdGlvbiB9IGZyb20gJy4uL2tpdC1uYXZpZ2F0aW9uLW1lbnUudXRpbCc7XG5pbXBvcnQgeyBLaXROYXZpZ2F0aW9uTWVudUJhc2VDb21wb25lbnQgfSBmcm9tICcuLi9raXQtbmF2aWdhdGlvbi1tZW51LWJhc2UuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUtc3VibWVudS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9raXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnUuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgYW5pbWF0aW9uczogW1xuICAgIGV4cGFuZENvbGxhcHNlQW5pbWF0aW9uLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBLaXROYXZpZ2F0aW9uTWVudVN1Ym1lbnVDb21wb25lbnQgZXh0ZW5kcyBLaXROYXZpZ2F0aW9uTWVudUJhc2VDb21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtOiBLaXROYXZpZ2F0aW9uTWVudUl0ZW0gfCBudWxsID0gbnVsbDtcblxuICBvdmVycmlkZSBoYW5kbGVDbGljayhpdGVtOiBLaXROYXZpZ2F0aW9uTWVudUl0ZW0pOiB2b2lkIHtcbiAgICBpZiAoIWl0ZW0uZXhwYW5kZWQgJiYgdGhpcy5pdGVtPy5pdGVtcykge1xuICAgICAgdGhpcy5jb2xsYXBzZUFsbCh0aGlzLml0ZW0uaXRlbXMpO1xuICAgIH1cblxuICAgIHN1cGVyLmhhbmRsZUNsaWNrKGl0ZW0pO1xuICB9XG5cbiAgY29sbGFwc2VNZW51KGl0ZW06IEtpdE5hdmlnYXRpb25NZW51SXRlbSB8IG51bGwpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5jb2xsYXBzZWQgJiYgaXRlbSkge1xuICAgICAgaXRlbS5leHBhbmRlZCA9IGZhbHNlO1xuICAgICAgaWYgKGl0ZW0uaXRlbXMpIHtcbiAgICAgICAgdGhpcy5jb2xsYXBzZUFsbChpdGVtLml0ZW1zKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJraXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnVcIlxuICAgICBbY2xhc3MuY29sbGFwc2VkXT1cImNvbGxhcHNlZFwiPlxuICA8ZGl2IGNsYXNzPVwibmF2LWxpc3QgbmF2LWxpc3QtY2hpbGRcIj5cbiAgICBAZm9yIChjaGlsZCBvZiBpdGVtPy5pdGVtczsgdHJhY2sgY2hpbGQpIHtcbiAgICAgIEBpZiAoIWNoaWxkLml0ZW1zPy5sZW5ndGgpIHtcbiAgICAgICAgQGlmIChjaGlsZC5saW5rKSB7XG4gICAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgICAgcm91dGVyTGlua0FjdGl2ZT1cImFjdGl2ZVwiXG4gICAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiY2hpbGQubGlua1wiXG4gICAgICAgICAgICAgKGNsaWNrKT1cImNvbGxhcHNlTWVudShpdGVtKVwiPlxuICAgICAgICAgICAge3sgY2hpbGQudGl0bGUgfX1cbiAgICAgICAgICAgIEBpZiAoY29sbGFwc2VkKSB7XG4gICAgICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJuYXYtbGluay1hY3RpdmVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFQ0tcIlxuICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9hPlxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBpZiAoY2hpbGQuaXRlbXM/Lmxlbmd0aCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwibmF2LWl0ZW1cIlxuICAgICAgICAgICAgIFtjbGFzcy5leHBhbmRlZF09XCJjaGlsZC5leHBhbmRlZFwiXG4gICAgICAgICAgICAgKG1vdXNlZW50ZXIpPVwiaGFuZGxlSG92ZXIoY2hpbGQsIHRydWUpXCJcbiAgICAgICAgICAgICAobW91c2VsZWF2ZSk9XCJoYW5kbGVIb3ZlcihjaGlsZCwgZmFsc2UpXCI+XG4gICAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgICAgKG1vdXNlbGVhdmUpPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCJcbiAgICAgICAgICAgICAoY2xpY2spPVwiaGFuZGxlQ2xpY2soY2hpbGQpXCI+XG4gICAgICAgICAgICB7eyBjaGlsZC50aXRsZSB9fVxuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIm5hdi1saW5rLXRvZ2dsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9ET1dOXCJcbiAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICA8L2E+XG5cbiAgICAgICAgICBAaWYgKGNoaWxkPy5leHBhbmRlZCkge1xuICAgICAgICAgICAgPGRpdiBAZXhwYW5kQ29sbGFwc2VBbmltYXRpb25cbiAgICAgICAgICAgICAgICAgY2xhc3M9XCJuYXYtbGlzdCBuYXYtbGlzdC1zdWItY2hpbGRcIlxuICAgICAgICAgICAgICAgICBbQC5kaXNhYmxlZF09XCJjb2xsYXBzZWRcIj5cbiAgICAgICAgICAgICAgQGZvciAoc3ViQ2hpbGQgb2YgY2hpbGQuaXRlbXM7IHRyYWNrIHN1YkNoaWxkKSB7XG4gICAgICAgICAgICAgICAgQGlmIChzdWJDaGlsZC5saW5rKSB7XG4gICAgICAgICAgICAgICAgICA8YSBjbGFzcz1cIm5hdi1saW5rIGNoaWxkLWxpbmtcIlxuICAgICAgICAgICAgICAgICAgICAgcm91dGVyTGlua0FjdGl2ZT1cImFjdGl2ZVwiXG4gICAgICAgICAgICAgICAgICAgICBbcm91dGVyTGlua109XCJzdWJDaGlsZC5saW5rXCJcbiAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJjb2xsYXBzZU1lbnUoaXRlbSlcIj5cbiAgICAgICAgICAgICAgICAgICAge3sgc3ViQ2hpbGQudGl0bGUgfX1cbiAgICAgICAgICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIm5hdi1saW5rLXRvZ2dsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiS2l0U3ZnSWNvbi5DSEVWUk9OX1JJR0hUXCJcbiAgICAgICAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgICAgICAgICBAaWYgKGNvbGxhcHNlZCkge1xuICAgICAgICAgICAgICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJuYXYtbGluay1hY3RpdmVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiS2l0U3ZnSWNvbi5DSEVDS1wiXG4gICAgICAgICAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICA8L2E+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgfVxuICAgIH1cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -61,7 +61,7 @@ export class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
61
61
|
this.changeDetectorRef.markForCheck();
|
|
62
62
|
}
|
|
63
63
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:
|
|
64
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.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-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["item"] }], animations: [
|
|
65
65
|
expandCollapseAnimation,
|
|
66
66
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
67
67
|
}
|
|
@@ -69,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
69
69
|
type: Component,
|
|
70
70
|
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
71
71
|
expandCollapseAnimation,
|
|
72
|
-
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:
|
|
72
|
+
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.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-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
73
73
|
}], ctorParameters: () => [{ type: i1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
74
74
|
type: Input
|
|
75
75
|
}], animate: [{
|
|
@@ -3751,6 +3751,12 @@ class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3751
3751
|
super(...arguments);
|
|
3752
3752
|
this.item = null;
|
|
3753
3753
|
}
|
|
3754
|
+
handleClick(item) {
|
|
3755
|
+
if (!item.expanded && this.item?.items) {
|
|
3756
|
+
this.collapseAll(this.item.items);
|
|
3757
|
+
}
|
|
3758
|
+
super.handleClick(item);
|
|
3759
|
+
}
|
|
3754
3760
|
collapseMenu(item) {
|
|
3755
3761
|
if (this.collapsed && item) {
|
|
3756
3762
|
item.expanded = false;
|
|
@@ -3760,7 +3766,7 @@ class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3760
3766
|
}
|
|
3761
3767
|
}
|
|
3762
3768
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:
|
|
3769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: { item: "item" }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column}.kit-navigation-menu-submenu .nav-list-child{gap:10px;margin-top:10px}.kit-navigation-menu-submenu .nav-list-sub-child{gap:5px;margin-top:5px}.kit-navigation-menu-submenu .nav-item{position:relative}.kit-navigation-menu-submenu .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 24px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link-toggle{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active .nav-link-toggle{stroke:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-link.active .nav-link-active{display:block}.kit-navigation-menu-submenu .nav-link-active{display:none;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link{padding:10px 6px 10px 36px;color:var(--ui-kit-color-grey-12);font-size:13px}.kit-navigation-menu-submenu .child-link .nav-link-toggle{stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu.collapsed .nav-list{position:absolute;left:100%;top:0;gap:0;margin:0;padding:4px;width:220px;line-height:20px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;box-sizing:border-box;z-index:5}.kit-navigation-menu-submenu.collapsed .nav-list:before{content:\"\";position:absolute;top:0;height:100%;background:none}.kit-navigation-menu-submenu.collapsed .nav-list-child{margin-left:14px}.kit-navigation-menu-submenu.collapsed .nav-list-child:before{width:14px;left:-14px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child{top:-4px;margin-left:4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child:before{width:4px;left:-4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child .nav-link-toggle{display:none}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link{background:var(--ui-kit-color-grey-13)}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link{padding:6px 12px;color:var(--ui-kit-color-grey-10)}.kit-navigation-menu-submenu.collapsed .nav-link-toggle{margin-left:auto;width:18px;height:18px;transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link:hover,.kit-navigation-menu-submenu.collapsed .nav-link.active{background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
|
|
3764
3770
|
expandCollapseAnimation,
|
|
3765
3771
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3766
3772
|
}
|
|
@@ -3768,7 +3774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3768
3774
|
type: Component,
|
|
3769
3775
|
args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3770
3776
|
expandCollapseAnimation,
|
|
3771
|
-
], template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:
|
|
3777
|
+
], template: "<div class=\"kit-navigation-menu-submenu\"\n [class.collapsed]=\"collapsed\">\n <div class=\"nav-list nav-list-child\">\n @for (child of item?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\"\n (click)=\"collapseMenu(item)\">\n {{ child.title }}\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n\n @if (child.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"child.expanded\"\n (mouseenter)=\"handleHover(child, true)\"\n (mouseleave)=\"handleHover(child, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @expandCollapseAnimation\n class=\"nav-list nav-list-sub-child\"\n [@.disabled]=\"collapsed\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n <a class=\"nav-link child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\"\n (click)=\"collapseMenu(item)\">\n {{ subChild.title }}\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n @if (collapsed) {\n <kit-svg-icon class=\"nav-link-active\"\n [icon]=\"KitSvgIcon.CHECK\"\n ></kit-svg-icon>\n }\n </a>\n }\n }\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column}.kit-navigation-menu-submenu .nav-list-child{gap:10px;margin-top:10px}.kit-navigation-menu-submenu .nav-list-sub-child{gap:5px;margin-top:5px}.kit-navigation-menu-submenu .nav-item{position:relative}.kit-navigation-menu-submenu .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 24px;color:var(--ui-kit-color-white);font-size:14px;font-weight:400;border-radius:8px;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu-submenu .nav-link-toggle{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active .nav-link-toggle{stroke:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-link.active .nav-link-active{display:block}.kit-navigation-menu-submenu .nav-link-active{display:none;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link{padding:10px 6px 10px 36px;color:var(--ui-kit-color-grey-12);font-size:13px}.kit-navigation-menu-submenu .child-link .nav-link-toggle{stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu.collapsed .nav-list{position:absolute;left:100%;top:0;gap:0;margin:0;padding:4px;width:220px;line-height:20px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;box-sizing:border-box;z-index:5}.kit-navigation-menu-submenu.collapsed .nav-list:before{content:\"\";position:absolute;top:0;height:100%;background:none}.kit-navigation-menu-submenu.collapsed .nav-list-child{margin-left:14px}.kit-navigation-menu-submenu.collapsed .nav-list-child:before{width:14px;left:-14px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child{top:-4px;margin-left:4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child:before{width:4px;left:-4px}.kit-navigation-menu-submenu.collapsed .nav-list-sub-child .nav-link-toggle{display:none}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link{background:var(--ui-kit-color-grey-13)}.kit-navigation-menu-submenu.collapsed .nav-item.expanded>.nav-link .nav-link-toggle{transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link{padding:6px 12px;color:var(--ui-kit-color-grey-10)}.kit-navigation-menu-submenu.collapsed .nav-link-toggle{margin-left:auto;width:18px;height:18px;transform:rotate(-90deg)}.kit-navigation-menu-submenu.collapsed .nav-link:hover,.kit-navigation-menu-submenu.collapsed .nav-link.active{background:var(--ui-kit-color-grey-13)}\n"] }]
|
|
3772
3778
|
}], propDecorators: { item: [{
|
|
3773
3779
|
type: Input
|
|
3774
3780
|
}] } });
|
|
@@ -3824,7 +3830,7 @@ class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3824
3830
|
this.changeDetectorRef.markForCheck();
|
|
3825
3831
|
}
|
|
3826
3832
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$6.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:
|
|
3833
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", multiple: "multiple" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.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-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["item"] }], animations: [
|
|
3828
3834
|
expandCollapseAnimation,
|
|
3829
3835
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3830
3836
|
}
|
|
@@ -3832,7 +3838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3832
3838
|
type: Component,
|
|
3833
3839
|
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3834
3840
|
expandCollapseAnimation,
|
|
3835
|
-
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:
|
|
3841
|
+
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n @for (item of items; track item) {\n @if (item.items?.length) {\n <div class=\"nav-item\"\n [class.expanded]=\"item.expanded\"\n (mouseenter)=\"handleHover(item, true)\"\n (mouseleave)=\"handleHover(item, false)\">\n <a class=\"nav-link\"\n (mouseleave)=\"$event.stopPropagation()\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n <kit-svg-icon class=\"nav-link-toggle\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (item.expanded) {\n <kit-navigation-menu-submenu class=\"display-block\"\n [@expandCollapseAnimation]\n [@.disabled]=\"!animate || collapsed\"\n [item]=\"item\"\n [collapsed]=\"collapsed\"\n ></kit-navigation-menu-submenu>\n }\n </div>\n } @else {\n @if (item.link) {\n <div class=\"nav-item\">\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"item?.link\"\n [title]=\"item.title\">\n @if (item.icon) {\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"nav-link-title\">{{ item.title }}</span>\n </a>\n </div>\n }\n }\n }\n</div>\n", styles: [".kit-navigation-menu{display:flex;flex-direction:column;gap:20px;width:100%;box-sizing:border-box;transition:width .2s}.kit-navigation-menu.collapsed{width:84px}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-title{width:0;opacity:0}.kit-navigation-menu.collapsed .nav-link-icon.fill{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .nav-link-icon.stroke{stroke:var(--ui-kit-color-white)}.kit-navigation-menu .nav-item{position:relative}.kit-navigation-menu .nav-item.expanded .nav-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.fill{fill:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-item.expanded .nav-link-toggle{transform:rotate(180deg)}.kit-navigation-menu .nav-link{display:flex;align-items:center;padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);font-size:14px;font-weight:600;border-radius:8px;text-decoration:none;cursor:pointer;overflow:hidden;box-sizing:border-box}.kit-navigation-menu .nav-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.fill{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .nav-link:hover .nav-link-icon.stroke,.kit-navigation-menu .nav-link:hover .nav-link-toggle{stroke:var(--ui-kit-color-hover)}.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-main);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-title{transition:opacity .2s}.kit-navigation-menu .nav-link-toggle{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0}.kit-navigation-menu .nav-link.active{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link.active .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link.active .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
3836
3842
|
}], ctorParameters: () => [{ type: i1$6.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
3837
3843
|
type: Input
|
|
3838
3844
|
}], animate: [{
|