@indigina/ui-kit 1.1.41 → 1.1.42
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 +3 -3
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.component.mjs +14 -2
- package/fesm2022/indigina-ui-kit.mjs +15 -3
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-navigation-menu/kit-navigation-menu.component.d.ts +6 -1
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@ export class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComp
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
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 <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 @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 @for (subChild of child.items; track subChild) {\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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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: [
|
|
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 <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 @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 <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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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
22
|
expandCollapseAnimation,
|
|
23
23
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
@@ -26,8 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
28
28
|
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 <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 @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 @for (subChild of child.items; track subChild) {\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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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"] }]
|
|
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 <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 @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 <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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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
30
|
}], propDecorators: { item: [{
|
|
31
31
|
type: Input
|
|
32
32
|
}] } });
|
|
33
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMva2l0LW5hdmlnYXRpb24tbWVudS9raXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnUva2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMva2l0LW5hdmlnYXRpb24tbWVudS9raXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnUva2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7O0FBV3ZGLE1BQU0sT0FBTyxpQ0FBa0MsU0FBUSw4QkFBOEI7SUFUckY7O1FBVVcsU0FBSSxHQUFpQyxJQUFJLENBQUM7S0FVcEQ7SUFSQyxZQUFZLENBQUMsSUFBa0M7UUFDN0MsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUN0QixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDOUI7U0FDRjtJQUNILENBQUM7OEdBVlUsaUNBQWlDO2tHQUFqQyxpQ0FBaUMsb0hDZDlDLHltRUEyREEsKzJHRGpEYztZQUNWLHVCQUF1QjtTQUN4Qjs7MkZBRVUsaUNBQWlDO2tCQVQ3QyxTQUFTOytCQUNFLDZCQUE2QixtQkFHdEIsdUJBQXVCLENBQUMsTUFBTSxjQUNuQzt3QkFDVix1QkFBdUI7cUJBQ3hCOzhCQUdRLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLaXROYXZpZ2F0aW9uTWVudUl0ZW0gfSBmcm9tICcuLi9raXQtbmF2aWdhdGlvbi1tZW51Lm1vZGVsJztcbmltcG9ydCB7IGV4cGFuZENvbGxhcHNlQW5pbWF0aW9uIH0gZnJvbSAnLi4va2l0LW5hdmlnYXRpb24tbWVudS51dGlsJztcbmltcG9ydCB7IEtpdE5hdmlnYXRpb25NZW51QmFzZUNvbXBvbmVudCB9IGZyb20gJy4uL2tpdC1uYXZpZ2F0aW9uLW1lbnUtYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXQtbmF2aWdhdGlvbi1tZW51LXN1Ym1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4va2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUtc3VibWVudS5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBhbmltYXRpb25zOiBbXG4gICAgZXhwYW5kQ29sbGFwc2VBbmltYXRpb24sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEtpdE5hdmlnYXRpb25NZW51U3VibWVudUNvbXBvbmVudCBleHRlbmRzIEtpdE5hdmlnYXRpb25NZW51QmFzZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGl0ZW06IEtpdE5hdmlnYXRpb25NZW51SXRlbSB8IG51bGwgPSBudWxsO1xuXG4gIGNvbGxhcHNlTWVudShpdGVtOiBLaXROYXZpZ2F0aW9uTWVudUl0ZW0gfCBudWxsKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuY29sbGFwc2VkICYmIGl0ZW0pIHtcbiAgICAgIGl0ZW0uZXhwYW5kZWQgPSBmYWxzZTtcbiAgICAgIGlmIChpdGVtLml0ZW1zKSB7XG4gICAgICAgIHRoaXMuY29sbGFwc2VBbGwoaXRlbS5pdGVtcyk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwia2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51XCJcbiAgICAgW2NsYXNzLmNvbGxhcHNlZF09XCJjb2xsYXBzZWRcIj5cbiAgPGRpdiBjbGFzcz1cIm5hdi1saXN0IG5hdi1saXN0LWNoaWxkXCI+XG4gICAgQGZvciAoY2hpbGQgb2YgaXRlbT8uaXRlbXM7IHRyYWNrIGNoaWxkKSB7XG4gICAgICBAaWYgKCFjaGlsZC5pdGVtcz8ubGVuZ3RoKSB7XG4gICAgICAgIDxhIGNsYXNzPVwibmF2LWxpbmtcIlxuICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcbiAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiY2hpbGQubGlua1wiXG4gICAgICAgICAgIChjbGljayk9XCJjb2xsYXBzZU1lbnUoaXRlbSlcIj5cbiAgICAgICAgICB7eyBjaGlsZC50aXRsZSB9fVxuICAgICAgICAgIEBpZiAoY29sbGFwc2VkKSB7XG4gICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibmF2LWxpbmstYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiS2l0U3ZnSWNvbi5DSEVDS1wiXG4gICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgfVxuICAgICAgICA8L2E+XG4gICAgICB9XG5cbiAgICAgIEBpZiAoY2hpbGQuaXRlbXM/Lmxlbmd0aCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwibmF2LWl0ZW1cIlxuICAgICAgICAgICAgIFtjbGFzcy5leHBhbmRlZF09XCJjaGlsZC5leHBhbmRlZFwiXG4gICAgICAgICAgICAgKG1vdXNlZW50ZXIpPVwiaGFuZGxlSG92ZXIoY2hpbGQsIHRydWUpXCJcbiAgICAgICAgICAgICAobW91c2VsZWF2ZSk9XCJoYW5kbGVIb3ZlcihjaGlsZCwgZmFsc2UpXCI+XG4gICAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgICAgKG1vdXNlbGVhdmUpPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCJcbiAgICAgICAgICAgICAoY2xpY2spPVwiaGFuZGxlQ2xpY2soY2hpbGQpXCI+XG4gICAgICAgICAgICB7eyBjaGlsZC50aXRsZSB9fVxuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIm5hdi1saW5rLXRvZ2dsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9ET1dOXCJcbiAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICA8L2E+XG5cbiAgICAgICAgICBAaWYgKGNoaWxkPy5leHBhbmRlZCkge1xuICAgICAgICAgICAgPGRpdiBAZXhwYW5kQ29sbGFwc2VBbmltYXRpb25cbiAgICAgICAgICAgICAgICAgY2xhc3M9XCJuYXYtbGlzdCBuYXYtbGlzdC1zdWItY2hpbGRcIlxuICAgICAgICAgICAgICAgICBbQC5kaXNhYmxlZF09XCJjb2xsYXBzZWRcIj5cbiAgICAgICAgICAgICAgQGZvciAoc3ViQ2hpbGQgb2YgY2hpbGQuaXRlbXM7IHRyYWNrIHN1YkNoaWxkKSB7XG4gICAgICAgICAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGluayBjaGlsZC1saW5rXCJcbiAgICAgICAgICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICBbcm91dGVyTGlua109XCJzdWJDaGlsZC5saW5rXCJcbiAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiY29sbGFwc2VNZW51KGl0ZW0pXCI+XG4gICAgICAgICAgICAgICAgICB7eyBzdWJDaGlsZC50aXRsZSB9fVxuICAgICAgICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIm5hdi1saW5rLXRvZ2dsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9SSUdIVFwiXG4gICAgICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICAgICAgICBAaWYgKGNvbGxhcHNlZCkge1xuICAgICAgICAgICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibmF2LWxpbmstYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJLaXRTdmdJY29uLkNIRUNLXCJcbiAgICAgICAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIDwvYT5cbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICAgIH1cbiAgICB9XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -23,6 +23,10 @@ export class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
23
23
|
* Defines whether the component will have an animation when collapsing/expanding the menu
|
|
24
24
|
*/
|
|
25
25
|
this.animate = true;
|
|
26
|
+
/**
|
|
27
|
+
* Defines whether the component can have more than one item expanded at the same time
|
|
28
|
+
*/
|
|
29
|
+
this.multiple = false;
|
|
26
30
|
this.KitSvgIconType = KitSvgIconType;
|
|
27
31
|
this.setExpandedStateOnRouterChange();
|
|
28
32
|
}
|
|
@@ -34,6 +38,12 @@ export class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
34
38
|
this.collapseAll(this.items);
|
|
35
39
|
}
|
|
36
40
|
}
|
|
41
|
+
handleClick(item) {
|
|
42
|
+
if (!this.multiple && !item.expanded) {
|
|
43
|
+
this.collapseAll(this.items);
|
|
44
|
+
}
|
|
45
|
+
super.handleClick(item);
|
|
46
|
+
}
|
|
37
47
|
setExpandedStateOnRouterChange() {
|
|
38
48
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.setExpandedState(this.items, this.router.url));
|
|
39
49
|
}
|
|
@@ -51,7 +61,7 @@ export class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
51
61
|
this.changeDetectorRef.markForCheck();
|
|
52
62
|
}
|
|
53
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 }); }
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, 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 <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</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{position:relative}.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.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:400;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: [
|
|
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 <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</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{position:relative}.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.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:400;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: [
|
|
55
65
|
expandCollapseAnimation,
|
|
56
66
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
57
67
|
}
|
|
@@ -64,5 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
64
74
|
type: Input
|
|
65
75
|
}], animate: [{
|
|
66
76
|
type: Input
|
|
77
|
+
}], multiple: [{
|
|
78
|
+
type: Input
|
|
67
79
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQXFCLFNBQVMsRUFBRSxLQUFLLEVBQW9DLE1BQU0sZUFBZSxDQUFDO0FBRS9ILE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3JFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsYUFBYSxFQUFVLE1BQU0saUJBQWlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUM5QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7Ozs7O0FBV3RGLE1BQU0sT0FBTywwQkFBMkIsU0FBUSw4QkFBOEI7SUFrQjVFLFlBQ1UsTUFBYyxFQUNkLGlCQUFvQztRQUU1QyxLQUFLLEVBQUUsQ0FBQztRQUhBLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBbkI5Qzs7V0FFRztRQUNNLFVBQUssR0FBNEIsRUFBRSxDQUFDO1FBRTdDOztXQUVHO1FBQ00sWUFBTyxHQUFZLElBQUksQ0FBQztRQUVqQzs7V0FFRztRQUNNLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFMUIsbUJBQWMsR0FBMEIsY0FBYyxDQUFDO1FBTzlELElBQUksQ0FBQyw4QkFBOEIsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUU7WUFDbkMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDOUI7SUFDSCxDQUFDO0lBRVEsV0FBVyxDQUFDLElBQTJCO1FBQzlDLElBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNuQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUM5QjtRQUVELEtBQUssQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVPLDhCQUE4QjtRQUNwQyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQ3JCLE1BQU0sQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssWUFBWSxhQUFhLENBQUMsRUFDL0Msa0JBQWtCLEVBQUUsQ0FDckIsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7SUFFTyxnQkFBZ0IsQ0FBQyxLQUE4QixFQUFFLEdBQVc7UUFDbEUsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLE9BQU87U0FDUjtRQUVELEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLEdBQUcsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7WUFDM0QsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO2dCQUNkLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDO2dCQUN2QyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQzFEO1FBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsaUJBQWlCLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDeEMsQ0FBQzs4R0FoRVUsMEJBQTBCO2tHQUExQiwwQkFBMEIsNktDbEJ2QyxpNERBa0RBLDJsR0RwQ2M7WUFDVix1QkFBdUI7U0FDeEI7OzJGQUVVLDBCQUEwQjtrQkFUdEMsU0FBUzsrQkFDRSxxQkFBcUIsbUJBR2QsdUJBQXVCLENBQUMsTUFBTSxjQUNuQzt3QkFDVix1QkFBdUI7cUJBQ3hCOzJHQU1RLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEtpdE5hdmlnYXRpb25NZW51SXRlbSB9IGZyb20gJy4va2l0LW5hdmlnYXRpb24tbWVudS5tb2RlbCc7XG5pbXBvcnQgeyBleHBhbmRDb2xsYXBzZUFuaW1hdGlvbiB9IGZyb20gJy4va2l0LW5hdmlnYXRpb24tbWVudS51dGlsJztcbmltcG9ydCB7IEtpdFN2Z0ljb25UeXBlIH0gZnJvbSAnLi4va2l0LXN2Zy1pY29uL2tpdC1zdmctaWNvbi5jb25zdCc7XG5pbXBvcnQgeyBOYXZpZ2F0aW9uRW5kLCBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBLaXROYXZpZ2F0aW9uTWVudUJhc2VDb21wb25lbnQgfSBmcm9tICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUtYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXQtbmF2aWdhdGlvbi1tZW51JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4va2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBhbmltYXRpb25zOiBbXG4gICAgZXhwYW5kQ29sbGFwc2VBbmltYXRpb24sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEtpdE5hdmlnYXRpb25NZW51Q29tcG9uZW50IGV4dGVuZHMgS2l0TmF2aWdhdGlvbk1lbnVCYXNlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAvKipcbiAgICogQW4gaXRlbXMgbGlzdCB3aGljaCBpcyBnb2luZyB0byBiZSByZW5kZXJlZCBhcyBtZW51IGl0ZW1zXG4gICAqL1xuICBASW5wdXQoKSBpdGVtczogS2l0TmF2aWdhdGlvbk1lbnVJdGVtW10gPSBbXTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSBjb21wb25lbnQgd2lsbCBoYXZlIGFuIGFuaW1hdGlvbiB3aGVuIGNvbGxhcHNpbmcvZXhwYW5kaW5nIHRoZSBtZW51XG4gICAqL1xuICBASW5wdXQoKSBhbmltYXRlOiBib29sZWFuID0gdHJ1ZTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSBjb21wb25lbnQgY2FuIGhhdmUgbW9yZSB0aGFuIG9uZSBpdGVtIGV4cGFuZGVkIGF0IHRoZSBzYW1lIHRpbWVcbiAgICovXG4gIEBJbnB1dCgpIG11bHRpcGxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgcmVhZG9ubHkgS2l0U3ZnSWNvblR5cGU6IHR5cGVvZiBLaXRTdmdJY29uVHlwZSA9IEtpdFN2Z0ljb25UeXBlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcm91dGVyOiBSb3V0ZXIsXG4gICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5zZXRFeHBhbmRlZFN0YXRlT25Sb3V0ZXJDaGFuZ2UoKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0RXhwYW5kZWRTdGF0ZSh0aGlzLml0ZW1zLCB0aGlzLnJvdXRlci51cmwpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLmNvbGxhcHNlZD8uY3VycmVudFZhbHVlKSB7XG4gICAgICB0aGlzLmNvbGxhcHNlQWxsKHRoaXMuaXRlbXMpO1xuICAgIH1cbiAgfVxuXG4gIG92ZXJyaWRlIGhhbmRsZUNsaWNrKGl0ZW06IEtpdE5hdmlnYXRpb25NZW51SXRlbSk6IHZvaWQge1xuICAgIGlmKCF0aGlzLm11bHRpcGxlICYmICFpdGVtLmV4cGFuZGVkKSB7XG4gICAgICB0aGlzLmNvbGxhcHNlQWxsKHRoaXMuaXRlbXMpO1xuICAgIH1cblxuICAgIHN1cGVyLmhhbmRsZUNsaWNrKGl0ZW0pO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRFeHBhbmRlZFN0YXRlT25Sb3V0ZXJDaGFuZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5yb3V0ZXIuZXZlbnRzLnBpcGUoXG4gICAgICBmaWx0ZXIoZXZlbnQgPT4gZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKSxcbiAgICAgIHRha2VVbnRpbERlc3Ryb3llZCgpLFxuICAgICkuc3Vic2NyaWJlKCgpID0+IHRoaXMuc2V0RXhwYW5kZWRTdGF0ZSh0aGlzLml0ZW1zLCB0aGlzLnJvdXRlci51cmwpKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RXhwYW5kZWRTdGF0ZShpdGVtczogS2l0TmF2aWdhdGlvbk1lbnVJdGVtW10sIHVybDogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuY29sbGFwc2VkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaXRlbXMuZm9yRWFjaChpdGVtID0+IHtcbiAgICAgIGl0ZW0uZXhwYW5kZWQgPSAhIShpdGVtLmxpbmsgJiYgdXJsLnN0YXJ0c1dpdGgoaXRlbS5saW5rKSk7XG4gICAgICBpZiAoaXRlbS5pdGVtcykge1xuICAgICAgICB0aGlzLnNldEV4cGFuZGVkU3RhdGUoaXRlbS5pdGVtcywgdXJsKTtcbiAgICAgICAgaXRlbS5leHBhbmRlZCA9IGl0ZW0uaXRlbXMuc29tZShjaGlsZCA9PiBjaGlsZC5leHBhbmRlZCk7XG4gICAgICB9XG4gICAgfSk7XG4gICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImtpdC1uYXZpZ2F0aW9uLW1lbnVcIlxuICAgICBbY2xhc3MuY29sbGFwc2VkXT1cImNvbGxhcHNlZFwiPlxuICBAZm9yIChpdGVtIG9mIGl0ZW1zOyB0cmFjayBpdGVtKSB7XG4gICAgQGlmIChpdGVtLml0ZW1zPy5sZW5ndGgpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJuYXYtaXRlbVwiXG4gICAgICAgICAgIFtjbGFzcy5leHBhbmRlZF09XCJpdGVtLmV4cGFuZGVkXCJcbiAgICAgICAgICAgKG1vdXNlZW50ZXIpPVwiaGFuZGxlSG92ZXIoaXRlbSwgdHJ1ZSlcIlxuICAgICAgICAgICAobW91c2VsZWF2ZSk9XCJoYW5kbGVIb3ZlcihpdGVtLCBmYWxzZSlcIj5cbiAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgIChtb3VzZWxlYXZlKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiXG4gICAgICAgICAgIChjbGljayk9XCJoYW5kbGVDbGljayhpdGVtKVwiPlxuICAgICAgICAgIEBpZiAoaXRlbS5pY29uKSB7XG4gICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibmF2LWxpbmstaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIml0ZW0uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW0/Lmljb25UeXBlID8/IEtpdFN2Z0ljb25UeXBlLkZJTExcIlxuICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgIH1cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cIm5hdi1saW5rLXRpdGxlXCI+e3sgaXRlbS50aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwibmF2LWxpbmstdG9nZ2xlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9ET1dOXCJcbiAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgIDwvYT5cblxuICAgICAgICBAaWYgKGl0ZW0uZXhwYW5kZWQpIHtcbiAgICAgICAgICA8a2l0LW5hdmlnYXRpb24tbWVudS1zdWJtZW51IGNsYXNzPVwiZGlzcGxheS1ibG9ja1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbQGV4cGFuZENvbGxhcHNlQW5pbWF0aW9uXVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW0AuZGlzYWJsZWRdPVwiIWFuaW1hdGUgPz8gY29sbGFwc2VkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW2NvbGxhcHNlZF09XCJjb2xsYXBzZWRcIlxuICAgICAgICAgID48L2tpdC1uYXZpZ2F0aW9uLW1lbnUtc3VibWVudT5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgfSBAZWxzZSB7XG4gICAgICA8ZGl2IGNsYXNzPVwibmF2LWl0ZW1cIj5cbiAgICAgICAgPGEgY2xhc3M9XCJuYXYtbGlua1wiXG4gICAgICAgICAgIHJvdXRlckxpbmtBY3RpdmU9XCJhY3RpdmVcIlxuICAgICAgICAgICBbcm91dGVyTGlua109XCJpdGVtPy5saW5rXCJcbiAgICAgICAgICAgW3RpdGxlXT1cIml0ZW0udGl0bGVcIj5cbiAgICAgICAgICBAaWYgKGl0ZW0uaWNvbikge1xuICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIm5hdi1saW5rLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJpdGVtLmljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJpdGVtPy5pY29uVHlwZSA/PyBLaXRTdmdJY29uVHlwZS5GSUxMXCJcbiAgICAgICAgICAgID48L2tpdC1zdmctaWNvbj5cbiAgICAgICAgICB9XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJuYXYtbGluay10aXRsZVwiPnt7IGl0ZW0udGl0bGUgfX08L3NwYW4+XG4gICAgICAgIDwvYT5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -3757,7 +3757,7 @@ class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3757
3757
|
}
|
|
3758
3758
|
}
|
|
3759
3759
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3760
|
-
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 <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 @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 @for (subChild of child.items; track subChild) {\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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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: [
|
|
3760
|
+
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 <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 @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 <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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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: [
|
|
3761
3761
|
expandCollapseAnimation,
|
|
3762
3762
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3763
3763
|
}
|
|
@@ -3765,7 +3765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3765
3765
|
type: Component,
|
|
3766
3766
|
args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3767
3767
|
expandCollapseAnimation,
|
|
3768
|
-
], 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 <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 @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 @for (subChild of child.items; track subChild) {\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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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"] }]
|
|
3768
|
+
], 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 <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 @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 <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 </div>\n }\n </div>\n }\n }\n </div>\n</div>\n", styles: [".kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:20px;margin-top:20px}.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)}.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"] }]
|
|
3769
3769
|
}], propDecorators: { item: [{
|
|
3770
3770
|
type: Input
|
|
3771
3771
|
}] } });
|
|
@@ -3783,6 +3783,10 @@ class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3783
3783
|
* Defines whether the component will have an animation when collapsing/expanding the menu
|
|
3784
3784
|
*/
|
|
3785
3785
|
this.animate = true;
|
|
3786
|
+
/**
|
|
3787
|
+
* Defines whether the component can have more than one item expanded at the same time
|
|
3788
|
+
*/
|
|
3789
|
+
this.multiple = false;
|
|
3786
3790
|
this.KitSvgIconType = KitSvgIconType;
|
|
3787
3791
|
this.setExpandedStateOnRouterChange();
|
|
3788
3792
|
}
|
|
@@ -3794,6 +3798,12 @@ class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3794
3798
|
this.collapseAll(this.items);
|
|
3795
3799
|
}
|
|
3796
3800
|
}
|
|
3801
|
+
handleClick(item) {
|
|
3802
|
+
if (!this.multiple && !item.expanded) {
|
|
3803
|
+
this.collapseAll(this.items);
|
|
3804
|
+
}
|
|
3805
|
+
super.handleClick(item);
|
|
3806
|
+
}
|
|
3797
3807
|
setExpandedStateOnRouterChange() {
|
|
3798
3808
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.setExpandedState(this.items, this.router.url));
|
|
3799
3809
|
}
|
|
@@ -3811,7 +3821,7 @@ class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
|
3811
3821
|
this.changeDetectorRef.markForCheck();
|
|
3812
3822
|
}
|
|
3813
3823
|
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 }); }
|
|
3814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, 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 <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</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{position:relative}.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.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:400;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: [
|
|
3824
|
+
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 <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</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{position:relative}.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.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:400;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: [
|
|
3815
3825
|
expandCollapseAnimation,
|
|
3816
3826
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3817
3827
|
}
|
|
@@ -3824,6 +3834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3824
3834
|
type: Input
|
|
3825
3835
|
}], animate: [{
|
|
3826
3836
|
type: Input
|
|
3837
|
+
}], multiple: [{
|
|
3838
|
+
type: Input
|
|
3827
3839
|
}] } });
|
|
3828
3840
|
|
|
3829
3841
|
class KitNavigationMenuSubmenuModule {
|