cloud-ide-layout 1.0.21 → 1.0.23

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.
@@ -1,18 +1,18 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, inject, signal, computed, effect, Component, ElementRef, HostListener, ViewContainerRef, ViewChild, ViewChildren, InjectionToken, PLATFORM_ID } from '@angular/core';
3
3
  import { HttpClient } from '@angular/common/http';
4
- import { cidePath, hostManagerRoutesUrl, coreRoutesUrl, designConfigRoutesUrl } from 'cloud-ide-lms-model';
4
+ import { cidePath, hostManagerRoutesUrl, coreRoutesUrl, commonRoutesUrl, designConfigRoutesUrl } from 'cloud-ide-lms-model';
5
5
  import { Observable, throwError, of, BehaviorSubject, interval, take as take$1 } from 'rxjs';
6
6
  import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged } from 'rxjs/operators';
7
7
  import * as i2 from '@angular/router';
8
8
  import { Router, NavigationEnd, RouteReuseStrategy, RouterModule } from '@angular/router';
9
9
  import { Title } from '@angular/platform-browser';
10
- import { CideEleFileManagerService, CideElementsService, CideInputComponent, CideIconComponent, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent } from 'cloud-ide-element';
10
+ import { CideEleFileManagerService, CideElementsService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent } from 'cloud-ide-element';
11
11
  import * as i1 from '@angular/common';
12
12
  import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
13
+ import { CloudIdeAuthService, authGuard } from 'cloud-ide-auth';
13
14
  import { trigger, state, transition, style, animate } from '@angular/animations';
14
15
  import { merge } from 'lodash';
15
- import { authGuard } from 'cloud-ide-auth';
16
16
 
17
17
  class CloudIdeLayoutService {
18
18
  constructor() { }
@@ -288,12 +288,7 @@ class AppStateService {
288
288
  constructor() {
289
289
  // Initialize file manager base URL on app startup
290
290
  this.fileManagerService.setBaseUrl(cidePath.join([hostManagerRoutesUrl.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager]));
291
- // Initialize file manager user ID from current user
292
- const currentUser = this.currentUserSignal();
293
- console.log('🔍 [AppStateService] Current user:', currentUser);
294
- if (currentUser?._id) {
295
- this.fileManagerService.setUserId(currentUser._id);
296
- }
291
+ this.fileManagerService.setObjectIdEndpoint(cidePath.join([hostManagerRoutesUrl.cideSuiteHost, commonRoutesUrl?.module, commonRoutesUrl?.generateObjectId]));
297
292
  // Load initial state from localStorage
298
293
  this.loadFromLocalStorage();
299
294
  // Save to localStorage whenever state changes
@@ -307,6 +302,17 @@ class AppStateService {
307
302
  activeEntity: activeEntity
308
303
  });
309
304
  });
305
+ // Automatically update file manager user ID whenever user changes
306
+ effect(() => {
307
+ const currentUser = this.currentUserSignal();
308
+ console.log('🔍 [AppStateService] User changed, updating file manager user ID:', currentUser);
309
+ if (currentUser?._id) {
310
+ this.fileManagerService.setUserId(currentUser._id);
311
+ }
312
+ else {
313
+ this.fileManagerService.setUserId('');
314
+ }
315
+ });
310
316
  // Listen for localStorage changes from other tabs/windows
311
317
  this.setupStorageListener();
312
318
  }
@@ -315,13 +321,7 @@ class AppStateService {
315
321
  */
316
322
  setUser(user) {
317
323
  this.currentUserSignal.set(user);
318
- // Update file manager service with new user ID
319
- if (user?._id) {
320
- this.fileManagerService.setUserId(user._id);
321
- }
322
- else {
323
- this.fileManagerService.setUserId('');
324
- }
324
+ // Note: File manager user ID is automatically updated via effect() in constructor
325
325
  }
326
326
  /**
327
327
  * Update user data (partial update)
@@ -374,6 +374,7 @@ class AppStateService {
374
374
  */
375
375
  refreshFromLocalStorage() {
376
376
  this.loadFromLocalStorage();
377
+ // Note: File manager user ID is automatically updated via effect() when user signal changes
377
378
  }
378
379
  /**
379
380
  * Check if localStorage is available (browser environment)
@@ -1282,9 +1283,45 @@ class CideLytHeaderWrapperComponent extends CideLytSharedWrapperComponent {
1282
1283
  sypg_page_code: "cide_lyt_header"
1283
1284
  };
1284
1285
  syen_photo = {};
1286
+ // More Options Dropdown Configuration
1287
+ moreOptionsItems = [
1288
+ {
1289
+ id: 'settings',
1290
+ label: 'Settings',
1291
+ icon: 'settings',
1292
+ iconColor: 'tw-text-gray-500'
1293
+ },
1294
+ {
1295
+ id: 'help',
1296
+ label: 'Help & Support',
1297
+ icon: 'help',
1298
+ iconColor: 'tw-text-gray-500'
1299
+ },
1300
+ {
1301
+ id: 'divider',
1302
+ label: '',
1303
+ divider: true
1304
+ },
1305
+ {
1306
+ id: 'logout',
1307
+ label: 'Logout',
1308
+ icon: 'logout',
1309
+ iconColor: 'tw-text-red-500',
1310
+ textColor: 'tw-text-red-600',
1311
+ hoverBgColor: 'hover:tw-bg-red-50'
1312
+ }
1313
+ ];
1314
+ moreOptionsConfig = {
1315
+ triggerIcon: 'more_vert',
1316
+ triggerSize: 'sm',
1317
+ menuPosition: 'auto',
1318
+ menuWidth: 'tw-w-48',
1319
+ usePortal: true
1320
+ };
1285
1321
  headerService = inject(CideLytHeaderService);
1286
1322
  fileManagerService = inject(CideLytFileManagerService);
1287
1323
  router = inject(Router);
1324
+ authService = inject(CloudIdeAuthService);
1288
1325
  constructor() {
1289
1326
  super();
1290
1327
  }
@@ -1345,12 +1382,82 @@ class CideLytHeaderWrapperComponent extends CideLytSharedWrapperComponent {
1345
1382
  }
1346
1383
  }
1347
1384
  }
1385
+ /**
1386
+ * Handle more options dropdown item clicks
1387
+ * @param item The clicked dropdown item
1388
+ */
1389
+ onMoreOptionsClick(item) {
1390
+ console.log('🔍 [HeaderComponent] More options clicked:', item);
1391
+ switch (item.id) {
1392
+ case 'settings':
1393
+ this.navigateToSettings();
1394
+ break;
1395
+ case 'help':
1396
+ this.navigateToHelp();
1397
+ break;
1398
+ case 'logout':
1399
+ this.handleLogout();
1400
+ break;
1401
+ default:
1402
+ console.log('🔍 [HeaderComponent] Unknown option:', item.id);
1403
+ }
1404
+ }
1405
+ /**
1406
+ * Navigate to settings page
1407
+ */
1408
+ navigateToSettings() {
1409
+ console.log('🔍 [HeaderComponent] Navigating to settings...');
1410
+ // TODO: Implement settings navigation
1411
+ // this.router.navigate(['/settings']);
1412
+ }
1413
+ /**
1414
+ * Navigate to help and support page
1415
+ */
1416
+ navigateToHelp() {
1417
+ console.log('🔍 [HeaderComponent] Navigating to help...');
1418
+ // TODO: Implement help navigation
1419
+ // this.router.navigate(['/help']);
1420
+ }
1421
+ /**
1422
+ * Handle user logout
1423
+ * Uses the auth service to sign out and navigate to login page
1424
+ */
1425
+ handleLogout() {
1426
+ console.log('🔍 [HeaderComponent] Logging out user...');
1427
+ // Show confirmation dialog
1428
+ if (confirm('Are you sure you want to logout?')) {
1429
+ try {
1430
+ // Use the auth service to sign out
1431
+ this.authService.signOut();
1432
+ // Navigate to login page
1433
+ this.router.navigate(['/auth/sign-in']).then(success => {
1434
+ if (success) {
1435
+ console.log('✅ [HeaderComponent] Successfully logged out and navigated to login page');
1436
+ }
1437
+ else {
1438
+ console.error('❌ [HeaderComponent] Failed to navigate to login page');
1439
+ // Fallback: reload the page to force navigation
1440
+ window.location.href = '/auth/sign-in';
1441
+ }
1442
+ }).catch(error => {
1443
+ console.error('❌ [HeaderComponent] Navigation error:', error);
1444
+ // Fallback: reload the page to force navigation
1445
+ window.location.href = '/auth/sign-in';
1446
+ });
1447
+ }
1448
+ catch (error) {
1449
+ console.error('❌ [HeaderComponent] Logout error:', error);
1450
+ // Still try to navigate to login page even if logout fails
1451
+ this.router.navigate(['/auth/sign-in']);
1452
+ }
1453
+ }
1454
+ }
1348
1455
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1349
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", usesInheritance: true, ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"header-logo-container tw-cursor-pointer\" \n (click)=\"onLogoClick()\" \n (keydown.enter)=\"onLogoClick()\" \n (keydown.space)=\"onLogoClick()\"\n tabindex=\"0\" \n role=\"button\"\n aria-label=\"Navigate to home\"\n title=\"Click to go to control panel home\">\n <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n </div>\n \n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>dashboard</cide-ele-icon>\n <div class=\"header-tooltip\">Dashboard</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>notifications</cide-ele-icon>\n <div class=\"header-badge\">3</div>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <div class=\"header-divider\"></div>\n \n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <div class=\"profile-avatar\">AK</div>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>more_vert</cide-ele-icon>\n <div class=\"header-tooltip\">More Options</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
1456
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", usesInheritance: true, ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"header-logo-container tw-cursor-pointer\" \n (click)=\"onLogoClick()\" \n (keydown.enter)=\"onLogoClick()\" \n (keydown.space)=\"onLogoClick()\"\n tabindex=\"0\" \n role=\"button\"\n aria-label=\"Navigate to home\"\n title=\"Click to go to control panel home\">\n <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n </div>\n \n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>dashboard</cide-ele-icon>\n <div class=\"header-tooltip\">Dashboard</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>notifications</cide-ele-icon>\n <div class=\"header-badge\">3</div>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <div class=\"header-divider\"></div>\n \n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <div class=\"profile-avatar\">AK</div>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown\n [items]=\"moreOptionsItems\"\n [config]=\"moreOptionsConfig\"\n (itemClick)=\"onMoreOptionsClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">More Options</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
1350
1457
  }
1351
1458
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
1352
1459
  type: Component,
1353
- args: [{ selector: 'cide-lyt-header-wrapper', standalone: true, imports: [CideInputComponent, CommonModule, CideIconComponent], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"header-logo-container tw-cursor-pointer\" \n (click)=\"onLogoClick()\" \n (keydown.enter)=\"onLogoClick()\" \n (keydown.space)=\"onLogoClick()\"\n tabindex=\"0\" \n role=\"button\"\n aria-label=\"Navigate to home\"\n title=\"Click to go to control panel home\">\n <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n </div>\n \n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>dashboard</cide-ele-icon>\n <div class=\"header-tooltip\">Dashboard</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>notifications</cide-ele-icon>\n <div class=\"header-badge\">3</div>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <div class=\"header-divider\"></div>\n \n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <div class=\"profile-avatar\">AK</div>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>more_vert</cide-ele-icon>\n <div class=\"header-tooltip\">More Options</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"] }]
1460
+ args: [{ selector: 'cide-lyt-header-wrapper', standalone: true, imports: [CideInputComponent, CommonModule, CideIconComponent, CideEleDropdownComponent], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"header-logo-container tw-cursor-pointer\" \n (click)=\"onLogoClick()\" \n (keydown.enter)=\"onLogoClick()\" \n (keydown.space)=\"onLogoClick()\"\n tabindex=\"0\" \n role=\"button\"\n aria-label=\"Navigate to home\"\n title=\"Click to go to control panel home\">\n <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n </div>\n \n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>dashboard</cide-ele-icon>\n <div class=\"header-tooltip\">Dashboard</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>notifications</cide-ele-icon>\n <div class=\"header-badge\">3</div>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <div class=\"header-divider\"></div>\n \n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <div class=\"profile-avatar\">AK</div>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n \n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown\n [items]=\"moreOptionsItems\"\n [config]=\"moreOptionsConfig\"\n (itemClick)=\"onMoreOptionsClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">More Options</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"] }]
1354
1461
  }], ctorParameters: () => [] });
1355
1462
 
1356
1463
  class CideLytUserStatusService {
@@ -2544,8 +2651,8 @@ class CideLytSidedrawerWrapperComponent {
2544
2651
  }
2545
2652
  ngOnInit() {
2546
2653
  // Initialize the component map (You'd likely populate this from a config or service)
2547
- this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-ByksUixd.mjs').then(m => m.CideLytSidedrawerNotesComponent);
2548
- this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-C1e4aZ_H.mjs').then(m => m.CideLytDrawerThemeComponent);
2654
+ this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-B4p_uGox.mjs').then(m => m.CideLytSidedrawerNotesComponent);
2655
+ this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-B-VlqH0O.mjs').then(m => m.CideLytDrawerThemeComponent);
2549
2656
  }
2550
2657
  async loadComponent(configFor) {
2551
2658
  console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -2917,7 +3024,7 @@ const layoutControlPannelChildRoutes = [{
2917
3024
  },
2918
3025
  {
2919
3026
  path: "home",
2920
- loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-CDys7gDk.mjs').then(c => c.CideLytHomeWrapperComponent),
3027
+ loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DtB5EqE3.mjs').then(c => c.CideLytHomeWrapperComponent),
2921
3028
  canActivate: [authGuard],
2922
3029
  data: {
2923
3030
  reuseTab: true, // For CustomRouteReuseStrategy
@@ -3183,4 +3290,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
3183
3290
  */
3184
3291
 
3185
3292
  export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, CloudIdeLayoutService as e, CloudIdeLayoutComponent as f, CideLytSharedService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, AppStateService as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, processThemeVariable as p, setCSSVariable as s, themeFactory as t };
3186
- //# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-B7xm0FcW.mjs.map
3293
+ //# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-urOTUFvE.mjs.map