@indigina/ui-kit 1.1.300 → 1.1.302
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.
|
@@ -31,7 +31,7 @@ import * as i1$8 from '@progress/kendo-angular-indicators';
|
|
|
31
31
|
import { IndicatorsModule, KENDO_INDICATORS } from '@progress/kendo-angular-indicators';
|
|
32
32
|
import * as i1$9 from '@progress/kendo-angular-upload';
|
|
33
33
|
import { UploadModule } from '@progress/kendo-angular-upload';
|
|
34
|
-
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
34
|
+
import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
35
35
|
import initials from 'initials';
|
|
36
36
|
import * as i1$a from '@progress/kendo-angular-layout';
|
|
37
37
|
import { KENDO_LAYOUT, TileLayoutModule } from '@progress/kendo-angular-layout';
|
|
@@ -3541,7 +3541,7 @@ class KitNavigationMenuSubmenuComponent {
|
|
|
3541
3541
|
return `${location?.origin}/` === url;
|
|
3542
3542
|
}
|
|
3543
3543
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitNavigationMenuSubmenuComponent, isStandalone: true, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @if (isAbsoluteLink(child.link)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [href]=\"child.link\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @if (isAbsoluteLink(subChild.link)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [href]=\"subChild.link\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\">\n {{ subChild.title }}\n </a> \n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: [
|
|
3544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitNavigationMenuSubmenuComponent, isStandalone: true, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @if (isAbsoluteLink(child.link)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"child.link\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @if (isAbsoluteLink(subChild.link)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChild.link\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\">\n {{ subChild.title }}\n </a> \n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: [
|
|
3545
3545
|
expandCollapseAnimation('height'),
|
|
3546
3546
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3547
3547
|
}
|
|
@@ -3552,7 +3552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
3552
3552
|
], imports: [
|
|
3553
3553
|
RouterModule,
|
|
3554
3554
|
KitSvgIconComponent,
|
|
3555
|
-
], template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @if (isAbsoluteLink(child.link)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [href]=\"child.link\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @if (isAbsoluteLink(subChild.link)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [href]=\"subChild.link\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\">\n {{ subChild.title }}\n </a> \n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"] }]
|
|
3555
|
+
], template: "<div class=\"kit-navigation-menu-submenu\">\n <div class=\"nav-logo\">\n <a class=\"nav-logo-link\"\n [routerLink]=\"rootPath\"\n (click)=\"logoClicked.emit()\">\n @if (logoPath) {\n <div class=\"logo-wrapper\">\n <img [src]=\"logoPath\" alt=\"Logo\"/>\n </div>\n } @else {\n <kit-svg-icon class=\"seko-icon\"\n [icon]=\"KitSvgIcon.SEKO\"\n ></kit-svg-icon>\n <kit-svg-icon class=\"seko-360-icon\"\n [icon]=\"KitSvgIcon.SEKO_360\"\n ></kit-svg-icon>\n }\n </a>\n </div>\n @if (appsMenuItems) {\n <div class=\"apps-menu\">\n @for (item of appsMenuItems; track item) {\n <a class=\"app-link\"\n [class.active]=\"isAppItemActive(item.url)\"\n [href]=\"item.url\">\n <span class=\"app-link-btn\">\n <kit-svg-icon class=\"app-link-icon\"\n [icon]=\"item.name.toLowerCase()\"\n ></kit-svg-icon>\n </span>\n <span class=\"app-link-title\">{{ item.name }}</span>\n </a>\n }\n </div>\n } @else {\n <div class=\"main-menu\">\n <div class=\"nav-title\">{{ menuItem?.title }}</div>\n <div class=\"nav-list\">\n @for (child of menuItem?.items; track child) {\n @if (!child.items?.length) {\n @if (child.link) {\n @if (isAbsoluteLink(child.link)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"child.link\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"child.link\">\n {{ child.title }}\n </a>\n }\n }\n }\n\n @if (child.items?.length) {\n <a class=\"nav-link\"\n [class.expanded]=\"child.expanded\"\n (click)=\"handleClick(child)\">\n {{ child.title }}\n <kit-svg-icon class=\"toggle-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n ></kit-svg-icon>\n </a>\n\n @if (child?.expanded) {\n <div @heightExpandCollapseAnimation\n class=\"nav-list\">\n @for (subChild of child.items; track subChild) {\n @if (subChild.link) {\n @if (isAbsoluteLink(subChild.link)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChild.link\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChild.link\">\n {{ subChild.title }}\n </a> \n }\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.kit-navigation-menu-submenu .nav-logo-link{display:flex;align-items:center;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.active{pointer-events:none}.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active{pointer-events:none}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"] }]
|
|
3556
3556
|
}], propDecorators: { menuItem: [{
|
|
3557
3557
|
type: Input
|
|
3558
3558
|
}], appsMenuItems: [{
|
|
@@ -3688,7 +3688,7 @@ class KitNavigationMenuComponent {
|
|
|
3688
3688
|
this.kitNavigationMenuService.setSelectedState(!!this.selectedItem()?.items, !!this.selectedAppsItems());
|
|
3689
3689
|
}
|
|
3690
3690
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3691
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitNavigationMenuComponent, isStandalone: true, selector: "kit-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed()\">\n <div class=\"main-panel\">\n @if (appsMenuItems().length > 1) {\n <button class=\"app-btn\"\n [class.active]=\"selectedAppsItems() && !collapsed()\"\n (click)=\"onAppsMenuButtonClick()\">\n <kit-svg-icon class=\"app-btn-icon\"\n [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n ></kit-svg-icon>\n </button>\n }\n <div class=\"nav-wrap\">\n <div class=\"nav-list\">\n @for (item of menuItems(); track $index) {\n @if (item.items?.length) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n @if (item.link) {\n @if (isAbsoluteLink(item.link)) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [href]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n [routerLink]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n\n @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n <kit-navigation-menu-submenu class=\"sub-panel\"\n [@widthExpandCollapseAnimation]\n [menuItem]=\"selectedItem()\"\n [appsMenuItems]=\"selectedAppsItems()\"\n [logoPath]=\"logoPath\"\n (logoClicked)=\"handleLogoClick()\"\n ></kit-navigation-menu-submenu>\n }\n\n <ng-template #linkIconTemplate let-item>\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.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-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
3691
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitNavigationMenuComponent, isStandalone: true, selector: "kit-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed()\">\n <div class=\"main-panel\">\n @if (appsMenuItems().length > 1) {\n <button class=\"app-btn\"\n [class.active]=\"selectedAppsItems() && !collapsed()\"\n (click)=\"onAppsMenuButtonClick()\">\n <kit-svg-icon class=\"app-btn-icon\"\n [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n ></kit-svg-icon>\n </button>\n }\n <div class=\"nav-wrap\">\n <div class=\"nav-list\">\n @for (item of menuItems(); track $index) {\n @if (item.items?.length) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n @if (item.link) {\n @if (isAbsoluteLink(item.link)) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n target=\"_blank\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [href]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n [routerLink]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n\n @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n <kit-navigation-menu-submenu class=\"sub-panel\"\n [@widthExpandCollapseAnimation]\n [menuItem]=\"selectedItem()\"\n [appsMenuItems]=\"selectedAppsItems()\"\n [logoPath]=\"logoPath\"\n (logoClicked)=\"handleLogoClick()\"\n ></kit-navigation-menu-submenu>\n }\n\n <ng-template #linkIconTemplate let-item>\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.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-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
3692
3692
|
expandCollapseAnimation('width'),
|
|
3693
3693
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3694
3694
|
}
|
|
@@ -3703,7 +3703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
3703
3703
|
KitTooltipDirective,
|
|
3704
3704
|
NgClass,
|
|
3705
3705
|
NgTemplateOutlet,
|
|
3706
|
-
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed()\">\n <div class=\"main-panel\">\n @if (appsMenuItems().length > 1) {\n <button class=\"app-btn\"\n [class.active]=\"selectedAppsItems() && !collapsed()\"\n (click)=\"onAppsMenuButtonClick()\">\n <kit-svg-icon class=\"app-btn-icon\"\n [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n ></kit-svg-icon>\n </button>\n }\n <div class=\"nav-wrap\">\n <div class=\"nav-list\">\n @for (item of menuItems(); track $index) {\n @if (item.items?.length) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n @if (item.link) {\n @if (isAbsoluteLink(item.link)) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [href]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n [routerLink]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n\n @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n <kit-navigation-menu-submenu class=\"sub-panel\"\n [@widthExpandCollapseAnimation]\n [menuItem]=\"selectedItem()\"\n [appsMenuItems]=\"selectedAppsItems()\"\n [logoPath]=\"logoPath\"\n (logoClicked)=\"handleLogoClick()\"\n ></kit-navigation-menu-submenu>\n }\n\n <ng-template #linkIconTemplate let-item>\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.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-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
3706
|
+
], template: "<div class=\"kit-navigation-menu\"\n [class.collapsed]=\"collapsed()\">\n <div class=\"main-panel\">\n @if (appsMenuItems().length > 1) {\n <button class=\"app-btn\"\n [class.active]=\"selectedAppsItems() && !collapsed()\"\n (click)=\"onAppsMenuButtonClick()\">\n <kit-svg-icon class=\"app-btn-icon\"\n [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n ></kit-svg-icon>\n </button>\n }\n <div class=\"nav-wrap\">\n <div class=\"nav-list\">\n @for (item of menuItems(); track $index) {\n @if (item.items?.length) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n @if (item.link) {\n @if (isAbsoluteLink(item.link)) {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n target=\"_blank\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [href]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n } @else {\n <a class=\"nav-link\"\n kitTooltip\n kitTooltipFilter=\".nav-link\"\n [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n [title]=\"item.title\"\n [class.active]=\"item.active\"\n [routerLink]=\"item.link\"\n (click)=\"handleClick(item)\">\n @if (item.icon) {\n <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n ></ng-container>\n }\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n\n @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n <kit-navigation-menu-submenu class=\"sub-panel\"\n [@widthExpandCollapseAnimation]\n [menuItem]=\"selectedItem()\"\n [appsMenuItems]=\"selectedAppsItems()\"\n [logoPath]=\"logoPath\"\n (logoClicked)=\"handleLogoClick()\"\n ></kit-navigation-menu-submenu>\n }\n\n <ng-template #linkIconTemplate let-item>\n <kit-svg-icon class=\"nav-link-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:24px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:22px}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-wrap{overflow:auto;scrollbar-width:none}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.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-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
|
|
3707
3707
|
}], ctorParameters: () => [], propDecorators: { logoPath: [{
|
|
3708
3708
|
type: Input
|
|
3709
3709
|
}] } });
|
|
@@ -9425,19 +9425,35 @@ class KitMobileMenuComponent {
|
|
|
9425
9425
|
this.navListFooter = contentChild('navListFooter', ...(ngDevMode ? [{ debugName: "navListFooter" }] : []));
|
|
9426
9426
|
this.kitSvgIcon = KitSvgIcon;
|
|
9427
9427
|
this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
|
|
9428
|
+
this.displayedItems = combineLatest([
|
|
9429
|
+
this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
|
|
9430
|
+
toObservable(this.kitMobileMenuItems),
|
|
9431
|
+
]).pipe(tap(([permissions]) => !Object.keys(permissions).length && this.store.dispatch(new FetchUserPermissions())), map(([permissions]) => this.filterMenuItemsByPermissions(permissions)));
|
|
9428
9432
|
}
|
|
9429
9433
|
setSelectedItem(item) {
|
|
9430
9434
|
this.store.dispatch(new SetSelectedMobileMenuItem(item));
|
|
9431
9435
|
}
|
|
9436
|
+
filterMenuItemsByPermissions(permissions) {
|
|
9437
|
+
if (!Object.keys(permissions).length) {
|
|
9438
|
+
return [];
|
|
9439
|
+
}
|
|
9440
|
+
return this.kitMobileMenuItems()
|
|
9441
|
+
.map(item => ({
|
|
9442
|
+
...item,
|
|
9443
|
+
links: item.links.filter(link => !link.permissions || kitHasPermission(link.permissions, permissions)),
|
|
9444
|
+
}))
|
|
9445
|
+
.filter(item => item.links.length > 0);
|
|
9446
|
+
}
|
|
9432
9447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitMobileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitMobileMenuComponent, isStandalone: true, selector: "kit-mobile-menu", inputs: { kitMobileMenuItems: { classPropertyName: "kitMobileMenuItems", publicName: "kitMobileMenuItems", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "categoryItem", first: true, predicate: ["categoryItem"], descendants: true, isSignal: true }, { propertyName: "linkItem", first: true, predicate: ["linkItem"], descendants: true, isSignal: true }, { propertyName: "navListFooter", first: true, predicate: ["navListFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of
|
|
9448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitMobileMenuComponent, isStandalone: true, selector: "kit-mobile-menu", inputs: { kitMobileMenuItems: { classPropertyName: "kitMobileMenuItems", publicName: "kitMobileMenuItems", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "categoryItem", first: true, predicate: ["categoryItem"], descendants: true, isSignal: true }, { propertyName: "linkItem", first: true, predicate: ["linkItem"], descendants: true, isSignal: true }, { propertyName: "navListFooter", first: true, predicate: ["navListFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of displayedItems | async; track item.key) {\n <div class=\"mobile-menu-category-item-wrapper\"\n (click)=\"setSelectedItem(item)\">\n <ng-container *ngTemplateOutlet=\"categoryItem(); context: { $implicit: item }\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"mobile-menu-nav-list\">\n @for (item of selectedItem()?.links; track item) {\n <ng-container *ngTemplateOutlet=\"linkItem(); context: { $implicit: item, key: selectedItem()?.key }\" />\n }\n </div>\n\n <div class=\"mobile-menu-nav-list-footer\">\n <ng-container *ngTemplateOutlet=\"navListFooter(); context: { key: selectedItem()?.key }\" />\n </div>\n }\n</div>\n", styles: [".mobile-menu-category-list{display:grid;gap:25px;grid-template-columns:1fr 1fr;justify-content:center}.mobile-menu-category-item-wrapper{display:flex;flex-direction:column}.mobile-menu-nav-list{border:1px solid var(--ui-kit-color-grey-11);border-radius:15px;padding:25px;background-color:var(--ui-kit-color-white)}.mobile-menu-nav-list-footer{position:absolute;bottom:0;margin:25px 0;width:calc(100% - 50px)}.mobile-menu.dark .mobile-menu-nav-list{background-color:var(--ui-kit-color-navy)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9434
9449
|
}
|
|
9435
9450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitMobileMenuComponent, decorators: [{
|
|
9436
9451
|
type: Component,
|
|
9437
9452
|
args: [{ selector: 'kit-mobile-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
9438
9453
|
NgTemplateOutlet,
|
|
9439
9454
|
NgClass,
|
|
9440
|
-
|
|
9455
|
+
AsyncPipe,
|
|
9456
|
+
], template: "<div class=\"mobile-menu\"\n [ngClass]=\"theme()\">\n @if (!selectedItem()) {\n <div class=\"mobile-menu-category-list\">\n @for (item of displayedItems | async; track item.key) {\n <div class=\"mobile-menu-category-item-wrapper\"\n (click)=\"setSelectedItem(item)\">\n <ng-container *ngTemplateOutlet=\"categoryItem(); context: { $implicit: item }\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"mobile-menu-nav-list\">\n @for (item of selectedItem()?.links; track item) {\n <ng-container *ngTemplateOutlet=\"linkItem(); context: { $implicit: item, key: selectedItem()?.key }\" />\n }\n </div>\n\n <div class=\"mobile-menu-nav-list-footer\">\n <ng-container *ngTemplateOutlet=\"navListFooter(); context: { key: selectedItem()?.key }\" />\n </div>\n }\n</div>\n", styles: [".mobile-menu-category-list{display:grid;gap:25px;grid-template-columns:1fr 1fr;justify-content:center}.mobile-menu-category-item-wrapper{display:flex;flex-direction:column}.mobile-menu-nav-list{border:1px solid var(--ui-kit-color-grey-11);border-radius:15px;padding:25px;background-color:var(--ui-kit-color-white)}.mobile-menu-nav-list-footer{position:absolute;bottom:0;margin:25px 0;width:calc(100% - 50px)}.mobile-menu.dark .mobile-menu-nav-list{background-color:var(--ui-kit-color-navy)}\n"] }]
|
|
9441
9457
|
}] });
|
|
9442
9458
|
|
|
9443
9459
|
class KitThemeService {
|