@indigina/ui-kit 1.1.34 → 1.1.35
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.
|
@@ -20,6 +20,10 @@ export class KitNavigationMenuComponent {
|
|
|
20
20
|
* Defines whether the component will have an animation when collapsing/expanding the menu
|
|
21
21
|
*/
|
|
22
22
|
this.animate = true;
|
|
23
|
+
/**
|
|
24
|
+
* Defines whether menu will be collapsed
|
|
25
|
+
*/
|
|
26
|
+
this.collapsed = false;
|
|
23
27
|
this.KitSvgIcon = KitSvgIcon;
|
|
24
28
|
this.PanelBarExpandMode = PanelBarExpandMode;
|
|
25
29
|
this.setExpandedStateOnRouterChange();
|
|
@@ -40,14 +44,16 @@ export class KitNavigationMenuComponent {
|
|
|
40
44
|
});
|
|
41
45
|
}
|
|
42
46
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n @if (item.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ child.title }}</span>\n @if (child.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu{width:100%;overflow:hidden;transition:width .3s}.kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);flex-shrink:0}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400;transition:opacity .3s ease}.kit-navigation-menu .menu-item .toggle-icon{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0;transition:rotate .3s ease}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .toggle-icon{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:10px 6px 10px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed{width:88px}.kit-navigation-menu.collapsed .menu-item .item-text{width:0;opacity:0}.kit-navigation-menu.collapsed .menu-item .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .menu-item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu.collapsed ::ng-deep .k-panelbar-group{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }, { kind: "component", type: i3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "directive", type: i3.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { kind: "component", type: i4.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
44
48
|
}
|
|
45
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, decorators: [{
|
|
46
50
|
type: Component,
|
|
47
|
-
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [
|
|
51
|
+
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n @if (item.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ child.title }}</span>\n @if (child.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu{width:100%;overflow:hidden;transition:width .3s}.kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);flex-shrink:0}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400;transition:opacity .3s ease}.kit-navigation-menu .menu-item .toggle-icon{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0;transition:rotate .3s ease}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .toggle-icon{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:10px 6px 10px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed{width:88px}.kit-navigation-menu.collapsed .menu-item .item-text{width:0;opacity:0}.kit-navigation-menu.collapsed .menu-item .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .menu-item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu.collapsed ::ng-deep .k-panelbar-group{display:none}\n"] }]
|
|
48
52
|
}], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
|
|
49
53
|
type: Input
|
|
50
54
|
}], animate: [{
|
|
51
55
|
type: Input
|
|
56
|
+
}], collapsed: [{
|
|
57
|
+
type: Input
|
|
52
58
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
59
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2tpdC1uYXZpZ2F0aW9uLW1lbnUva2l0LW5hdmlnYXRpb24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBVSxNQUFNLGlCQUFpQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDOUIsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7OztBQVFoRSxNQUFNLE9BQU8sMEJBQTBCO0lBbUJyQyxZQUNVLE1BQWM7UUFBZCxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBbkJ4Qjs7V0FFRztRQUNNLFVBQUssR0FBNEIsRUFBRSxDQUFDO1FBRTdDOztXQUVHO1FBQ00sWUFBTyxHQUFZLElBQUksQ0FBQztRQUVqQzs7V0FFRztRQUNNLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFFM0IsZUFBVSxHQUFzQixVQUFVLENBQUM7UUFDM0MsdUJBQWtCLEdBQThCLGtCQUFrQixDQUFDO1FBSzFFLElBQUksQ0FBQyw4QkFBOEIsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRU8sOEJBQThCO1FBQ3BDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDckIsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxZQUFZLGFBQWEsQ0FBQyxFQUMvQyxrQkFBa0IsRUFBRSxDQUNyQixDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDeEUsQ0FBQztJQUVPLGdCQUFnQixDQUFDLEtBQThCLEVBQUUsR0FBVztRQUNsRSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ25CLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxHQUFHLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1lBQzNELElBQUksSUFBSSxDQUFDLEtBQUssRUFBRTtnQkFDZCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsQ0FBQztnQkFDdkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUMxRDtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0E1Q1UsMEJBQTBCO2tHQUExQiwwQkFBMEIsbUlDZHZDLHdpRkEyREE7OzJGRDdDYSwwQkFBMEI7a0JBTnRDLFNBQVM7K0JBQ0UscUJBQXFCLG1CQUdkLHVCQUF1QixDQUFDLE1BQU07MkVBTXRDLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLaXROYXZpZ2F0aW9uTWVudUl0ZW0gfSBmcm9tICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUubW9kZWwnO1xuaW1wb3J0IHsgS2l0U3ZnSWNvbiB9IGZyb20gJy4uL2tpdC1zdmctaWNvbi9raXQtc3ZnLWljb24uY29uc3QnO1xuaW1wb3J0IHsgTmF2aWdhdGlvbkVuZCwgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IFBhbmVsQmFyRXhwYW5kTW9kZSB9IGZyb20gJ0Bwcm9ncmVzcy9rZW5kby1hbmd1bGFyLWxheW91dCc7XG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAna2l0LW5hdmlnYXRpb24tbWVudScsXG4gIHRlbXBsYXRlVXJsOiAnLi9raXQtbmF2aWdhdGlvbi1tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2tpdC1uYXZpZ2F0aW9uLW1lbnUuY29tcG9uZW50LnNjc3MnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgS2l0TmF2aWdhdGlvbk1lbnVDb21wb25lbnQge1xuICAvKipcbiAgICogQW4gaXRlbXMgbGlzdCB3aGljaCBpcyBnb2luZyB0byBiZSByZW5kZXJlZCBhcyBtZW51IGl0ZW1zXG4gICAqL1xuICBASW5wdXQoKSBpdGVtczogS2l0TmF2aWdhdGlvbk1lbnVJdGVtW10gPSBbXTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSBjb21wb25lbnQgd2lsbCBoYXZlIGFuIGFuaW1hdGlvbiB3aGVuIGNvbGxhcHNpbmcvZXhwYW5kaW5nIHRoZSBtZW51XG4gICAqL1xuICBASW5wdXQoKSBhbmltYXRlOiBib29sZWFuID0gdHJ1ZTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIG1lbnUgd2lsbCBiZSBjb2xsYXBzZWRcbiAgICovXG4gIEBJbnB1dCgpIGNvbGxhcHNlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIHJlYWRvbmx5IEtpdFN2Z0ljb246IHR5cGVvZiBLaXRTdmdJY29uID0gS2l0U3ZnSWNvbjtcbiAgcmVhZG9ubHkgUGFuZWxCYXJFeHBhbmRNb2RlOiB0eXBlb2YgUGFuZWxCYXJFeHBhbmRNb2RlID0gUGFuZWxCYXJFeHBhbmRNb2RlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcm91dGVyOiBSb3V0ZXIsXG4gICkge1xuICAgIHRoaXMuc2V0RXhwYW5kZWRTdGF0ZU9uUm91dGVyQ2hhbmdlKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNldEV4cGFuZGVkU3RhdGUodGhpcy5pdGVtcywgdGhpcy5yb3V0ZXIudXJsKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RXhwYW5kZWRTdGF0ZU9uUm91dGVyQ2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMucm91dGVyLmV2ZW50cy5waXBlKFxuICAgICAgZmlsdGVyKGV2ZW50ID0+IGV2ZW50IGluc3RhbmNlb2YgTmF2aWdhdGlvbkVuZCksXG4gICAgICB0YWtlVW50aWxEZXN0cm95ZWQoKSxcbiAgICApLnN1YnNjcmliZSgoKSA9PiB0aGlzLnNldEV4cGFuZGVkU3RhdGUodGhpcy5pdGVtcywgdGhpcy5yb3V0ZXIudXJsKSk7XG4gIH1cblxuICBwcml2YXRlIHNldEV4cGFuZGVkU3RhdGUoaXRlbXM6IEtpdE5hdmlnYXRpb25NZW51SXRlbVtdLCB1cmw6IHN0cmluZyk6IHZvaWQge1xuICAgIGl0ZW1zLmZvckVhY2goaXRlbSA9PiB7XG4gICAgICBpdGVtLmV4cGFuZGVkID0gISEoaXRlbS5saW5rICYmIHVybC5zdGFydHNXaXRoKGl0ZW0ubGluaykpO1xuICAgICAgaWYgKGl0ZW0uaXRlbXMpIHtcbiAgICAgICAgdGhpcy5zZXRFeHBhbmRlZFN0YXRlKGl0ZW0uaXRlbXMsIHVybCk7XG4gICAgICAgIGl0ZW0uZXhwYW5kZWQgPSBpdGVtLml0ZW1zLnNvbWUoY2hpbGQgPT4gY2hpbGQuZXhwYW5kZWQpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwia2l0LW5hdmlnYXRpb24tbWVudVwiXG4gICAgIFtjbGFzcy5jb2xsYXBzZWRdPVwiY29sbGFwc2VkXCI+XG4gIDxrZW5kby1wYW5lbGJhciBbZXhwYW5kTW9kZV09XCJQYW5lbEJhckV4cGFuZE1vZGUuU2luZ2xlXCJcbiAgICAgICAgICAgICAgICAgIFthbmltYXRlXT1cImFuaW1hdGVcIj5cbiAgICBAZm9yIChpdGVtIG9mIGl0ZW1zOyB0cmFjayBpdGVtKSB7XG4gICAgICA8a2VuZG8tcGFuZWxiYXItaXRlbSBjbGFzcz1cIm1lbnUtaXRlbVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW0uY3NzQ2xhc3NcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgW2NsYXNzLmhhcy1jaGlsZHJlbl09XCJpdGVtLml0ZW1zPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgW2V4cGFuZGVkXT1cIml0ZW0uZXhwYW5kZWRcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiaXRlbS5saW5rXCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBrZW5kb1BhbmVsQmFySXRlbVRpdGxlPlxuICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJpdGVtLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiaXRlbS5pY29uXCJcbiAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJpdGVtLXRleHRcIj57eyBpdGVtLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgIEBpZiAoaXRlbS5pdGVtcz8ubGVuZ3RoKSB7XG4gICAgICAgICAgICA8a2l0LXN2Zy1pY29uIGNsYXNzPVwidG9nZ2xlLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJLaXRTdmdJY29uLkNIRVZST05fRE9XTlwiXG4gICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgfVxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICAgIEBmb3IgKGNoaWxkIG9mIGl0ZW0uaXRlbXM7IHRyYWNrIGNoaWxkKSB7XG4gICAgICAgICAgPGtlbmRvLXBhbmVsYmFyLWl0ZW0gY2xhc3M9XCJtZW51LWNoaWxkLWl0ZW1cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJvdXRlckxpbmtBY3RpdmU9XCJhY3RpdmVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cImNoaWxkLmNzc0NsYXNzXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3MuaGFzLWNoaWxkcmVuXT1cImNoaWxkLml0ZW1zPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtleHBhbmRlZF09XCJjaGlsZC5leHBhbmRlZFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW3JvdXRlckxpbmtdPVwiY2hpbGQubGlua1wiPlxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlIGtlbmRvUGFuZWxCYXJJdGVtVGl0bGU+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiaXRlbS10ZXh0XCI+e3sgY2hpbGQudGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgICAgIEBpZiAoY2hpbGQuaXRlbXM/Lmxlbmd0aCkge1xuICAgICAgICAgICAgICAgIDxraXQtc3ZnLWljb24gY2xhc3M9XCJ0b2dnbGUtaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJLaXRTdmdJY29uLkNIRVZST05fRE9XTlwiXG4gICAgICAgICAgICAgICAgPjwva2l0LXN2Zy1pY29uPlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICAgICAgICBAZm9yIChzdWJDaGlsZCBvZiBjaGlsZC5pdGVtczsgdHJhY2sgc3ViQ2hpbGQpIHtcbiAgICAgICAgICAgICAgPGtlbmRvLXBhbmVsYmFyLWl0ZW0gY2xhc3M9XCJtZW51LWxpbmtcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwic3ViQ2hpbGQuY3NzQ2xhc3NcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbcm91dGVyTGlua109XCJzdWJDaGlsZC5saW5rXCI+XG4gICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlIGtlbmRvUGFuZWxCYXJJdGVtVGl0bGU+XG4gICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIml0ZW0tdGV4dFwiPnt7IHN1YkNoaWxkLnRpdGxlIH19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgPGtpdC1zdmctaWNvbiBjbGFzcz1cIml0ZW0taWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpY29uXT1cIktpdFN2Z0ljb24uQ0hFVlJPTl9SSUdIVFwiXG4gICAgICAgICAgICAgICAgICA+PC9raXQtc3ZnLWljb24+XG4gICAgICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgICAgPC9rZW5kby1wYW5lbGJhci1pdGVtPlxuICAgICAgICAgICAgfVxuICAgICAgICAgIDwva2VuZG8tcGFuZWxiYXItaXRlbT5cbiAgICAgICAgfVxuICAgICAgPC9rZW5kby1wYW5lbGJhci1pdGVtPlxuICAgIH1cbiAgPC9rZW5kby1wYW5lbGJhcj5cbjwvZGl2PlxuXG4iXX0=
|
|
@@ -3686,6 +3686,10 @@ class KitNavigationMenuComponent {
|
|
|
3686
3686
|
* Defines whether the component will have an animation when collapsing/expanding the menu
|
|
3687
3687
|
*/
|
|
3688
3688
|
this.animate = true;
|
|
3689
|
+
/**
|
|
3690
|
+
* Defines whether menu will be collapsed
|
|
3691
|
+
*/
|
|
3692
|
+
this.collapsed = false;
|
|
3689
3693
|
this.KitSvgIcon = KitSvgIcon;
|
|
3690
3694
|
this.PanelBarExpandMode = PanelBarExpandMode;
|
|
3691
3695
|
this.setExpandedStateOnRouterChange();
|
|
@@ -3706,15 +3710,17 @@ class KitNavigationMenuComponent {
|
|
|
3706
3710
|
});
|
|
3707
3711
|
}
|
|
3708
3712
|
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 }); }
|
|
3709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [
|
|
3713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: { items: "items", animate: "animate", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n @if (item.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ child.title }}</span>\n @if (child.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu{width:100%;overflow:hidden;transition:width .3s}.kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);flex-shrink:0}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400;transition:opacity .3s ease}.kit-navigation-menu .menu-item .toggle-icon{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0;transition:rotate .3s ease}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .toggle-icon{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:10px 6px 10px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed{width:88px}.kit-navigation-menu.collapsed .menu-item .item-text{width:0;opacity:0}.kit-navigation-menu.collapsed .menu-item .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .menu-item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu.collapsed ::ng-deep .k-panelbar-group{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }, { kind: "component", type: i2$3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "directive", type: i2$3.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3710
3714
|
}
|
|
3711
3715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: KitNavigationMenuComponent, decorators: [{
|
|
3712
3716
|
type: Component,
|
|
3713
|
-
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [
|
|
3717
|
+
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed\">\n <kendo-panelbar [expandMode]=\"PanelBarExpandMode.Single\"\n [animate]=\"animate\">\n @for (item of items; track item) {\n <kendo-panelbar-item class=\"menu-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"item.cssClass\"\n [class.has-children]=\"item.items?.length\"\n [expanded]=\"item.expanded\"\n [routerLink]=\"item.link\">\n <ng-template kendoPanelBarItemTitle>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n <span class=\"item-text\">{{ item.title }}</span>\n @if (item.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (child of item.items; track child) {\n <kendo-panelbar-item class=\"menu-child-item\"\n routerLinkActive=\"active\"\n [ngClass]=\"child.cssClass\"\n [class.has-children]=\"child.items?.length\"\n [expanded]=\"child.expanded\"\n [routerLink]=\"child.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ child.title }}</span>\n @if (child.items?.length) {\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n }\n </ng-template>\n\n @for (subChild of child.items; track subChild) {\n <kendo-panelbar-item class=\"menu-link\"\n routerLinkActive=\"active\"\n [ngClass]=\"subChild.cssClass\"\n [routerLink]=\"subChild.link\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"item-text\">{{ subChild.title }}</span>\n <kit-svg-icon class=\"item-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n </ng-template>\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar-item>\n }\n </kendo-panelbar>\n</div>\n\n", styles: [".kit-navigation-menu{width:100%;overflow:hidden;transition:width .3s}.kit-navigation-menu .k-panelbar{display:flex;flex-direction:column;gap:20px;border:none;background:none}.kit-navigation-menu ::ng-deep .k-panelbar-group{display:flex;flex-direction:column;gap:20px;margin-top:20px}.kit-navigation-menu ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-item{border:none}.kit-navigation-menu .menu-item .item-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);flex-shrink:0}.kit-navigation-menu .menu-item .item-text{color:var(--ui-kit-color-white);font-size:14px;font-weight:400;transition:opacity .3s ease}.kit-navigation-menu .menu-item .toggle-icon{width:16px;height:16px;stroke:var(--ui-kit-color-main);fill:none;flex-shrink:0;transition:rotate .3s ease}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link{background:var(--ui-kit-color-selected)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.k-expanded ::ng-deep>.k-link .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item.active:not(.has-children) ::ng-deep>.k-link .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu .menu-item ::ng-deep .k-link{padding:10px 24px;gap:8px;min-height:40px;color:var(--ui-kit-color-white);border-radius:8px;background:none;cursor:pointer;transition:none}.kit-navigation-menu .menu-item ::ng-deep .k-link.k-focus{box-shadow:none}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-item ::ng-deep .k-link:hover .toggle-icon{stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep>.k-link{color:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.k-expanded ::ng-deep .toggle-icon{transform:rotate(180deg)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-child-item.active:not(.has-children) ::ng-deep .k-link:hover .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-child-item ::ng-deep .k-panelbar-toggle{display:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-selected:hover{background:none}.kit-navigation-menu .menu-child-item ::ng-deep .k-link:hover{color:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link .item-icon{stroke:var(--ui-kit-color-grey-9);fill:none}.kit-navigation-menu .menu-link .item-text{color:var(--ui-kit-color-grey-9)}.kit-navigation-menu .menu-link ::ng-deep .k-link{padding:10px 6px 10px 36px}.kit-navigation-menu .menu-link ::ng-deep .k-link:hover .item-icon{fill:none;stroke:var(--ui-kit-color-hover)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link{background:var(--ui-kit-color-main)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-text{color:var(--ui-kit-color-white)}.kit-navigation-menu .menu-link.active ::ng-deep .k-link .item-icon{stroke:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed{width:88px}.kit-navigation-menu.collapsed .menu-item .item-text{width:0;opacity:0}.kit-navigation-menu.collapsed .menu-item .item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu.collapsed .menu-item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-navigation-menu.collapsed ::ng-deep .k-panelbar-group{display:none}\n"] }]
|
|
3714
3718
|
}], ctorParameters: () => [{ type: i1$6.Router }], propDecorators: { items: [{
|
|
3715
3719
|
type: Input
|
|
3716
3720
|
}], animate: [{
|
|
3717
3721
|
type: Input
|
|
3722
|
+
}], collapsed: [{
|
|
3723
|
+
type: Input
|
|
3718
3724
|
}] } });
|
|
3719
3725
|
|
|
3720
3726
|
class KitNavigationMenuModule {
|