@indigina/ui-kit 1.1.250 → 1.1.251
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit.mjs +22 -14
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +3 -2
- package/package.json +1 -1
|
@@ -62,7 +62,6 @@ import { pdf } from '@progress/kendo-drawing';
|
|
|
62
62
|
import * as i1$f from '@progress/kendo-angular-scheduler';
|
|
63
63
|
import { KENDO_SCHEDULER } from '@progress/kendo-angular-scheduler';
|
|
64
64
|
import { catchError as catchError$1, map as map$1 } from 'rxjs/operators';
|
|
65
|
-
import { KIT_USER_PERMISSIONS_STATE_TOKEN as KIT_USER_PERMISSIONS_STATE_TOKEN$1, FetchUserPermissions as FetchUserPermissions$1 } from 'projects/ui-kit/src/public-api';
|
|
66
65
|
|
|
67
66
|
var KitSvgIcon;
|
|
68
67
|
(function (KitSvgIcon) {
|
|
@@ -4144,9 +4143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
4144
4143
|
}] } });
|
|
4145
4144
|
|
|
4146
4145
|
class KitNavigationMenuComponent {
|
|
4147
|
-
constructor(router, kitNavigationMenuService) {
|
|
4146
|
+
constructor(router, kitNavigationMenuService, destroyRef) {
|
|
4148
4147
|
this.router = router;
|
|
4149
4148
|
this.kitNavigationMenuService = kitNavigationMenuService;
|
|
4149
|
+
this.destroyRef = destroyRef;
|
|
4150
4150
|
/**
|
|
4151
4151
|
* An items list which is going to be rendered as menu items
|
|
4152
4152
|
*/
|
|
@@ -4163,10 +4163,9 @@ class KitNavigationMenuComponent {
|
|
|
4163
4163
|
this.KitSvgIconType = KitSvgIconType;
|
|
4164
4164
|
this.KitTooltipPosition = KitTooltipPosition;
|
|
4165
4165
|
this.isAbsoluteLink = isAbsoluteLink;
|
|
4166
|
-
this.setExpandedStateOnRouterChange();
|
|
4167
4166
|
}
|
|
4168
4167
|
ngOnInit() {
|
|
4169
|
-
this.
|
|
4168
|
+
this.setExpandedStateOnRouterChange();
|
|
4170
4169
|
}
|
|
4171
4170
|
handleClick(item) {
|
|
4172
4171
|
!item.items ? this.collapseAllItems(this.menuItems()) : this.toggleItem(item);
|
|
@@ -4192,10 +4191,19 @@ class KitNavigationMenuComponent {
|
|
|
4192
4191
|
this.updateMenuState();
|
|
4193
4192
|
}
|
|
4194
4193
|
setExpandedStateOnRouterChange() {
|
|
4195
|
-
this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.updateNavigationState(this.menuItems(),
|
|
4194
|
+
this.router.events.pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef)).subscribe((event) => this.updateNavigationState(this.menuItems(), event.url));
|
|
4196
4195
|
}
|
|
4197
4196
|
updateNavigationState(items, url) {
|
|
4198
|
-
const matchLink = (item) =>
|
|
4197
|
+
const matchLink = (item) => {
|
|
4198
|
+
const rootPath = '/';
|
|
4199
|
+
if (!item.link) {
|
|
4200
|
+
return false;
|
|
4201
|
+
}
|
|
4202
|
+
if (item.link === rootPath) {
|
|
4203
|
+
return url === rootPath;
|
|
4204
|
+
}
|
|
4205
|
+
return url === item.link || url.startsWith(item.link);
|
|
4206
|
+
};
|
|
4199
4207
|
items.forEach(item => {
|
|
4200
4208
|
if (item.items) {
|
|
4201
4209
|
this.updateNavigationState(item.items, url);
|
|
@@ -4233,8 +4241,8 @@ class KitNavigationMenuComponent {
|
|
|
4233
4241
|
updateMenuState() {
|
|
4234
4242
|
this.kitNavigationMenuService.setSelectedState(!!this.selectedItem()?.items, !!this.selectedAppsItems());
|
|
4235
4243
|
}
|
|
4236
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$7.Router }, { token: KitNavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4237
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitNavigationMenuComponent, isStandalone: false, 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-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
|
|
4244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$7.Router }, { token: KitNavigationMenuService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitNavigationMenuComponent, isStandalone: false, 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-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\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;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:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.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: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.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"] }], animations: [
|
|
4238
4246
|
expandCollapseAnimation('width'),
|
|
4239
4247
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4240
4248
|
}
|
|
@@ -4242,8 +4250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
4242
4250
|
type: Component,
|
|
4243
4251
|
args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
4244
4252
|
expandCollapseAnimation('width'),
|
|
4245
|
-
], standalone: false, 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-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
|
|
4246
|
-
}], ctorParameters: () => [{ type: i1$7.Router }, { type: KitNavigationMenuService }], propDecorators: { logoPath: [{
|
|
4253
|
+
], standalone: false, 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-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\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;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:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.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"] }]
|
|
4254
|
+
}], ctorParameters: () => [{ type: i1$7.Router }, { type: KitNavigationMenuService }, { type: i0.DestroyRef }], propDecorators: { logoPath: [{
|
|
4247
4255
|
type: Input
|
|
4248
4256
|
}] } });
|
|
4249
4257
|
|
|
@@ -6673,7 +6681,7 @@ class KitPermissionsApiService {
|
|
|
6673
6681
|
this.userPermissionsPath = userPermissionsPath;
|
|
6674
6682
|
}
|
|
6675
6683
|
getUserPermissions() {
|
|
6676
|
-
const url =
|
|
6684
|
+
const url = new URL(this.userPermissionsPath, this.basePath).toString();
|
|
6677
6685
|
return this.httpClient.get(url);
|
|
6678
6686
|
}
|
|
6679
6687
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$d.HttpClient }, { token: KIT_BASE_PATH }, { token: KIT_USER_PERMISSIONS_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
@@ -9701,7 +9709,7 @@ class KitUserApiService {
|
|
|
9701
9709
|
this.userPath = userPath;
|
|
9702
9710
|
}
|
|
9703
9711
|
getUserInfo() {
|
|
9704
|
-
const url =
|
|
9712
|
+
const url = new URL(this.userPath, this.basePath).toString();
|
|
9705
9713
|
return this.httpClient.get(url);
|
|
9706
9714
|
}
|
|
9707
9715
|
getUserApplicationList() {
|
|
@@ -9784,7 +9792,7 @@ class KitSidebarComponent {
|
|
|
9784
9792
|
this.kitMenuBuilderService = kitMenuBuilderService;
|
|
9785
9793
|
this.menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : []));
|
|
9786
9794
|
this.menuItems$ = this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(map(permissions => this.kitMenuBuilderService.build(this.menuItems(), permissions)));
|
|
9787
|
-
this.appsMenuItems$ = this.store.select(KIT_USER_APPLICATIONS_STATE_TOKEN).pipe(map(userApplications => userApplications.
|
|
9795
|
+
this.appsMenuItems$ = this.store.select(KIT_USER_APPLICATIONS_STATE_TOKEN).pipe(map(userApplications => userApplications?.applications.map(({ name, url }) => ({
|
|
9788
9796
|
name,
|
|
9789
9797
|
url,
|
|
9790
9798
|
}))));
|
|
@@ -10143,7 +10151,7 @@ const kitUserPermissionsGuard = (route) => {
|
|
|
10143
10151
|
}
|
|
10144
10152
|
return true;
|
|
10145
10153
|
};
|
|
10146
|
-
return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN
|
|
10154
|
+
return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(tap(permissions => !Object.keys(permissions).length && store.dispatch(new FetchUserPermissions())), filter(permissions => !!Object.keys(permissions).length), map(permissions => checkPermission(permissions)));
|
|
10147
10155
|
};
|
|
10148
10156
|
|
|
10149
10157
|
// KitButton
|