@yomotech/view-toolkit 0.0.40 → 0.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3247,11 +3247,11 @@ class SideMenuComponent {
|
|
|
3247
3247
|
settingMenu = {};
|
|
3248
3248
|
setLanguage = false;
|
|
3249
3249
|
tenantKey = '';
|
|
3250
|
-
tenantName = '';
|
|
3251
3250
|
menuItems = [];
|
|
3252
3251
|
userInfo = {};
|
|
3253
3252
|
settings = {};
|
|
3254
3253
|
projects;
|
|
3254
|
+
tenantName;
|
|
3255
3255
|
environment;
|
|
3256
3256
|
projectSeleted;
|
|
3257
3257
|
languageChange = new EventEmitter();
|
|
@@ -3340,11 +3340,9 @@ class SideMenuComponent {
|
|
|
3340
3340
|
this.isCollapsed = true;
|
|
3341
3341
|
this.isMobile = true;
|
|
3342
3342
|
this.tenantKey = await this.utilityService.getLocalStorage('tenantKey');
|
|
3343
|
-
this.tenantName = await this.utilityService.getLocalStorage('tenantName');
|
|
3344
3343
|
}
|
|
3345
3344
|
else {
|
|
3346
3345
|
this.tenantKey = await this.utilityService.getStorage('tenantKey');
|
|
3347
|
-
this.tenantName = await this.utilityService.getStorage('tenantName');
|
|
3348
3346
|
}
|
|
3349
3347
|
}
|
|
3350
3348
|
ngOnChanges(changes) {
|
|
@@ -3365,7 +3363,8 @@ class SideMenuComponent {
|
|
|
3365
3363
|
tasks.push((async () => {
|
|
3366
3364
|
try {
|
|
3367
3365
|
let projectName = `${this.tenantName}_${this.projectSeleted}`;
|
|
3368
|
-
|
|
3366
|
+
let imagePath = `Media/${childMenu.icon}`;
|
|
3367
|
+
const image = await this.couchdbService.getFileContentFromCouchDb(projectName, imagePath);
|
|
3369
3368
|
childMenu.icon = this.getMediaSrc(image);
|
|
3370
3369
|
}
|
|
3371
3370
|
catch (err) {
|
|
@@ -3462,17 +3461,17 @@ class SideMenuComponent {
|
|
|
3462
3461
|
}
|
|
3463
3462
|
}
|
|
3464
3463
|
async setSettingImages() {
|
|
3465
|
-
if (this.settings
|
|
3464
|
+
if (this.settings) {
|
|
3466
3465
|
const tasks = [];
|
|
3467
|
-
console.log('this.settings: ', this.settings);
|
|
3468
3466
|
for (const menu of this.settings?.submenu) {
|
|
3469
3467
|
if (menu?.submenu?.length) {
|
|
3470
3468
|
for (const childMenu of menu.submenu) {
|
|
3471
|
-
if (childMenu.options && childMenu.options.
|
|
3469
|
+
if (childMenu.options && childMenu.options.changeProject) {
|
|
3472
3470
|
tasks.push((async () => {
|
|
3473
3471
|
try {
|
|
3474
|
-
let projectName = `${this.tenantName}_${
|
|
3475
|
-
|
|
3472
|
+
let projectName = `${this.tenantName}_${childMenu.id}`;
|
|
3473
|
+
let imagePath = `Media/${childMenu.icon}`;
|
|
3474
|
+
const image = await this.couchdbService.getFileContentFromCouchDb(projectName, imagePath);
|
|
3476
3475
|
childMenu.icon = this.getMediaSrc(image);
|
|
3477
3476
|
}
|
|
3478
3477
|
catch (err) {
|
|
@@ -3486,6 +3485,7 @@ class SideMenuComponent {
|
|
|
3486
3485
|
await Promise.all(tasks);
|
|
3487
3486
|
}
|
|
3488
3487
|
this.settingMenu = JSON.parse(JSON.stringify(this.settings));
|
|
3488
|
+
console.log('this.settings: ', this.settings);
|
|
3489
3489
|
}
|
|
3490
3490
|
getMediaSrc(file) {
|
|
3491
3491
|
if (!file)
|
|
@@ -3510,7 +3510,7 @@ class SideMenuComponent {
|
|
|
3510
3510
|
}
|
|
3511
3511
|
async setLoginedUser(user) {
|
|
3512
3512
|
if (user?.name) {
|
|
3513
|
-
user['image'] = "
|
|
3513
|
+
user['image'] = "user.png";
|
|
3514
3514
|
this.loginedUserInfo = user;
|
|
3515
3515
|
let matchMenu = this.menuItems.find((menu) => menu?.options?.action && menu?.options?.action === "logout");
|
|
3516
3516
|
if (matchMenu) {
|
|
@@ -3615,14 +3615,14 @@ class SideMenuComponent {
|
|
|
3615
3615
|
this.settingMenu.label.caption = selectedLanguage[this.settings.label.caption];
|
|
3616
3616
|
}
|
|
3617
3617
|
this.settings?.submenu?.forEach((menu, index) => {
|
|
3618
|
-
if (menu.label && menu.label.caption && selectedLanguage[menu.label.caption] && this.settingMenu?.submenu[index] && this.settingMenu.submenu[index]?.label) {
|
|
3618
|
+
if (menu.label && menu.label.caption && selectedLanguage[menu.label.caption] && this.settingMenu?.submenu && this.settingMenu?.submenu[index] && this.settingMenu.submenu[index]?.label) {
|
|
3619
3619
|
this.settingMenu.submenu[index].label.caption = selectedLanguage[menu.label.caption];
|
|
3620
3620
|
}
|
|
3621
3621
|
});
|
|
3622
3622
|
}
|
|
3623
3623
|
}
|
|
3624
3624
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SideMenuComponent, deps: [{ token: i1$3.NzI18nService }, { token: MobileKeycloakService }, { token: Couchdb }, { token: i5$1.OAuthService }, { token: i1.Platform }, { token: RequestService }, { token: UtilityService }, { token: i8.DialogService }, { token: i4$1.OktaAuthStateService }, { token: NotificationService }, { token: OKTA_AUTH }], target: i0.ɵɵFactoryTarget.Component });
|
|
3625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: SideMenuComponent, isStandalone: true, selector: "vl-side-menu", inputs: { menuItems: "menuItems", userInfo: "userInfo", settings: "settings", projects: "projects", environment: "environment", projectSeleted: "projectSeleted" }, outputs: { languageChange: "languageChange", invokeMenu: "invokeMenu", menuToggle: "menuToggle", invokeProject: "invokeProject", errorMessage: "errorMessage", deleteProject: "deleteProject" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"left-wrap sidemenu\" [class.collapsed]=\"isCollapsed\"\r\n [ngStyle]=\"{ 'z-index': !isCollapsed && isMobile ? 999999 : 'auto' }\" #sideMenu>\r\n <!-- Move toggle button OUTSIDE menu container -->\r\n <div class=\"side-toggle-handle\" id=\"toggle-id\" (click)=\"toggleCollapsed()\" [class.collapsed]=\"isCollapsed\">\r\n <span id=\"toggle-icon\" nz-icon [nzType]=\"isCollapsed ? 'caret-right' : 'caret-left'\"></span>\r\n </div>\r\n <div class=\"side-menu h-screen\" id=\"sidemenuwrap\" *ngIf=\"setLanguage\"\r\n [ngStyle]=\"{ width: (isMobile && isCollapsed) ? '1px' : isCollapsed ? '60px' : '' }\">\r\n <!-- user content -->\r\n <ng-container *ngIf=\"loginedUserInfo && loginedUserInfo?.name\">\r\n <div class=\"user-profile\" [class.collapsed]=\"isCollapsed\">\r\n <img class=\"avatar\" [src]=\"loginedUserInfo?.image\" alt=\"User\" />\r\n <div [class]=\"isMobile ? '' : 'details'\" *ngIf=\"!isCollapsed\">\r\n <div class=\"name\">{{ loginedUserInfo.name }}</div>\r\n <div class=\"email\">{{ loginedUserInfo?.email }}</div>\r\n <div class=\"actions\" *ngIf=\"loginedUserInfo?.actions?.length\">\r\n <button *ngFor=\"let action of loginedUserInfo?.actions\" nz-button nzType=\"link\" nzSize=\"small\"\r\n (click)=\"invokeNavigate(action)\">\r\n <span>{{ action?.label?.caption }}</span>\r\n <span nz-icon [nzType]=\"action.icon\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- dynamic menu -->\r\n <ul nz-menu nzMode=\"inline\" nzTheme=\"dark\" [nzInlineCollapsed]=\"isCollapsed\">\r\n <ng-container *ngFor=\"let item of menuItems\">\r\n <ng-container *ngIf=\"!item.submenu && item?.options?.action != 'logout'; else submenu\">\r\n <span\r\n [class]=\"environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak' ? item.options?.login === true ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : '' : userInfo?.userId ? item.options?.login ? item.options.role ? item.options.role == userInfo.userRole ? '' : 'hidden' : '' : 'hidden' : !item.options?.login ? '' : 'hidden' \">\r\n <li (click)=\"invokeNavigate(item)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? item?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"item.icon\"></span>\r\n <span>{{ item?.label?.caption }}</span>\r\n </li>\r\n </span>\r\n </ng-container>\r\n <ng-template #submenu>\r\n <span\r\n [class]=\"item.options?.login === true && (environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak') ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : ''\">\r\n <li nz-submenu *ngIf=\"item?.options?.action != 'logout'\" [nzTitle]=\"item?.label?.caption\"\r\n [nzIcon]=\"item.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of item.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let subChild of child.submenu\">\r\n <li (click)=\"invokeNavigate(subChild)\" nz-menu-item>\r\n <ng-container *ngIf=\"subChild?.options?.setImageUrl; else antIcon\">\r\n <img *ngIf=\"isUrl(subChild?.icon)\" [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- separator -->\r\n <li *ngIf=\"settingMenu.submenu\" class=\"menu-separator\"></li>\r\n\r\n <!-- settings menu -->\r\n <ng-container *ngIf=\"!settingMenu.submenu; else settingSubmenu\" style=\"position: absolute; bottom: 0;\">\r\n <li (click)=\"invokeNavigate(settingMenu)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? settingMenu?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"settingMenu.icon\"></span>\r\n <span>{{ settingMenu?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n <ng-template #settingSubmenu>\r\n <li nz-submenu [nzTitle]=\"settingMenu?.label?.caption\" [nzIcon]=\"settingMenu.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of settingMenu.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul style=\"width: 260px;\">\r\n <ng-container *ngFor=\"let subChild of child.submenu; let i = index\">\r\n <li (click)=\"invokeNavigate(subChild, child)\" nz-menu-item>\r\n <span [class]=\"child?.label?.caption === 'Languages' ? '' : 'menu-row'\">\r\n <ng-container *ngIf=\"subChild?.options?.setImageUrl; else antIcon\">\r\n <img *ngIf=\"isUrl(subChild?.icon)\" [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n <!-- Delete icon (prevent click bubbling) -->\r\n <span *ngIf=\"child?.label?.caption != 'Languages'\" nz-icon nzType=\"delete\" class=\"delete-icon\"\r\n style=\"padding-left: 5%;\" (click)=\"deleteMenuItem(subChild, i, $event)\"></span>\r\n </span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n </ul>\r\n </div>\r\n</div>", styles: [".menu-separator{height:1px;margin:15px 0 6px;background-color:#ffffff26;list-style:none}.side-menu{background-color:#0d1b2a;color:#fff;display:flex;flex-direction:column;height:100%;transition:width .3s ease}.side-menu ul[nz-menu]{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scroll-behavior:smooth}.user-profile{text-align:center;padding:20px 10px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.1)}.user-profile.collapsed{padding:10px}.user-profile .avatar{width:64px;height:64px;border-radius:50%;border:2px solid #fff;margin-bottom:8px}.user-profile.collapsed .avatar{width:40px;height:40px;margin-bottom:0}.user-profile .name{font-weight:600;font-size:14px;color:#fff}.user-profile .email{font-size:12px;color:#aaa;margin-bottom:8px;word-break:break-word}.user-profile .actions button{margin:0 4px;color:#fff}.projects{position:absolute;bottom:0;width:100%}@media(max-width:768px){.side-menu{height:calc(100dvh - var(--header-height));top:var(--header-height)}.side-menu.open{width:250px}.user-profile .details{display:none}.user-profile .avatar{width:40px;height:40px}}.collapse-btn{position:absolute;z-index:10001}@media(max-width:768px){.collapse-btn{top:calc(var(--header-height) + 8px);left:10px}}@media(max-width:768px){.left-wrap.sidemenu.collapsed .user-profile{max-height:0;opacity:0;overflow:hidden;padding:0;transition:all .2s ease}}.menu-row{display:flex;align-items:center;justify-content:space-between;width:100%}.menu-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-icon{margin-left:auto;cursor:pointer}.side-toggle-handle{position:absolute;right:-14px;width:28px;height:48px;background:#0d1b2a;border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000;transition:all .25s ease;box-shadow:2px 0 6px #00000040}.side-toggle-handle span{color:#fff;font-size:14px;transition:transform .25s ease}@media(max-width:768px){.side-toggle-handle{top:calc(var(--header-height) + -56px)!important;padding-left:10px;transform:none!important}}@media(min-width:769px){.left-wrap.sidemenu.collapsed:hover{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PlatformModule }, { kind: "ngmodule", type:
|
|
3625
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: SideMenuComponent, isStandalone: true, selector: "vl-side-menu", inputs: { menuItems: "menuItems", userInfo: "userInfo", settings: "settings", projects: "projects", tenantName: "tenantName", environment: "environment", projectSeleted: "projectSeleted" }, outputs: { languageChange: "languageChange", invokeMenu: "invokeMenu", menuToggle: "menuToggle", invokeProject: "invokeProject", errorMessage: "errorMessage", deleteProject: "deleteProject" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"left-wrap sidemenu\" [class.collapsed]=\"isCollapsed\"\r\n [ngStyle]=\"{ 'z-index': !isCollapsed && isMobile ? 999999 : 'auto' }\" #sideMenu>\r\n <!-- Move toggle button OUTSIDE menu container -->\r\n <div class=\"side-toggle-handle\" id=\"toggle-id\" (click)=\"toggleCollapsed()\" [class.collapsed]=\"isCollapsed\">\r\n <span id=\"toggle-icon\" nz-icon [nzType]=\"isCollapsed ? 'caret-right' : 'caret-left'\"></span>\r\n </div>\r\n <div class=\"side-menu h-screen\" id=\"sidemenuwrap\" *ngIf=\"setLanguage\"\r\n [ngStyle]=\"{ width: (isMobile && isCollapsed) ? '1px' : isCollapsed ? '60px' : '' }\">\r\n <!-- user content -->\r\n <ng-container *ngIf=\"loginedUserInfo && loginedUserInfo?.name\">\r\n <div class=\"user-profile\" [class.collapsed]=\"isCollapsed\">\r\n <img class=\"avatar\" [src]=\"loginedUserInfo?.image\" alt=\"User\" />\r\n <div [class]=\"isMobile ? '' : 'details'\" *ngIf=\"!isCollapsed\">\r\n <div class=\"name\">{{ loginedUserInfo.name }}</div>\r\n <div class=\"email\">{{ loginedUserInfo?.email }}</div>\r\n <div class=\"actions\" *ngIf=\"loginedUserInfo?.actions?.length\">\r\n <button *ngFor=\"let action of loginedUserInfo?.actions\" nz-button nzType=\"link\" nzSize=\"small\"\r\n (click)=\"invokeNavigate(action)\">\r\n <span>{{ action?.label?.caption }}</span>\r\n <span nz-icon [nzType]=\"action.icon\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- dynamic menu -->\r\n <ul nz-menu nzMode=\"inline\" nzTheme=\"dark\" [nzInlineCollapsed]=\"isCollapsed\">\r\n <ng-container *ngFor=\"let item of menuItems\">\r\n <ng-container *ngIf=\"!item.submenu && item?.options?.action != 'logout'; else submenu\">\r\n <span\r\n [class]=\"environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak' ? item.options?.login === true ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : '' : userInfo?.userId ? item.options?.login ? item.options.role ? item.options.role == userInfo.userRole ? '' : 'hidden' : '' : 'hidden' : !item.options?.login ? '' : 'hidden' \">\r\n <li (click)=\"invokeNavigate(item)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? item?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"item.icon\"></span>\r\n <span>{{ item?.label?.caption }}</span>\r\n </li>\r\n </span>\r\n </ng-container>\r\n <ng-template #submenu>\r\n <span\r\n [class]=\"item.options?.login === true && (environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak') ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : ''\">\r\n <li nz-submenu *ngIf=\"item?.options?.action != 'logout'\" [nzTitle]=\"item?.label?.caption\"\r\n [nzIcon]=\"item.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of item.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let subChild of child.submenu\">\r\n <li (click)=\"invokeNavigate(subChild)\" nz-menu-item>\r\n <ng-container *ngIf=\"subChild?.options?.setImageUrl; else antIcon\">\r\n <img *ngIf=\"isUrl(subChild?.icon)\" [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- separator -->\r\n <li *ngIf=\"settingMenu.submenu\" class=\"menu-separator\"></li>\r\n\r\n <!-- settings menu -->\r\n <ng-container *ngIf=\"!settingMenu.submenu; else settingSubmenu\" style=\"position: absolute; bottom: 0;\">\r\n <li (click)=\"invokeNavigate(settingMenu)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? settingMenu?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"settingMenu.icon\"></span>\r\n <span>{{ settingMenu?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n <ng-template #settingSubmenu>\r\n <li nz-submenu [nzTitle]=\"settingMenu?.label?.caption\" [nzIcon]=\"settingMenu.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of settingMenu.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul style=\"width: 260px;\">\r\n <ng-container *ngFor=\"let subChild of child.submenu; let i = index\">\r\n <li (click)=\"invokeNavigate(subChild, child)\" nz-menu-item>\r\n <span [class]=\"child?.label?.caption === 'Languages' ? '' : 'menu-row'\">\r\n <ng-container *ngIf=\"subChild?.options?.changeProject; else antIcon\">\r\n <img [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n <!-- Delete icon (prevent click bubbling) -->\r\n <span *ngIf=\"child?.label?.caption != 'Languages'\" nz-icon nzType=\"delete\" class=\"delete-icon\"\r\n style=\"padding-left: 5%;\" (click)=\"deleteMenuItem(subChild, i, $event)\"></span>\r\n </span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n </ul>\r\n </div>\r\n</div>", styles: [".menu-separator{height:1px;margin:15px 0 6px;background-color:#ffffff26;list-style:none}.side-menu{background-color:#0d1b2a;color:#fff;display:flex;flex-direction:column;height:100%;transition:width .3s ease}.side-menu ul[nz-menu]{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scroll-behavior:smooth}.user-profile{text-align:center;padding:20px 10px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.1)}.user-profile.collapsed{padding:10px}.user-profile .avatar{width:64px;height:64px;border-radius:50%;border:2px solid #fff;margin-bottom:8px}.user-profile.collapsed .avatar{width:40px;height:40px;margin-bottom:0}.user-profile .name{font-weight:600;font-size:14px;color:#fff}.user-profile .email{font-size:12px;color:#aaa;margin-bottom:8px;word-break:break-word}.user-profile .actions button{margin:0 4px;color:#fff}.projects{position:absolute;bottom:0;width:100%}@media(max-width:768px){.side-menu{height:calc(100dvh - var(--header-height));top:var(--header-height)}.side-menu.open{width:250px}.user-profile .details{display:none}.user-profile .avatar{width:40px;height:40px}}.collapse-btn{position:absolute;z-index:10001}@media(max-width:768px){.collapse-btn{top:calc(var(--header-height) + 8px);left:10px}}@media(max-width:768px){.left-wrap.sidemenu.collapsed .user-profile{max-height:0;opacity:0;overflow:hidden;padding:0;transition:all .2s ease}}.menu-row{display:flex;align-items:center;justify-content:space-between;width:100%}.menu-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-icon{margin-left:auto;cursor:pointer}.side-toggle-handle{position:absolute;right:-14px;width:28px;height:48px;background:#0d1b2a;border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000;transition:all .25s ease;box-shadow:2px 0 6px #00000040}.side-toggle-handle span{color:#fff;font-size:14px;transition:transform .25s ease}@media(max-width:768px){.side-toggle-handle{top:calc(var(--header-height) + -56px)!important;padding-left:10px;transform:none!important}}@media(min-width:769px){.left-wrap.sidemenu.collapsed:hover{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PlatformModule }, { kind: "ngmodule", type:
|
|
3626
3626
|
// NG-ZORRO
|
|
3627
3627
|
NzMenuModule }, { kind: "directive", type: i12$1.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { kind: "component", type: i12$1.NzMenuItemComponent, selector: "[nz-menu-item]", inputs: ["nzPaddingLeft", "nzDisabled", "nzSelected", "nzDanger", "nzMatchRouterExact", "nzMatchRouter"], exportAs: ["nzMenuItem"] }, { kind: "component", type: i12$1.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzTriggerSubMenuAction", "nzOpen", "nzDisabled", "nzPlacement"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzTooltipModule }, { kind: "directive", type: i14.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i11.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i12.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "ngmodule", type:
|
|
3628
3628
|
// PrimeNG
|
|
@@ -3640,7 +3640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
3640
3640
|
NzButtonModule,
|
|
3641
3641
|
// PrimeNG
|
|
3642
3642
|
DynamicDialogModule
|
|
3643
|
-
], template: "<div class=\"left-wrap sidemenu\" [class.collapsed]=\"isCollapsed\"\r\n [ngStyle]=\"{ 'z-index': !isCollapsed && isMobile ? 999999 : 'auto' }\" #sideMenu>\r\n <!-- Move toggle button OUTSIDE menu container -->\r\n <div class=\"side-toggle-handle\" id=\"toggle-id\" (click)=\"toggleCollapsed()\" [class.collapsed]=\"isCollapsed\">\r\n <span id=\"toggle-icon\" nz-icon [nzType]=\"isCollapsed ? 'caret-right' : 'caret-left'\"></span>\r\n </div>\r\n <div class=\"side-menu h-screen\" id=\"sidemenuwrap\" *ngIf=\"setLanguage\"\r\n [ngStyle]=\"{ width: (isMobile && isCollapsed) ? '1px' : isCollapsed ? '60px' : '' }\">\r\n <!-- user content -->\r\n <ng-container *ngIf=\"loginedUserInfo && loginedUserInfo?.name\">\r\n <div class=\"user-profile\" [class.collapsed]=\"isCollapsed\">\r\n <img class=\"avatar\" [src]=\"loginedUserInfo?.image\" alt=\"User\" />\r\n <div [class]=\"isMobile ? '' : 'details'\" *ngIf=\"!isCollapsed\">\r\n <div class=\"name\">{{ loginedUserInfo.name }}</div>\r\n <div class=\"email\">{{ loginedUserInfo?.email }}</div>\r\n <div class=\"actions\" *ngIf=\"loginedUserInfo?.actions?.length\">\r\n <button *ngFor=\"let action of loginedUserInfo?.actions\" nz-button nzType=\"link\" nzSize=\"small\"\r\n (click)=\"invokeNavigate(action)\">\r\n <span>{{ action?.label?.caption }}</span>\r\n <span nz-icon [nzType]=\"action.icon\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- dynamic menu -->\r\n <ul nz-menu nzMode=\"inline\" nzTheme=\"dark\" [nzInlineCollapsed]=\"isCollapsed\">\r\n <ng-container *ngFor=\"let item of menuItems\">\r\n <ng-container *ngIf=\"!item.submenu && item?.options?.action != 'logout'; else submenu\">\r\n <span\r\n [class]=\"environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak' ? item.options?.login === true ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : '' : userInfo?.userId ? item.options?.login ? item.options.role ? item.options.role == userInfo.userRole ? '' : 'hidden' : '' : 'hidden' : !item.options?.login ? '' : 'hidden' \">\r\n <li (click)=\"invokeNavigate(item)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? item?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"item.icon\"></span>\r\n <span>{{ item?.label?.caption }}</span>\r\n </li>\r\n </span>\r\n </ng-container>\r\n <ng-template #submenu>\r\n <span\r\n [class]=\"item.options?.login === true && (environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak') ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : ''\">\r\n <li nz-submenu *ngIf=\"item?.options?.action != 'logout'\" [nzTitle]=\"item?.label?.caption\"\r\n [nzIcon]=\"item.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of item.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let subChild of child.submenu\">\r\n <li (click)=\"invokeNavigate(subChild)\" nz-menu-item>\r\n <ng-container *ngIf=\"subChild?.options?.setImageUrl; else antIcon\">\r\n <img *ngIf=\"isUrl(subChild?.icon)\" [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- separator -->\r\n <li *ngIf=\"settingMenu.submenu\" class=\"menu-separator\"></li>\r\n\r\n <!-- settings menu -->\r\n <ng-container *ngIf=\"!settingMenu.submenu; else settingSubmenu\" style=\"position: absolute; bottom: 0;\">\r\n <li (click)=\"invokeNavigate(settingMenu)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? settingMenu?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"settingMenu.icon\"></span>\r\n <span>{{ settingMenu?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n <ng-template #settingSubmenu>\r\n <li nz-submenu [nzTitle]=\"settingMenu?.label?.caption\" [nzIcon]=\"settingMenu.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of settingMenu.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul style=\"width: 260px;\">\r\n <ng-container *ngFor=\"let subChild of child.submenu; let i = index\">\r\n <li (click)=\"invokeNavigate(subChild, child)\" nz-menu-item>\r\n <span [class]=\"child?.label?.caption === 'Languages' ? '' : 'menu-row'\">\r\n <ng-container *ngIf=\"subChild?.options?.setImageUrl; else antIcon\">\r\n <img *ngIf=\"isUrl(subChild?.icon)\" [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n <!-- Delete icon (prevent click bubbling) -->\r\n <span *ngIf=\"child?.label?.caption != 'Languages'\" nz-icon nzType=\"delete\" class=\"delete-icon\"\r\n style=\"padding-left: 5%;\" (click)=\"deleteMenuItem(subChild, i, $event)\"></span>\r\n </span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n </ul>\r\n </div>\r\n</div>", styles: [".menu-separator{height:1px;margin:15px 0 6px;background-color:#ffffff26;list-style:none}.side-menu{background-color:#0d1b2a;color:#fff;display:flex;flex-direction:column;height:100%;transition:width .3s ease}.side-menu ul[nz-menu]{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scroll-behavior:smooth}.user-profile{text-align:center;padding:20px 10px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.1)}.user-profile.collapsed{padding:10px}.user-profile .avatar{width:64px;height:64px;border-radius:50%;border:2px solid #fff;margin-bottom:8px}.user-profile.collapsed .avatar{width:40px;height:40px;margin-bottom:0}.user-profile .name{font-weight:600;font-size:14px;color:#fff}.user-profile .email{font-size:12px;color:#aaa;margin-bottom:8px;word-break:break-word}.user-profile .actions button{margin:0 4px;color:#fff}.projects{position:absolute;bottom:0;width:100%}@media(max-width:768px){.side-menu{height:calc(100dvh - var(--header-height));top:var(--header-height)}.side-menu.open{width:250px}.user-profile .details{display:none}.user-profile .avatar{width:40px;height:40px}}.collapse-btn{position:absolute;z-index:10001}@media(max-width:768px){.collapse-btn{top:calc(var(--header-height) + 8px);left:10px}}@media(max-width:768px){.left-wrap.sidemenu.collapsed .user-profile{max-height:0;opacity:0;overflow:hidden;padding:0;transition:all .2s ease}}.menu-row{display:flex;align-items:center;justify-content:space-between;width:100%}.menu-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-icon{margin-left:auto;cursor:pointer}.side-toggle-handle{position:absolute;right:-14px;width:28px;height:48px;background:#0d1b2a;border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000;transition:all .25s ease;box-shadow:2px 0 6px #00000040}.side-toggle-handle span{color:#fff;font-size:14px;transition:transform .25s ease}@media(max-width:768px){.side-toggle-handle{top:calc(var(--header-height) + -56px)!important;padding-left:10px;transform:none!important}}@media(min-width:769px){.left-wrap.sidemenu.collapsed:hover{transform:translate(0)}}\n"] }]
|
|
3643
|
+
], template: "<div class=\"left-wrap sidemenu\" [class.collapsed]=\"isCollapsed\"\r\n [ngStyle]=\"{ 'z-index': !isCollapsed && isMobile ? 999999 : 'auto' }\" #sideMenu>\r\n <!-- Move toggle button OUTSIDE menu container -->\r\n <div class=\"side-toggle-handle\" id=\"toggle-id\" (click)=\"toggleCollapsed()\" [class.collapsed]=\"isCollapsed\">\r\n <span id=\"toggle-icon\" nz-icon [nzType]=\"isCollapsed ? 'caret-right' : 'caret-left'\"></span>\r\n </div>\r\n <div class=\"side-menu h-screen\" id=\"sidemenuwrap\" *ngIf=\"setLanguage\"\r\n [ngStyle]=\"{ width: (isMobile && isCollapsed) ? '1px' : isCollapsed ? '60px' : '' }\">\r\n <!-- user content -->\r\n <ng-container *ngIf=\"loginedUserInfo && loginedUserInfo?.name\">\r\n <div class=\"user-profile\" [class.collapsed]=\"isCollapsed\">\r\n <img class=\"avatar\" [src]=\"loginedUserInfo?.image\" alt=\"User\" />\r\n <div [class]=\"isMobile ? '' : 'details'\" *ngIf=\"!isCollapsed\">\r\n <div class=\"name\">{{ loginedUserInfo.name }}</div>\r\n <div class=\"email\">{{ loginedUserInfo?.email }}</div>\r\n <div class=\"actions\" *ngIf=\"loginedUserInfo?.actions?.length\">\r\n <button *ngFor=\"let action of loginedUserInfo?.actions\" nz-button nzType=\"link\" nzSize=\"small\"\r\n (click)=\"invokeNavigate(action)\">\r\n <span>{{ action?.label?.caption }}</span>\r\n <span nz-icon [nzType]=\"action.icon\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- dynamic menu -->\r\n <ul nz-menu nzMode=\"inline\" nzTheme=\"dark\" [nzInlineCollapsed]=\"isCollapsed\">\r\n <ng-container *ngFor=\"let item of menuItems\">\r\n <ng-container *ngIf=\"!item.submenu && item?.options?.action != 'logout'; else submenu\">\r\n <span\r\n [class]=\"environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak' ? item.options?.login === true ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : '' : userInfo?.userId ? item.options?.login ? item.options.role ? item.options.role == userInfo.userRole ? '' : 'hidden' : '' : 'hidden' : !item.options?.login ? '' : 'hidden' \">\r\n <li (click)=\"invokeNavigate(item)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? item?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"item.icon\"></span>\r\n <span>{{ item?.label?.caption }}</span>\r\n </li>\r\n </span>\r\n </ng-container>\r\n <ng-template #submenu>\r\n <span\r\n [class]=\"item.options?.login === true && (environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak') ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : ''\">\r\n <li nz-submenu *ngIf=\"item?.options?.action != 'logout'\" [nzTitle]=\"item?.label?.caption\"\r\n [nzIcon]=\"item.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of item.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let subChild of child.submenu\">\r\n <li (click)=\"invokeNavigate(subChild)\" nz-menu-item>\r\n <ng-container *ngIf=\"subChild?.options?.setImageUrl; else antIcon\">\r\n <img *ngIf=\"isUrl(subChild?.icon)\" [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- separator -->\r\n <li *ngIf=\"settingMenu.submenu\" class=\"menu-separator\"></li>\r\n\r\n <!-- settings menu -->\r\n <ng-container *ngIf=\"!settingMenu.submenu; else settingSubmenu\" style=\"position: absolute; bottom: 0;\">\r\n <li (click)=\"invokeNavigate(settingMenu)\" nz-menu-item nz-tooltip nzTooltipPlacement=\"right\"\r\n [nzTooltipTitle]=\"isCollapsed && !isMobile ? settingMenu?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"settingMenu.icon\"></span>\r\n <span>{{ settingMenu?.label?.caption }}</span>\r\n </li>\r\n </ng-container>\r\n <ng-template #settingSubmenu>\r\n <li nz-submenu [nzTitle]=\"settingMenu?.label?.caption\" [nzIcon]=\"settingMenu.icon\">\r\n <ul>\r\n <ng-container *ngFor=\"let child of settingMenu.submenu\">\r\n <li (click)=\"invokeNavigate(child)\" *ngIf=\"!child.submenu\" nz-menu-item nz-tooltip\r\n nzTooltipPlacement=\"right\" [nzTooltipTitle]=\"isCollapsed && !isMobile ? child?.label?.caption : ''\">\r\n <span nz-icon [nzType]=\"child?.icon\"></span>\r\n <span>{{ child?.label?.caption }}</span>\r\n </li>\r\n <ng-container *ngIf=\"child.submenu\">\r\n <li nz-submenu [nzTitle]=\"child?.label?.caption\" [nzIcon]=\"child?.icon\">\r\n <ul style=\"width: 260px;\">\r\n <ng-container *ngFor=\"let subChild of child.submenu; let i = index\">\r\n <li (click)=\"invokeNavigate(subChild, child)\" nz-menu-item>\r\n <span [class]=\"child?.label?.caption === 'Languages' ? '' : 'menu-row'\">\r\n <ng-container *ngIf=\"subChild?.options?.changeProject; else antIcon\">\r\n <img [src]=\"subChild?.icon\" alt=\"icon\"\r\n style=\"width: 16px; height: 16px; margin-right: 8px;\" />\r\n </ng-container>\r\n <ng-template #antIcon>\r\n <span nz-icon [nzType]=\"subChild?.icon\"></span>\r\n </ng-template>\r\n <span>{{ subChild?.label?.caption }}</span>\r\n <!-- Delete icon (prevent click bubbling) -->\r\n <span *ngIf=\"child?.label?.caption != 'Languages'\" nz-icon nzType=\"delete\" class=\"delete-icon\"\r\n style=\"padding-left: 5%;\" (click)=\"deleteMenuItem(subChild, i, $event)\"></span>\r\n </span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n </ul>\r\n </div>\r\n</div>", styles: [".menu-separator{height:1px;margin:15px 0 6px;background-color:#ffffff26;list-style:none}.side-menu{background-color:#0d1b2a;color:#fff;display:flex;flex-direction:column;height:100%;transition:width .3s ease}.side-menu ul[nz-menu]{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scroll-behavior:smooth}.user-profile{text-align:center;padding:20px 10px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.1)}.user-profile.collapsed{padding:10px}.user-profile .avatar{width:64px;height:64px;border-radius:50%;border:2px solid #fff;margin-bottom:8px}.user-profile.collapsed .avatar{width:40px;height:40px;margin-bottom:0}.user-profile .name{font-weight:600;font-size:14px;color:#fff}.user-profile .email{font-size:12px;color:#aaa;margin-bottom:8px;word-break:break-word}.user-profile .actions button{margin:0 4px;color:#fff}.projects{position:absolute;bottom:0;width:100%}@media(max-width:768px){.side-menu{height:calc(100dvh - var(--header-height));top:var(--header-height)}.side-menu.open{width:250px}.user-profile .details{display:none}.user-profile .avatar{width:40px;height:40px}}.collapse-btn{position:absolute;z-index:10001}@media(max-width:768px){.collapse-btn{top:calc(var(--header-height) + 8px);left:10px}}@media(max-width:768px){.left-wrap.sidemenu.collapsed .user-profile{max-height:0;opacity:0;overflow:hidden;padding:0;transition:all .2s ease}}.menu-row{display:flex;align-items:center;justify-content:space-between;width:100%}.menu-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-icon{margin-left:auto;cursor:pointer}.side-toggle-handle{position:absolute;right:-14px;width:28px;height:48px;background:#0d1b2a;border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000;transition:all .25s ease;box-shadow:2px 0 6px #00000040}.side-toggle-handle span{color:#fff;font-size:14px;transition:transform .25s ease}@media(max-width:768px){.side-toggle-handle{top:calc(var(--header-height) + -56px)!important;padding-left:10px;transform:none!important}}@media(min-width:769px){.left-wrap.sidemenu.collapsed:hover{transform:translate(0)}}\n"] }]
|
|
3644
3644
|
}], ctorParameters: () => [{ type: i1$3.NzI18nService }, { type: MobileKeycloakService }, { type: Couchdb }, { type: i5$1.OAuthService }, { type: i1.Platform }, { type: RequestService }, { type: UtilityService }, { type: i8.DialogService }, { type: i4$1.OktaAuthStateService }, { type: NotificationService }, { type: OktaAuth, decorators: [{
|
|
3645
3645
|
type: Inject,
|
|
3646
3646
|
args: [OKTA_AUTH]
|
|
@@ -3652,6 +3652,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
3652
3652
|
type: Input
|
|
3653
3653
|
}], projects: [{
|
|
3654
3654
|
type: Input
|
|
3655
|
+
}], tenantName: [{
|
|
3656
|
+
type: Input
|
|
3655
3657
|
}], environment: [{
|
|
3656
3658
|
type: Input
|
|
3657
3659
|
}], projectSeleted: [{
|