@indigina/ui-kit 1.1.583 → 1.1.584
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.
|
@@ -5755,6 +5755,10 @@ const expandCollapseAnimation = (property) => trigger(`${property}ExpandCollapse
|
|
|
5755
5755
|
const isAbsoluteLink = (link) => {
|
|
5756
5756
|
return /^https?:\/\//.test(link);
|
|
5757
5757
|
};
|
|
5758
|
+
const getNavigationMenuItemLink = (item, baseUrls) => {
|
|
5759
|
+
const baseUrl = item.baseUrlKey ? baseUrls[item.baseUrlKey] ?? '' : '';
|
|
5760
|
+
return `${baseUrl}${item.link ?? ''}`;
|
|
5761
|
+
};
|
|
5758
5762
|
|
|
5759
5763
|
class KitNavigationMenuSubmenuComponent {
|
|
5760
5764
|
constructor() {
|
|
@@ -5762,6 +5766,8 @@ class KitNavigationMenuSubmenuComponent {
|
|
|
5762
5766
|
this.menuItem = null;
|
|
5763
5767
|
this.appsMenuItems = null;
|
|
5764
5768
|
this.logoPath = '';
|
|
5769
|
+
this.baseUrls = input({}, /* @ts-ignore */
|
|
5770
|
+
...(ngDevMode ? [{ debugName: "baseUrls" }] : /* istanbul ignore next */ []));
|
|
5765
5771
|
this.logoClicked = new EventEmitter();
|
|
5766
5772
|
this.KitSvgIcon = KitSvgIcon;
|
|
5767
5773
|
this.rootPath = '/';
|
|
@@ -5773,6 +5779,9 @@ class KitNavigationMenuSubmenuComponent {
|
|
|
5773
5779
|
}
|
|
5774
5780
|
item.expanded = !item.expanded;
|
|
5775
5781
|
}
|
|
5782
|
+
getItemLink(item) {
|
|
5783
|
+
return getNavigationMenuItemLink(item, this.baseUrls());
|
|
5784
|
+
}
|
|
5776
5785
|
isAppItemActive(url) {
|
|
5777
5786
|
if (!url) {
|
|
5778
5787
|
return false;
|
|
@@ -5785,7 +5794,7 @@ class KitNavigationMenuSubmenuComponent {
|
|
|
5785
5794
|
return `${location?.origin}/` === url;
|
|
5786
5795
|
}
|
|
5787
5796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5788
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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(
|
|
5797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitNavigationMenuSubmenuComponent, isStandalone: true, selector: "kit-navigation-menu-submenu", inputs: { menuItem: { classPropertyName: "menuItem", publicName: "menuItem", isSignal: false, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: false, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null }, baseUrls: { classPropertyName: "baseUrls", publicName: "baseUrls", isSignal: true, isRequired: false, transformFunction: null } }, 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 @let childLink = getItemLink(child);\n @if (isAbsoluteLink(childLink)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"childLink\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"childLink\"\n [queryParams]=\"child.queryParams\">\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 @let subChildLink = getItemLink(subChild);\n @if (isAbsoluteLink(subChildLink)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChildLink\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChildLink\"\n [queryParams]=\"subChild.queryParams\">\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:var(--ui-kit-color-grey-12);stroke:none}.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{fill: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$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$9.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
|
|
5789
5798
|
expandCollapseAnimation('height'),
|
|
5790
5799
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5791
5800
|
}
|
|
@@ -5796,14 +5805,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
5796
5805
|
], imports: [
|
|
5797
5806
|
RouterModule,
|
|
5798
5807
|
KitSvgIconComponent,
|
|
5799
|
-
], 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(
|
|
5808
|
+
], 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 @let childLink = getItemLink(child);\n @if (isAbsoluteLink(childLink)) {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"childLink\">\n {{ child.title }}\n </a>\n } @else {\n <a class=\"nav-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"childLink\"\n [queryParams]=\"child.queryParams\">\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 @let subChildLink = getItemLink(subChild);\n @if (isAbsoluteLink(subChildLink)) {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n target=\"_blank\"\n [href]=\"subChildLink\">\n {{ subChild.title }}\n </a>\n } @else {\n <a class=\"child-link\"\n routerLinkActive=\"active\"\n [routerLink]=\"subChildLink\"\n [queryParams]=\"subChild.queryParams\">\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:var(--ui-kit-color-grey-12);stroke:none}.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{fill: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"] }]
|
|
5800
5809
|
}], propDecorators: { menuItem: [{
|
|
5801
5810
|
type: Input
|
|
5802
5811
|
}], appsMenuItems: [{
|
|
5803
5812
|
type: Input
|
|
5804
5813
|
}], logoPath: [{
|
|
5805
5814
|
type: Input
|
|
5806
|
-
}], logoClicked: [{
|
|
5815
|
+
}], baseUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrls", required: false }] }], logoClicked: [{
|
|
5807
5816
|
type: Output
|
|
5808
5817
|
}] } });
|
|
5809
5818
|
|
|
@@ -5848,7 +5857,10 @@ class KitNavigationMenuComponent {
|
|
|
5848
5857
|
*/
|
|
5849
5858
|
this.appsMenuItems = input([], /* @ts-ignore */
|
|
5850
5859
|
...(ngDevMode ? [{ debugName: "appsMenuItems" }] : /* istanbul ignore next */ []));
|
|
5851
|
-
this.
|
|
5860
|
+
this.baseUrls = input({}, /* @ts-ignore */
|
|
5861
|
+
...(ngDevMode ? [{ debugName: "baseUrls" }] : /* istanbul ignore next */ []));
|
|
5862
|
+
this.logoPath = input('', /* @ts-ignore */
|
|
5863
|
+
...(ngDevMode ? [{ debugName: "logoPath" }] : /* istanbul ignore next */ []));
|
|
5852
5864
|
this.selectedItem = signal(null, /* @ts-ignore */
|
|
5853
5865
|
...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
5854
5866
|
this.selectedAppsItems = signal(null, /* @ts-ignore */
|
|
@@ -5869,6 +5881,9 @@ class KitNavigationMenuComponent {
|
|
|
5869
5881
|
this.selectedItem.set(item);
|
|
5870
5882
|
this.updateMenuState();
|
|
5871
5883
|
}
|
|
5884
|
+
getItemLink(item) {
|
|
5885
|
+
return getNavigationMenuItemLink(item, this.baseUrls());
|
|
5886
|
+
}
|
|
5872
5887
|
handleLogoClick() {
|
|
5873
5888
|
this.collapseAllItems(this.menuItems());
|
|
5874
5889
|
this.selectedAppsItems.set(null);
|
|
@@ -5973,7 +5988,7 @@ class KitNavigationMenuComponent {
|
|
|
5973
5988
|
return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
|
|
5974
5989
|
}
|
|
5975
5990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5976
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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:
|
|
5991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, baseUrls: { classPropertyName: "baseUrls", publicName: "baseUrls", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: true, 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 @let link = getItemLink(item);\n @if (isAbsoluteLink(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]=\"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]=\"link\"\n [queryParams]=\"item.queryParams\"\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 [baseUrls]=\"baseUrls()\"\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$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath", "baseUrls"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
5977
5992
|
expandCollapseAnimation('width'),
|
|
5978
5993
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5979
5994
|
}
|
|
@@ -5988,10 +6003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
5988
6003
|
KitTooltipDirective,
|
|
5989
6004
|
NgClass,
|
|
5990
6005
|
NgTemplateOutlet,
|
|
5991
|
-
], 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(
|
|
5992
|
-
}], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }, { type: i0.Output, args: ["menuItemsChange"] }], appsMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsMenuItems", required: false }] }], logoPath: [{
|
|
5993
|
-
type: Input
|
|
5994
|
-
}] } });
|
|
6006
|
+
], 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 @let link = getItemLink(item);\n @if (isAbsoluteLink(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]=\"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]=\"link\"\n [queryParams]=\"item.queryParams\"\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 [baseUrls]=\"baseUrls()\"\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"] }]
|
|
6007
|
+
}], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }, { type: i0.Output, args: ["menuItemsChange"] }], appsMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appsMenuItems", required: false }] }], baseUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrls", required: false }] }], logoPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoPath", required: false }] }] } });
|
|
5995
6008
|
|
|
5996
6009
|
var KitBadgeTheme;
|
|
5997
6010
|
(function (KitBadgeTheme) {
|
|
@@ -16573,6 +16586,8 @@ class KitSidebarComponent {
|
|
|
16573
16586
|
...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
|
|
16574
16587
|
this.hasSelectedClient = input(true, /* @ts-ignore */
|
|
16575
16588
|
...(ngDevMode ? [{ debugName: "hasSelectedClient" }] : /* istanbul ignore next */ []));
|
|
16589
|
+
this.baseUrls = input({}, /* @ts-ignore */
|
|
16590
|
+
...(ngDevMode ? [{ debugName: "baseUrls" }] : /* istanbul ignore next */ []));
|
|
16576
16591
|
this.menuItems$ = combineLatest([
|
|
16577
16592
|
this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
|
|
16578
16593
|
toObservable(this.menuItems),
|
|
@@ -16590,15 +16605,15 @@ class KitSidebarComponent {
|
|
|
16590
16605
|
this.store.dispatch(new FetchUserApplications());
|
|
16591
16606
|
}
|
|
16592
16607
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSidebarComponent, isStandalone: true, selector: "kit-sidebar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, hasSelectedClient: { classPropertyName: "hasSelectedClient", publicName: "hasSelectedClient", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: ["menuItems", "appsMenuItems", "logoPath"], outputs: ["menuItemsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16608
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSidebarComponent, isStandalone: true, selector: "kit-sidebar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, hasSelectedClient: { classPropertyName: "hasSelectedClient", publicName: "hasSelectedClient", isSignal: true, isRequired: false, transformFunction: null }, baseUrls: { classPropertyName: "baseUrls", publicName: "baseUrls", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n [baseUrls]=\"baseUrls()\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: KitNavigationMenuComponent, selector: "kit-navigation-menu", inputs: ["menuItems", "appsMenuItems", "baseUrls", "logoPath"], outputs: ["menuItemsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16594
16609
|
}
|
|
16595
16610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSidebarComponent, decorators: [{
|
|
16596
16611
|
type: Component,
|
|
16597
16612
|
args: [{ selector: 'kit-sidebar', imports: [
|
|
16598
16613
|
KitNavigationMenuComponent,
|
|
16599
16614
|
AsyncPipe,
|
|
16600
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"] }]
|
|
16601
|
-
}], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], hasSelectedClient: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSelectedClient", required: false }] }] } });
|
|
16615
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-sidebar\">\n @if (menuItems$ | async; as menuItems) {\n <kit-navigation-menu class=\"navigation-menu\"\n logoPath=\"assets/config/logo.svg\"\n [menuItems]=\"menuItems\"\n [appsMenuItems]=\"(appsMenuItems$ | async) ?? []\"\n [baseUrls]=\"baseUrls()\"\n ></kit-navigation-menu>\n }\n</div>\n\n", styles: [".kit-sidebar{height:100%}.kit-sidebar .navigation-menu{display:block;height:100%}.kit-sidebar .navigation-menu ::ng-deep .logo-wrapper{display:flex;justify-content:center;align-items:center}\n"] }]
|
|
16616
|
+
}], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], hasSelectedClient: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSelectedClient", required: false }] }], baseUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseUrls", required: false }] }] } });
|
|
16602
16617
|
|
|
16603
16618
|
class KitTopBarUserComponent {
|
|
16604
16619
|
constructor() {
|