@indigina/ui-kit 1.1.40 → 1.1.41
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-base.component.mjs +42 -0
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component.mjs +33 -0
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.module.mjs +32 -0
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.component.mjs +28 -19
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.model.mjs +1 -1
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.module.mjs +7 -7
- package/esm2022/lib/components/kit-navigation-menu/kit-navigation-menu.util.mjs +20 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/indigina-ui-kit.mjs +142 -23
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-navigation-menu/kit-navigation-menu-base.component.d.ts +15 -0
- package/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component.d.ts +9 -0
- package/lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.module.d.ts +10 -0
- package/lib/components/kit-navigation-menu/kit-navigation-menu.component.d.ts +9 -11
- package/lib/components/kit-navigation-menu/kit-navigation-menu.model.d.ts +2 -1
- package/lib/components/kit-navigation-menu/kit-navigation-menu.module.d.ts +4 -4
- package/lib/components/kit-navigation-menu/kit-navigation-menu.util.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -32,11 +32,11 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
|
32
32
|
import * as i2$2 from '@progress/kendo-angular-upload';
|
|
33
33
|
import { UploadModule } from '@progress/kendo-angular-upload';
|
|
34
34
|
import { HttpClientModule } from '@angular/common/http';
|
|
35
|
-
import
|
|
36
|
-
import { PanelBarExpandMode, PanelBarModule, LayoutModule } from '@progress/kendo-angular-layout';
|
|
35
|
+
import { style, state, animate, transition, trigger } from '@angular/animations';
|
|
37
36
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
38
37
|
import initials from 'initials';
|
|
39
|
-
import
|
|
38
|
+
import * as i2$3 from '@progress/kendo-angular-layout';
|
|
39
|
+
import { LayoutModule } from '@progress/kendo-angular-layout';
|
|
40
40
|
import * as i2$4 from '@progress/kendo-angular-grid';
|
|
41
41
|
import { GridModule } from '@progress/kendo-angular-grid';
|
|
42
42
|
|
|
@@ -3685,9 +3685,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3685
3685
|
}]
|
|
3686
3686
|
}] });
|
|
3687
3687
|
|
|
3688
|
-
|
|
3689
|
-
|
|
3688
|
+
const expandCollapseAnimation = trigger('expandCollapseAnimation', [
|
|
3689
|
+
state('void', style({
|
|
3690
|
+
height: '0',
|
|
3691
|
+
overflow: 'hidden',
|
|
3692
|
+
})),
|
|
3693
|
+
transition(':enter', [
|
|
3694
|
+
animate('0.2s ease-in-out', style({
|
|
3695
|
+
height: '*',
|
|
3696
|
+
overflow: 'hidden',
|
|
3697
|
+
})),
|
|
3698
|
+
]),
|
|
3699
|
+
transition(':leave', [
|
|
3700
|
+
animate('0.2s ease-in-out', style({
|
|
3701
|
+
height: '0',
|
|
3702
|
+
overflow: 'hidden',
|
|
3703
|
+
})),
|
|
3704
|
+
]),
|
|
3705
|
+
]);
|
|
3706
|
+
|
|
3707
|
+
class KitNavigationMenuBaseComponent {
|
|
3708
|
+
constructor() {
|
|
3709
|
+
/**
|
|
3710
|
+
* Defines whether menu will be collapsed
|
|
3711
|
+
*/
|
|
3712
|
+
this.collapsed = false;
|
|
3713
|
+
this.KitSvgIcon = KitSvgIcon;
|
|
3714
|
+
}
|
|
3715
|
+
collapseAll(items) {
|
|
3716
|
+
items.forEach(item => {
|
|
3717
|
+
item.expanded = false;
|
|
3718
|
+
if (item.items?.length) {
|
|
3719
|
+
this.collapseAll(item.items);
|
|
3720
|
+
}
|
|
3721
|
+
});
|
|
3722
|
+
}
|
|
3723
|
+
handleClick(item) {
|
|
3724
|
+
if (!this.collapsed) {
|
|
3725
|
+
item.expanded = !item.expanded;
|
|
3726
|
+
}
|
|
3727
|
+
}
|
|
3728
|
+
handleHover(item, isHovering) {
|
|
3729
|
+
if (this.collapsed) {
|
|
3730
|
+
item.expanded = isHovering;
|
|
3731
|
+
}
|
|
3732
|
+
}
|
|
3733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: KitNavigationMenuBaseComponent, selector: "ng-component", inputs: { collapsed: "collapsed" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3735
|
+
}
|
|
3736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuBaseComponent, decorators: [{
|
|
3737
|
+
type: Component,
|
|
3738
|
+
args: [{
|
|
3739
|
+
template: '',
|
|
3740
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3741
|
+
}]
|
|
3742
|
+
}], propDecorators: { collapsed: [{
|
|
3743
|
+
type: Input
|
|
3744
|
+
}] } });
|
|
3745
|
+
|
|
3746
|
+
class KitNavigationMenuSubmenuComponent extends KitNavigationMenuBaseComponent {
|
|
3747
|
+
constructor() {
|
|
3748
|
+
super(...arguments);
|
|
3749
|
+
this.item = null;
|
|
3750
|
+
}
|
|
3751
|
+
collapseMenu(item) {
|
|
3752
|
+
if (this.collapsed && item) {
|
|
3753
|
+
item.expanded = false;
|
|
3754
|
+
if (item.items) {
|
|
3755
|
+
this.collapseAll(item.items);
|
|
3756
|
+
}
|
|
3757
|
+
}
|
|
3758
|
+
}
|
|
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: [
|
|
3761
|
+
expandCollapseAnimation,
|
|
3762
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3763
|
+
}
|
|
3764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuComponent, decorators: [{
|
|
3765
|
+
type: Component,
|
|
3766
|
+
args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
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"] }]
|
|
3769
|
+
}], propDecorators: { item: [{
|
|
3770
|
+
type: Input
|
|
3771
|
+
}] } });
|
|
3772
|
+
|
|
3773
|
+
class KitNavigationMenuComponent extends KitNavigationMenuBaseComponent {
|
|
3774
|
+
constructor(router, changeDetectorRef) {
|
|
3775
|
+
super();
|
|
3690
3776
|
this.router = router;
|
|
3777
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
3691
3778
|
/**
|
|
3692
3779
|
* An items list which is going to be rendered as menu items
|
|
3693
3780
|
*/
|
|
@@ -3696,21 +3783,24 @@ class KitNavigationMenuComponent {
|
|
|
3696
3783
|
* Defines whether the component will have an animation when collapsing/expanding the menu
|
|
3697
3784
|
*/
|
|
3698
3785
|
this.animate = true;
|
|
3699
|
-
|
|
3700
|
-
* Defines whether menu will be collapsed
|
|
3701
|
-
*/
|
|
3702
|
-
this.collapsed = false;
|
|
3703
|
-
this.KitSvgIcon = KitSvgIcon;
|
|
3704
|
-
this.PanelBarExpandMode = PanelBarExpandMode;
|
|
3786
|
+
this.KitSvgIconType = KitSvgIconType;
|
|
3705
3787
|
this.setExpandedStateOnRouterChange();
|
|
3706
3788
|
}
|
|
3707
3789
|
ngOnInit() {
|
|
3708
3790
|
this.setExpandedState(this.items, this.router.url);
|
|
3709
3791
|
}
|
|
3792
|
+
ngOnChanges(changes) {
|
|
3793
|
+
if (changes.collapsed?.currentValue) {
|
|
3794
|
+
this.collapseAll(this.items);
|
|
3795
|
+
}
|
|
3796
|
+
}
|
|
3710
3797
|
setExpandedStateOnRouterChange() {
|
|
3711
3798
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.setExpandedState(this.items, this.router.url));
|
|
3712
3799
|
}
|
|
3713
3800
|
setExpandedState(items, url) {
|
|
3801
|
+
if (this.collapsed) {
|
|
3802
|
+
return;
|
|
3803
|
+
}
|
|
3714
3804
|
items.forEach(item => {
|
|
3715
3805
|
item.expanded = !!(item.link && url.startsWith(item.link));
|
|
3716
3806
|
if (item.items) {
|
|
@@ -3718,31 +3808,60 @@ class KitNavigationMenuComponent {
|
|
|
3718
3808
|
item.expanded = item.items.some(child => child.expanded);
|
|
3719
3809
|
}
|
|
3720
3810
|
});
|
|
3811
|
+
this.changeDetectorRef.markForCheck();
|
|
3721
3812
|
}
|
|
3722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate",
|
|
3813
|
+
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: [
|
|
3815
|
+
expandCollapseAnimation,
|
|
3816
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3724
3817
|
}
|
|
3725
3818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, decorators: [{
|
|
3726
3819
|
type: Component,
|
|
3727
|
-
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3728
|
-
|
|
3820
|
+
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3821
|
+
expandCollapseAnimation,
|
|
3822
|
+
], 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"] }]
|
|
3823
|
+
}], ctorParameters: () => [{ type: i1$6.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
|
|
3729
3824
|
type: Input
|
|
3730
3825
|
}], animate: [{
|
|
3731
3826
|
type: Input
|
|
3732
|
-
}], collapsed: [{
|
|
3733
|
-
type: Input
|
|
3734
3827
|
}] } });
|
|
3735
3828
|
|
|
3829
|
+
class KitNavigationMenuSubmenuModule {
|
|
3830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3831
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, declarations: [KitNavigationMenuSubmenuComponent], imports: [CommonModule,
|
|
3832
|
+
RouterModule,
|
|
3833
|
+
KitSvgIconModule], exports: [KitNavigationMenuSubmenuComponent] }); }
|
|
3834
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, imports: [CommonModule,
|
|
3835
|
+
RouterModule,
|
|
3836
|
+
KitSvgIconModule] }); }
|
|
3837
|
+
}
|
|
3838
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuSubmenuModule, decorators: [{
|
|
3839
|
+
type: NgModule,
|
|
3840
|
+
args: [{
|
|
3841
|
+
declarations: [
|
|
3842
|
+
KitNavigationMenuSubmenuComponent,
|
|
3843
|
+
],
|
|
3844
|
+
imports: [
|
|
3845
|
+
CommonModule,
|
|
3846
|
+
RouterModule,
|
|
3847
|
+
KitSvgIconModule,
|
|
3848
|
+
],
|
|
3849
|
+
exports: [
|
|
3850
|
+
KitNavigationMenuSubmenuComponent,
|
|
3851
|
+
],
|
|
3852
|
+
}]
|
|
3853
|
+
}] });
|
|
3854
|
+
|
|
3736
3855
|
class KitNavigationMenuModule {
|
|
3737
3856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3738
3857
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, declarations: [KitNavigationMenuComponent], imports: [CommonModule,
|
|
3739
|
-
PanelBarModule,
|
|
3740
3858
|
KitSvgIconModule,
|
|
3741
|
-
RouterModule
|
|
3859
|
+
RouterModule,
|
|
3860
|
+
KitNavigationMenuSubmenuModule], exports: [KitNavigationMenuComponent] }); }
|
|
3742
3861
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, imports: [CommonModule,
|
|
3743
|
-
PanelBarModule,
|
|
3744
3862
|
KitSvgIconModule,
|
|
3745
|
-
RouterModule
|
|
3863
|
+
RouterModule,
|
|
3864
|
+
KitNavigationMenuSubmenuModule] }); }
|
|
3746
3865
|
}
|
|
3747
3866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuModule, decorators: [{
|
|
3748
3867
|
type: NgModule,
|
|
@@ -3752,9 +3871,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
3752
3871
|
],
|
|
3753
3872
|
imports: [
|
|
3754
3873
|
CommonModule,
|
|
3755
|
-
PanelBarModule,
|
|
3756
3874
|
KitSvgIconModule,
|
|
3757
3875
|
RouterModule,
|
|
3876
|
+
KitNavigationMenuSubmenuModule,
|
|
3758
3877
|
],
|
|
3759
3878
|
exports: [
|
|
3760
3879
|
KitNavigationMenuComponent,
|
|
@@ -4852,5 +4971,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
4852
4971
|
* Generated bundle index. Do not edit.
|
|
4853
4972
|
*/
|
|
4854
4973
|
|
|
4855
|
-
export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitGridColumnComponent, KitGridComponent, KitGridModule, KitGridSortDirection, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitProfileMenuComponent, KitProfileMenuModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
|
|
4974
|
+
export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAutocompleteState, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeIconPosition, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownState, KitFileUploadComponent, KitFileUploadModule, KitGridColumnComponent, KitGridComponent, KitGridModule, KitGridSortDirection, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationModule, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillModule, KitPopupComponent, KitPopupDirective, KitPopupModule, KitProfileMenuComponent, KitProfileMenuModule, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipModule, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID };
|
|
4856
4975
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|