cloud-ide-layout 1.0.128 → 1.0.130
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/{cloud-ide-layout-cloud-ide-layout-rUYm3HK3.mjs → cloud-ide-layout-cloud-ide-layout-BbNpkUNq.mjs} +46 -24
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-BbNpkUNq.mjs.map +1 -0
- package/fesm2022/cloud-ide-layout-dashboard-cards.service-BbJ4rb2S.mjs.map +1 -1
- package/fesm2022/{cloud-ide-layout-dashboard-manager.component-B07pZGyf.mjs → cloud-ide-layout-dashboard-manager.component-Cet1zc7W.mjs} +308 -308
- package/fesm2022/cloud-ide-layout-dashboard-manager.component-Cet1zc7W.mjs.map +1 -0
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-BEZtWw5o.mjs → cloud-ide-layout-drawer-theme.component-Gdug6J1K.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-BEZtWw5o.mjs.map → cloud-ide-layout-drawer-theme.component-Gdug6J1K.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-BKoJPKEE.mjs → cloud-ide-layout-floating-entity-selection.component-C6e-ATZ_.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-BKoJPKEE.mjs.map → cloud-ide-layout-floating-entity-selection.component-C6e-ATZ_.mjs.map} +1 -1
- package/fesm2022/cloud-ide-layout-home-wrapper.component-CeuB9Nsb.mjs +272 -0
- package/fesm2022/cloud-ide-layout-home-wrapper.component-CeuB9Nsb.mjs.map +1 -0
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CaFNYLdT.mjs → cloud-ide-layout-sidedrawer-notes.component-DMlbYKSS.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CaFNYLdT.mjs.map → cloud-ide-layout-sidedrawer-notes.component-DMlbYKSS.mjs.map} +1 -1
- package/fesm2022/cloud-ide-layout.mjs +1 -1
- package/package.json +1 -1
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-rUYm3HK3.mjs.map +0 -1
- package/fesm2022/cloud-ide-layout-dashboard-manager.component-B07pZGyf.mjs.map +0 -1
- package/fesm2022/cloud-ide-layout-home-wrapper.component-Cwzqvnkc.mjs +0 -272
- package/fesm2022/cloud-ide-layout-home-wrapper.component-Cwzqvnkc.mjs.map +0 -1
|
@@ -7,7 +7,7 @@ import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged }
|
|
|
7
7
|
import * as i2 from '@angular/router';
|
|
8
8
|
import { Router, NavigationEnd, RouteReuseStrategy, RouterModule, ActivatedRoute } from '@angular/router';
|
|
9
9
|
import { Title, DomSanitizer } from '@angular/platform-browser';
|
|
10
|
-
import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, WebSocketNotificationService, NotificationApiService, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
|
|
10
|
+
import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, ConfirmationService, WebSocketNotificationService, NotificationApiService, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
|
|
11
11
|
import * as i1$1 from '@angular/common';
|
|
12
12
|
import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
|
|
13
13
|
import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
|
|
@@ -1353,7 +1353,7 @@ class CideLytFloatingEntitySelectionService {
|
|
|
1353
1353
|
}
|
|
1354
1354
|
try {
|
|
1355
1355
|
// Use relative import to avoid circular dependency
|
|
1356
|
-
const module = await import('./cloud-ide-layout-floating-entity-selection.component-
|
|
1356
|
+
const module = await import('./cloud-ide-layout-floating-entity-selection.component-C6e-ATZ_.mjs');
|
|
1357
1357
|
if (module.CideLytFloatingEntitySelectionComponent) {
|
|
1358
1358
|
this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
|
|
1359
1359
|
console.log('✅ Entity selection component registered successfully');
|
|
@@ -2323,6 +2323,7 @@ class CideLytHeaderWrapperComponent {
|
|
|
2323
2323
|
sharedService = inject(CideLytSharedService);
|
|
2324
2324
|
fileManagerService = inject(CideLytFileManagerService);
|
|
2325
2325
|
router = inject(Router);
|
|
2326
|
+
confirmationService = inject(ConfirmationService);
|
|
2326
2327
|
authService = inject(AUTH_SERVICE_TOKEN);
|
|
2327
2328
|
wsNotificationService = inject(WebSocketNotificationService);
|
|
2328
2329
|
notificationApiService = inject(NotificationApiService);
|
|
@@ -3498,12 +3499,12 @@ class CideLytHeaderWrapperComponent {
|
|
|
3498
3499
|
this.floatingContainerService.bringToFront(containerId);
|
|
3499
3500
|
}
|
|
3500
3501
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3501
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: 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=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n #notificationDropdown\n [items]=\"notificationItems()\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n <!-- Header - Fixed/Sticky -->\n <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n }\n </div>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n <button \n type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n title=\"Notification Settings\">\n <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n </button>\n @if (unreadCount() > 0) {\n <button \n type=\"button\"\n class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n (click)=\"markAllAsRead(); $event.stopPropagation()\"\n title=\"Mark all as read\">\n <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n </button>\n }\n <button \n type=\"button\" \n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n (click)=\"closeNotificationDropdown($event)\"\n title=\"Close\">\n <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Notifications List -->\n <div class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n @if (notifications().length === 0) {\n <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No notifications yet</p>\n <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught up!</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div \n class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\n [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n [class.tw-bg-blue-50]=\"!isNotificationRead(notif)\"\n [class.dark:tw-bg-gray-700]=\"!isNotificationRead(notif)\"\n [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Icon/Avatar -->\n <div class=\"tw-flex-shrink-0 tw-relative\">\n <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n @if (getNotificationAvatar(notif)) {\n <img \n cideEleFileImage \n [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\"\n class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n }\n </div>\n <!-- Green online indicator -->\n <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <!-- Title and relative time -->\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n </h4>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n @if (!isNotificationRead(notif)) {\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n }\n @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n <button \n type=\"button\"\n (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n Undo\n </button>\n }\n </div>\n </div>\n \n <!-- Message -->\n @if (notif.message && notif.message !== notif.title) {\n <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n {{ notif.message }}\n </p>\n }\n \n <!-- Comment -->\n @if (notif.data?.comment) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n </div>\n }\n \n <!-- File -->\n @if (notif.data?.file) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n </div>\n <cide-ele-icon class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n </div>\n }\n \n <!-- Action Buttons -->\n @if (notif.action_label) {\n <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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-dropdown-container{position:relative;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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.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}}.notification-scroll-container{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\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", "step", "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"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
3502
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: 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=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n #notificationDropdown\n [items]=\"notificationItems()\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n <!-- Header - Fixed/Sticky -->\n <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n }\n </div>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n <button \n type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n title=\"Notification Settings\">\n <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n </button>\n @if (unreadCount() > 0) {\n <button \n type=\"button\"\n class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n (click)=\"markAllAsRead(); $event.stopPropagation()\"\n title=\"Mark all as read\">\n <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n </button>\n }\n <button \n type=\"button\" \n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n (click)=\"closeNotificationDropdown($event)\"\n title=\"Close\">\n <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Notifications List -->\n <div class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n @if (notifications().length === 0) {\n <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No notifications yet</p>\n <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught up!</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div \n class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\n [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n [class.tw-bg-blue-50]=\"!isNotificationRead(notif)\"\n [class.dark:tw-bg-gray-700]=\"!isNotificationRead(notif)\"\n [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Icon/Avatar -->\n <div class=\"tw-flex-shrink-0 tw-relative\">\n <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n @if (getNotificationAvatar(notif)) {\n <img \n cideEleFileImage \n [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\"\n class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n }\n </div>\n <!-- Green online indicator -->\n <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <!-- Title and relative time -->\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n </h4>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n @if (!isNotificationRead(notif)) {\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n }\n @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n <button \n type=\"button\"\n (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n Undo\n </button>\n }\n </div>\n </div>\n \n <!-- Message -->\n @if (notif.message && notif.message !== notif.title) {\n <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n {{ notif.message }}\n </p>\n }\n \n <!-- Comment -->\n @if (notif.data?.comment) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n </div>\n }\n \n <!-- File -->\n @if (notif.data?.file) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n </div>\n <cide-ele-icon class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n </div>\n }\n \n <!-- Action Buttons -->\n @if (notif.action_label) {\n <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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-dropdown-container{position:relative;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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.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){.cide-lyt-header{padding:.5rem .75rem;flex-wrap:wrap;min-height:56px;height:auto}.header-logo-container{padding:.25rem 0}.header-logo-container img,.header-logo-container cide-ele-icon{width:24px;height:24px}.header-logo-container+span{font-size:.875rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-search-container{order:3;flex:1 1 100%;max-width:100%;margin:.5rem 0 0;min-width:0}@media (max-width: 480px){.header-search-container{display:none}}.header-icons-container{gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.header-icon{width:28px;height:28px;margin:0 1px}.header-year-pill{padding:.2rem .5rem;font-size:.625rem;min-height:20px;height:20px}.header-year-pill-text{max-width:80px}.profile-avatar{width:24px;height:24px;font-size:.625rem}.header-divider{display:none}.header-dropdown-container{margin:0 1px}.header-badge{min-width:16px;height:16px;font-size:9px;top:-1px;right:-1px}}@media (max-width: 640px){.cide-lyt-header{padding:.5rem}.header-search-container{max-width:100%;margin:.5rem 0 0}.header-icon{width:26px;height:26px}@media (max-width: 480px){.header-year-pill-text{display:none}.header-year-pill{padding:.2rem;width:28px;justify-content:center}.header-icons-container{gap:.25rem}}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:48px;padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\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", "step", "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"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
3502
3503
|
}
|
|
3503
3504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
|
|
3504
3505
|
type: Component,
|
|
3505
3506
|
args: [{ selector: 'cide-lyt-header-wrapper', imports: [CideInputComponent, CommonModule, CideIconComponent,
|
|
3506
|
-
CideEleDropdownComponent, CideEleFileImageDirective], 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=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n #notificationDropdown\n [items]=\"notificationItems()\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n <!-- Header - Fixed/Sticky -->\n <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n }\n </div>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n <button \n type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n title=\"Notification Settings\">\n <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n </button>\n @if (unreadCount() > 0) {\n <button \n type=\"button\"\n class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n (click)=\"markAllAsRead(); $event.stopPropagation()\"\n title=\"Mark all as read\">\n <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n </button>\n }\n <button \n type=\"button\" \n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n (click)=\"closeNotificationDropdown($event)\"\n title=\"Close\">\n <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Notifications List -->\n <div class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n @if (notifications().length === 0) {\n <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No notifications yet</p>\n <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught up!</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div \n class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\n [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n [class.tw-bg-blue-50]=\"!isNotificationRead(notif)\"\n [class.dark:tw-bg-gray-700]=\"!isNotificationRead(notif)\"\n [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Icon/Avatar -->\n <div class=\"tw-flex-shrink-0 tw-relative\">\n <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n @if (getNotificationAvatar(notif)) {\n <img \n cideEleFileImage \n [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\"\n class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n }\n </div>\n <!-- Green online indicator -->\n <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <!-- Title and relative time -->\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n </h4>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n @if (!isNotificationRead(notif)) {\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n }\n @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n <button \n type=\"button\"\n (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n Undo\n </button>\n }\n </div>\n </div>\n \n <!-- Message -->\n @if (notif.message && notif.message !== notif.title) {\n <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n {{ notif.message }}\n </p>\n }\n \n <!-- Comment -->\n @if (notif.data?.comment) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n </div>\n }\n \n <!-- File -->\n @if (notif.data?.file) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n </div>\n <cide-ele-icon class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n </div>\n }\n \n <!-- Action Buttons -->\n @if (notif.action_label) {\n <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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-dropdown-container{position:relative;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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.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}}.notification-scroll-container{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\n"] }]
|
|
3507
|
+
CideEleDropdownComponent, CideEleFileImageDirective], 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=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n #notificationDropdown\n [items]=\"notificationItems()\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n <!-- Header - Fixed/Sticky -->\n <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n }\n </div>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n <button \n type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n title=\"Notification Settings\">\n <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n </button>\n @if (unreadCount() > 0) {\n <button \n type=\"button\"\n class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n (click)=\"markAllAsRead(); $event.stopPropagation()\"\n title=\"Mark all as read\">\n <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n </button>\n }\n <button \n type=\"button\" \n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n (click)=\"closeNotificationDropdown($event)\"\n title=\"Close\">\n <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Notifications List -->\n <div class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n @if (notifications().length === 0) {\n <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No notifications yet</p>\n <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught up!</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div \n class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\n [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n [class.tw-bg-blue-50]=\"!isNotificationRead(notif)\"\n [class.dark:tw-bg-gray-700]=\"!isNotificationRead(notif)\"\n [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Icon/Avatar -->\n <div class=\"tw-flex-shrink-0 tw-relative\">\n <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n @if (getNotificationAvatar(notif)) {\n <img \n cideEleFileImage \n [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\"\n class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n }\n </div>\n <!-- Green online indicator -->\n <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n </div>\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <!-- Title and relative time -->\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n </h4>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n @if (!isNotificationRead(notif)) {\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n }\n @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n <button \n type=\"button\"\n (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n Undo\n </button>\n }\n </div>\n </div>\n \n <!-- Message -->\n @if (notif.message && notif.message !== notif.title) {\n <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n {{ notif.message }}\n </p>\n }\n \n <!-- Comment -->\n @if (notif.data?.comment) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n </div>\n }\n \n <!-- File -->\n @if (notif.data?.file) {\n <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n </div>\n <cide-ele-icon class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n </div>\n }\n \n <!-- Action Buttons -->\n @if (notif.action_label) {\n <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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-dropdown-container{position:relative;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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.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){.cide-lyt-header{padding:.5rem .75rem;flex-wrap:wrap;min-height:56px;height:auto}.header-logo-container{padding:.25rem 0}.header-logo-container img,.header-logo-container cide-ele-icon{width:24px;height:24px}.header-logo-container+span{font-size:.875rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-search-container{order:3;flex:1 1 100%;max-width:100%;margin:.5rem 0 0;min-width:0}@media (max-width: 480px){.header-search-container{display:none}}.header-icons-container{gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.header-icon{width:28px;height:28px;margin:0 1px}.header-year-pill{padding:.2rem .5rem;font-size:.625rem;min-height:20px;height:20px}.header-year-pill-text{max-width:80px}.profile-avatar{width:24px;height:24px;font-size:.625rem}.header-divider{display:none}.header-dropdown-container{margin:0 1px}.header-badge{min-width:16px;height:16px;font-size:9px;top:-1px;right:-1px}}@media (max-width: 640px){.cide-lyt-header{padding:.5rem}.header-search-container{max-width:100%;margin:.5rem 0 0}.header-icon{width:26px;height:26px}@media (max-width: 480px){.header-year-pill-text{display:none}.header-year-pill{padding:.2rem;width:28px;justify-content:center}.header-icons-container{gap:.25rem}}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:48px;padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\n"] }]
|
|
3507
3508
|
}], ctorParameters: () => [], propDecorators: { triggerTemplate: [{
|
|
3508
3509
|
type: ViewChild,
|
|
3509
3510
|
args: ['triggerTemplate']
|
|
@@ -4181,7 +4182,7 @@ class CideLytSidebarWrapperComponent {
|
|
|
4181
4182
|
}
|
|
4182
4183
|
}
|
|
4183
4184
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4184
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n <!-- First tier sidebar (Icon only) -->\n <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n <!-- Scrollable content -->\n <div class=\"sidebar-scroll-content\">\n <!-- Collapse/Expand toggle -->\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n (keydown.enter)=\"toggleSidebar()\">\n <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n </cide-ele-icon>\n </div> <!-- Main navigation icons - Enhanced Design -->\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\n @for (core_system_module_item of core_system_module(); track $index) {\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n tooltipPlacement=\"right\"\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n <!-- Notification Badge with enhanced design -->\n @if (core_system_module_item?.syme_ping) {\n <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n style=\"background-color: var(--cide-theme-error-color);\">\n </div>\n }\n\n <!-- Enhanced icon with better visual effects -->\n <div\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n tw-border-2 tw-border-transparent\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n <cide-ele-icon type=\"box\" size=\"xs\"\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n {{core_system_module_item?.syme_icon || 'dashboard'}}\n </cide-ele-icon>\n </div>\n\n <!-- Modern active indicator -->\n @if (activeModuleId === core_system_module_item._id) {\n <div\n class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div> <!-- Second tier sidebar (Expanded view) -->\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n <div class=\"tw-flex tw-flex-col tw-h-full\">\n <!-- Header section with search and options -->\n <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n <!-- Title with back button - Clean layout without online indicator -->\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n <button\n class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n getActiveModuleIcon() }}</cide-ele-icon>\n </button>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n {{ appState.getActiveModuleTitle() || 'Menu' }}\n </h2>\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n Module Dashboard\n </p>\n </div>\n </div>\n\n <!-- Search and options -->\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"search-wrapper tw-relative tw-flex-1\">\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n </cide-ele-input>\n <div\n class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n \u2318K</div>\n </div>\n <button\n class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n (click)=\"toggleOptions()\">\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n </button>\n\n <!-- Options dropdown menu -->\n <div *ngIf=\"showOptions()\"\n class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n Refresh\n </a>\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\n Sync settings\n </a>\n </div>\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n Help & support\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Menu items with categories -->\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n <!-- Search results if searching -->\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n </div>\n\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{item.icon}}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n </a>\n </div>\n\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n </div>\n </div>\n\n <!-- Only show these sections if not searching -->\n <ng-container *ngIf=\"!searchText()\">\n <!-- Loading state -->\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n </div>\n\n <!-- Dynamic menu tree -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n [class.animate-in]=\"animateSections()[0]\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n </div>\n\n <!-- Empty state -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n </div>\n </ng-container>\n\n <!-- Recursive menu template -->\n <ng-template #recursiveMenu let-menus let-level=\"level\">\n <div [class.tw-ml-0]=\"level > 0\">\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n <!-- Title type items (section headers) -->\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n menu.syme_title }}</h3>\n <!-- Render children of title -->\n <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Section type items (collapsible sections) -->\n <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n <!-- Section header (clickable to expand/collapse) -->\n <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n (keydown.space)=\"toggleSection(menu._id)\"\n class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n <!-- Section Icon (left side, like other menu items) -->\n <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n }}</span>\n\n <!-- Right side icons container -->\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n {{ menu.children.length }}\n </span>\n\n <!-- Expand/Collapse Icon (right side) -->\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </div>\n </button>\n\n <!-- Section Content (collapsible) -->\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </div>\n </div>\n\n <!-- Menu type items (clickable links) -->\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\" tabindex=\"0\"\n role=\"button\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </a>\n\n <!-- Render nested children for menu items -->\n <ng-container\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- Notification panel (overlays content when shown) -->\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n (click)=\"toggleNotificationsPanel()\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n @for (notification of notifications(); track notification.id) {\n <div \n [@notificationRemove]=\"notification.state\"\n class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n [class.tw-border-blue-500]=\"notification.unread\"\n [class.tw-border-transparent]=\"!notification.unread\"\n [class.tw-bg-blue-50]=\"notification.unread\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n [class.tw-bg-blue-100]=\"notification.unread\"\n [class.tw-bg-gray-100]=\"!notification.unread\"\n [class.tw-text-blue-500]=\"notification.unread\"\n [class.tw-text-gray-500]=\"!notification.unread\">\n <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n </div>\n <button \n class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n (click)=\"removeNotification(notification.id)\"\n title=\"Remove notification\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n @if (notifications().length === 0) {\n <div class=\"tw-p-8 tw-text-center\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n <!-- for info display -->\n </div>\n </div>\n </div>\n\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
|
|
4185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n <!-- First tier sidebar (Icon only) -->\n <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n <!-- Scrollable content -->\n <div class=\"sidebar-scroll-content\">\n <!-- Collapse/Expand toggle -->\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n (keydown.enter)=\"toggleSidebar()\">\n <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n </cide-ele-icon>\n </div> <!-- Main navigation icons - Enhanced Design -->\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\n @for (core_system_module_item of core_system_module(); track $index) {\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n tooltipPlacement=\"right\"\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n <!-- Notification Badge with enhanced design -->\n @if (core_system_module_item?.syme_ping) {\n <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n style=\"background-color: var(--cide-theme-error-color);\">\n </div>\n }\n\n <!-- Enhanced icon with better visual effects -->\n <div\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n tw-border-2 tw-border-transparent\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n <cide-ele-icon type=\"box\" size=\"xs\"\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n {{core_system_module_item?.syme_icon || 'dashboard'}}\n </cide-ele-icon>\n </div>\n\n <!-- Modern active indicator -->\n @if (activeModuleId === core_system_module_item._id) {\n <div\n class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div> <!-- Second tier sidebar (Expanded view) -->\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n <div class=\"tw-flex tw-flex-col tw-h-full\">\n <!-- Header section with search and options -->\n <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n <!-- Title with back button - Clean layout without online indicator -->\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n <button\n class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n getActiveModuleIcon() }}</cide-ele-icon>\n </button>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n {{ appState.getActiveModuleTitle() || 'Menu' }}\n </h2>\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n Module Dashboard\n </p>\n </div>\n </div>\n\n <!-- Search and options -->\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"search-wrapper tw-relative tw-flex-1\">\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n </cide-ele-input>\n <div\n class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n \u2318K</div>\n </div>\n <button\n class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n (click)=\"toggleOptions()\">\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n </button>\n\n <!-- Options dropdown menu -->\n <div *ngIf=\"showOptions()\"\n class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n Refresh\n </a>\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\n Sync settings\n </a>\n </div>\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n Help & support\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Menu items with categories -->\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n <!-- Search results if searching -->\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n </div>\n\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{item.icon}}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n </a>\n </div>\n\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n </div>\n </div>\n\n <!-- Only show these sections if not searching -->\n <ng-container *ngIf=\"!searchText()\">\n <!-- Loading state -->\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n </div>\n\n <!-- Dynamic menu tree -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n [class.animate-in]=\"animateSections()[0]\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n </div>\n\n <!-- Empty state -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n </div>\n </ng-container>\n\n <!-- Recursive menu template -->\n <ng-template #recursiveMenu let-menus let-level=\"level\">\n <div [class.tw-ml-0]=\"level > 0\">\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n <!-- Title type items (section headers) -->\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n menu.syme_title }}</h3>\n <!-- Render children of title -->\n <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Section type items (collapsible sections) -->\n <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n <!-- Section header (clickable to expand/collapse) -->\n <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n (keydown.space)=\"toggleSection(menu._id)\"\n class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n <!-- Section Icon (left side, like other menu items) -->\n <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n }}</span>\n\n <!-- Right side icons container -->\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n {{ menu.children.length }}\n </span>\n\n <!-- Expand/Collapse Icon (right side) -->\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </div>\n </button>\n\n <!-- Section Content (collapsible) -->\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </div>\n </div>\n\n <!-- Menu type items (clickable links) -->\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\" tabindex=\"0\"\n role=\"button\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </a>\n\n <!-- Render nested children for menu items -->\n <ng-container\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- Notification panel (overlays content when shown) -->\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n (click)=\"toggleNotificationsPanel()\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n @for (notification of notifications(); track notification.id) {\n <div \n [@notificationRemove]=\"notification.state\"\n class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n [class.tw-border-blue-500]=\"notification.unread\"\n [class.tw-border-transparent]=\"!notification.unread\"\n [class.tw-bg-blue-50]=\"notification.unread\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n [class.tw-bg-blue-100]=\"notification.unread\"\n [class.tw-bg-gray-100]=\"!notification.unread\"\n [class.tw-text-blue-500]=\"notification.unread\"\n [class.tw-text-gray-500]=\"!notification.unread\">\n <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n </div>\n <button \n class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n (click)=\"removeNotification(notification.id)\"\n title=\"Remove notification\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n @if (notifications().length === 0) {\n <div class=\"tw-p-8 tw-text-center\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n <!-- for info display -->\n </div>\n </div>\n </div>\n\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;z-index:40;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);width:auto;min-width:auto}.cide-lyt-sidebar.mobile-open{transform:translate(0)}.cide-lyt-sidebar.collapsed{transform:translate(-100%)}.cide-lyt-stack{width:64px;min-width:64px;flex-shrink:0}.cide-lyt-sidebar-menu{position:relative;width:100%;max-width:280px;min-width:240px;left:0;top:0;height:100%;z-index:1;box-shadow:2px 0 10px #0000001a;border-radius:0;transform:none;opacity:1;visibility:visible}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{display:none}.sidebar-content{padding:.5rem}.nav-item{width:40px;height:40px;margin:6px 0}.menu-item{padding:.75rem .5rem;margin:3px 0;min-height:44px}.sidebar-overlay{position:fixed;inset:0;background-color:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}.user-menu,.options-menu{width:12rem;max-width:calc(100vw - 2rem)}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;padding:.5rem .75rem}.notification-panel{width:100%;max-width:100%;padding:.5rem}}@media screen and (max-width: 480px){.cide-lyt-sidebar-menu{max-width:260px;min-width:220px}.cide-lyt-stack{width:56px;min-width:56px}.sidebar-content{padding:.375rem}.menu-item{padding:.625rem .375rem;font-size:.875rem}.user-avatar{width:2rem;height:2rem}.notification-panel{padding:.375rem}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-sidebar-menu{max-width:300px}.sidebar-content{padding:.5rem}.nav-item{margin:4px 0}.menu-item{padding:.625rem .5rem}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
|
|
4185
4186
|
trigger('slideInOut', [
|
|
4186
4187
|
state('in', style({
|
|
4187
4188
|
opacity: 1,
|
|
@@ -4253,7 +4254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
4253
4254
|
transition('visible => removing', animate('300ms ease-in-out')),
|
|
4254
4255
|
transition('* => visible', animate('200ms ease-out'))
|
|
4255
4256
|
])
|
|
4256
|
-
], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n <!-- First tier sidebar (Icon only) -->\n <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n <!-- Scrollable content -->\n <div class=\"sidebar-scroll-content\">\n <!-- Collapse/Expand toggle -->\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n (keydown.enter)=\"toggleSidebar()\">\n <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n </cide-ele-icon>\n </div> <!-- Main navigation icons - Enhanced Design -->\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\n @for (core_system_module_item of core_system_module(); track $index) {\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n tooltipPlacement=\"right\"\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n <!-- Notification Badge with enhanced design -->\n @if (core_system_module_item?.syme_ping) {\n <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n style=\"background-color: var(--cide-theme-error-color);\">\n </div>\n }\n\n <!-- Enhanced icon with better visual effects -->\n <div\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n tw-border-2 tw-border-transparent\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n <cide-ele-icon type=\"box\" size=\"xs\"\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n {{core_system_module_item?.syme_icon || 'dashboard'}}\n </cide-ele-icon>\n </div>\n\n <!-- Modern active indicator -->\n @if (activeModuleId === core_system_module_item._id) {\n <div\n class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div> <!-- Second tier sidebar (Expanded view) -->\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n <div class=\"tw-flex tw-flex-col tw-h-full\">\n <!-- Header section with search and options -->\n <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n <!-- Title with back button - Clean layout without online indicator -->\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n <button\n class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n getActiveModuleIcon() }}</cide-ele-icon>\n </button>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n {{ appState.getActiveModuleTitle() || 'Menu' }}\n </h2>\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n Module Dashboard\n </p>\n </div>\n </div>\n\n <!-- Search and options -->\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"search-wrapper tw-relative tw-flex-1\">\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n </cide-ele-input>\n <div\n class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n \u2318K</div>\n </div>\n <button\n class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n (click)=\"toggleOptions()\">\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n </button>\n\n <!-- Options dropdown menu -->\n <div *ngIf=\"showOptions()\"\n class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n Refresh\n </a>\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\n Sync settings\n </a>\n </div>\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n Help & support\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Menu items with categories -->\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n <!-- Search results if searching -->\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n </div>\n\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{item.icon}}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n </a>\n </div>\n\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n </div>\n </div>\n\n <!-- Only show these sections if not searching -->\n <ng-container *ngIf=\"!searchText()\">\n <!-- Loading state -->\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n </div>\n\n <!-- Dynamic menu tree -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n [class.animate-in]=\"animateSections()[0]\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n </div>\n\n <!-- Empty state -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n </div>\n </ng-container>\n\n <!-- Recursive menu template -->\n <ng-template #recursiveMenu let-menus let-level=\"level\">\n <div [class.tw-ml-0]=\"level > 0\">\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n <!-- Title type items (section headers) -->\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n menu.syme_title }}</h3>\n <!-- Render children of title -->\n <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Section type items (collapsible sections) -->\n <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n <!-- Section header (clickable to expand/collapse) -->\n <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n (keydown.space)=\"toggleSection(menu._id)\"\n class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n <!-- Section Icon (left side, like other menu items) -->\n <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n }}</span>\n\n <!-- Right side icons container -->\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n {{ menu.children.length }}\n </span>\n\n <!-- Expand/Collapse Icon (right side) -->\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </div>\n </button>\n\n <!-- Section Content (collapsible) -->\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </div>\n </div>\n\n <!-- Menu type items (clickable links) -->\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\" tabindex=\"0\"\n role=\"button\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </a>\n\n <!-- Render nested children for menu items -->\n <ng-container\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- Notification panel (overlays content when shown) -->\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n (click)=\"toggleNotificationsPanel()\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n @for (notification of notifications(); track notification.id) {\n <div \n [@notificationRemove]=\"notification.state\"\n class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n [class.tw-border-blue-500]=\"notification.unread\"\n [class.tw-border-transparent]=\"!notification.unread\"\n [class.tw-bg-blue-50]=\"notification.unread\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n [class.tw-bg-blue-100]=\"notification.unread\"\n [class.tw-bg-gray-100]=\"!notification.unread\"\n [class.tw-text-blue-500]=\"notification.unread\"\n [class.tw-text-gray-500]=\"!notification.unread\">\n <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n </div>\n <button \n class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n (click)=\"removeNotification(notification.id)\"\n title=\"Remove notification\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n @if (notifications().length === 0) {\n <div class=\"tw-p-8 tw-text-center\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n <!-- for info display -->\n </div>\n </div>\n </div>\n\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
|
|
4257
|
+
], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n <!-- First tier sidebar (Icon only) -->\n <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n <!-- Scrollable content -->\n <div class=\"sidebar-scroll-content\">\n <!-- Collapse/Expand toggle -->\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n (keydown.enter)=\"toggleSidebar()\">\n <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n </cide-ele-icon>\n </div> <!-- Main navigation icons - Enhanced Design -->\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\n @for (core_system_module_item of core_system_module(); track $index) {\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n tooltipPlacement=\"right\"\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n <!-- Notification Badge with enhanced design -->\n @if (core_system_module_item?.syme_ping) {\n <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n style=\"background-color: var(--cide-theme-error-color);\">\n </div>\n }\n\n <!-- Enhanced icon with better visual effects -->\n <div\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n tw-border-2 tw-border-transparent\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n <cide-ele-icon type=\"box\" size=\"xs\"\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n {{core_system_module_item?.syme_icon || 'dashboard'}}\n </cide-ele-icon>\n </div>\n\n <!-- Modern active indicator -->\n @if (activeModuleId === core_system_module_item._id) {\n <div\n class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div> <!-- Second tier sidebar (Expanded view) -->\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n <div class=\"tw-flex tw-flex-col tw-h-full\">\n <!-- Header section with search and options -->\n <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n <!-- Title with back button - Clean layout without online indicator -->\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n <button\n class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n getActiveModuleIcon() }}</cide-ele-icon>\n </button>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n {{ appState.getActiveModuleTitle() || 'Menu' }}\n </h2>\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n Module Dashboard\n </p>\n </div>\n </div>\n\n <!-- Search and options -->\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"search-wrapper tw-relative tw-flex-1\">\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n </cide-ele-input>\n <div\n class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n \u2318K</div>\n </div>\n <button\n class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n (click)=\"toggleOptions()\">\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n </button>\n\n <!-- Options dropdown menu -->\n <div *ngIf=\"showOptions()\"\n class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n Refresh\n </a>\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\n Sync settings\n </a>\n </div>\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n Help & support\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Menu items with categories -->\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n <!-- Search results if searching -->\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n </div>\n\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{item.icon}}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n </a>\n </div>\n\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n </div>\n </div>\n\n <!-- Only show these sections if not searching -->\n <ng-container *ngIf=\"!searchText()\">\n <!-- Loading state -->\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n </div>\n\n <!-- Dynamic menu tree -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n [class.animate-in]=\"animateSections()[0]\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n </div>\n\n <!-- Empty state -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n </div>\n </ng-container>\n\n <!-- Recursive menu template -->\n <ng-template #recursiveMenu let-menus let-level=\"level\">\n <div [class.tw-ml-0]=\"level > 0\">\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n <!-- Title type items (section headers) -->\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n menu.syme_title }}</h3>\n <!-- Render children of title -->\n <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n\n <!-- Section type items (collapsible sections) -->\n <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n <!-- Section header (clickable to expand/collapse) -->\n <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n (keydown.space)=\"toggleSection(menu._id)\"\n class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n <!-- Section Icon (left side, like other menu items) -->\n <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n }}</span>\n\n <!-- Right side icons container -->\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n {{ menu.children.length }}\n </span>\n\n <!-- Expand/Collapse Icon (right side) -->\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </div>\n </button>\n\n <!-- Section Content (collapsible) -->\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </div>\n </div>\n\n <!-- Menu type items (clickable links) -->\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\" tabindex=\"0\"\n role=\"button\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </a>\n\n <!-- Render nested children for menu items -->\n <ng-container\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- Notification panel (overlays content when shown) -->\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n (click)=\"toggleNotificationsPanel()\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n @for (notification of notifications(); track notification.id) {\n <div \n [@notificationRemove]=\"notification.state\"\n class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n [class.tw-border-blue-500]=\"notification.unread\"\n [class.tw-border-transparent]=\"!notification.unread\"\n [class.tw-bg-blue-50]=\"notification.unread\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n [class.tw-bg-blue-100]=\"notification.unread\"\n [class.tw-bg-gray-100]=\"!notification.unread\"\n [class.tw-text-blue-500]=\"notification.unread\"\n [class.tw-text-gray-500]=\"!notification.unread\">\n <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n </div>\n <button \n class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n (click)=\"removeNotification(notification.id)\"\n title=\"Remove notification\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n @if (notifications().length === 0) {\n <div class=\"tw-p-8 tw-text-center\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n <!-- for info display -->\n </div>\n </div>\n </div>\n\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;z-index:40;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);width:auto;min-width:auto}.cide-lyt-sidebar.mobile-open{transform:translate(0)}.cide-lyt-sidebar.collapsed{transform:translate(-100%)}.cide-lyt-stack{width:64px;min-width:64px;flex-shrink:0}.cide-lyt-sidebar-menu{position:relative;width:100%;max-width:280px;min-width:240px;left:0;top:0;height:100%;z-index:1;box-shadow:2px 0 10px #0000001a;border-radius:0;transform:none;opacity:1;visibility:visible}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{display:none}.sidebar-content{padding:.5rem}.nav-item{width:40px;height:40px;margin:6px 0}.menu-item{padding:.75rem .5rem;margin:3px 0;min-height:44px}.sidebar-overlay{position:fixed;inset:0;background-color:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}.user-menu,.options-menu{width:12rem;max-width:calc(100vw - 2rem)}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;padding:.5rem .75rem}.notification-panel{width:100%;max-width:100%;padding:.5rem}}@media screen and (max-width: 480px){.cide-lyt-sidebar-menu{max-width:260px;min-width:220px}.cide-lyt-stack{width:56px;min-width:56px}.sidebar-content{padding:.375rem}.menu-item{padding:.625rem .375rem;font-size:.875rem}.user-avatar{width:2rem;height:2rem}.notification-panel{padding:.375rem}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-sidebar-menu{max-width:300px}.sidebar-content{padding:.5rem}.nav-item{margin:4px 0}.menu-item{padding:.625rem .5rem}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
|
|
4257
4258
|
}], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
|
|
4258
4259
|
type: HostListener,
|
|
4259
4260
|
args: ['document:click', ['$event']]
|
|
@@ -4954,8 +4955,8 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
4954
4955
|
}
|
|
4955
4956
|
ngOnInit() {
|
|
4956
4957
|
// Initialize the component map (You'd likely populate this from a config or service)
|
|
4957
|
-
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-
|
|
4958
|
-
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-
|
|
4958
|
+
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-DMlbYKSS.mjs').then(m => m.CideLytSidedrawerNotesComponent);
|
|
4959
|
+
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-Gdug6J1K.mjs').then(m => m.CideLytDrawerThemeComponent);
|
|
4959
4960
|
}
|
|
4960
4961
|
async loadComponent(configFor) {
|
|
4961
4962
|
console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
|
|
@@ -5101,7 +5102,7 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
5101
5102
|
}
|
|
5102
5103
|
}
|
|
5103
5104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n <!-- Resizer Divider -->\r\n <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <!-- Main Icon Area -->\r\n <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n <button (click)=\"onItemClick(item)\"\r\n class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n [circle]=\"true\"></cide-ele-skeleton-loader>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n <div #notesContainer class=\"tw-h-full\">\r\n </div>\r\n </div>\r\n </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
|
|
5105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n <!-- Resizer Divider -->\r\n <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <!-- Main Icon Area -->\r\n <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n <button (click)=\"onItemClick(item)\"\r\n class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n [circle]=\"true\"></cide-ele-skeleton-loader>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n <div #notesContainer class=\"tw-h-full\">\r\n </div>\r\n </div>\r\n </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
|
|
5105
5106
|
}
|
|
5106
5107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, decorators: [{
|
|
5107
5108
|
type: Component,
|
|
@@ -5113,7 +5114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5113
5114
|
NgFor,
|
|
5114
5115
|
NgIf,
|
|
5115
5116
|
TooltipDirective
|
|
5116
|
-
], template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n <!-- Resizer Divider -->\r\n <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <!-- Main Icon Area -->\r\n <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n <button (click)=\"onItemClick(item)\"\r\n class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n [circle]=\"true\"></cide-ele-skeleton-loader>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n <div #notesContainer class=\"tw-h-full\">\r\n </div>\r\n </div>\r\n </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto}\n"] }]
|
|
5117
|
+
], template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n <!-- Resizer Divider -->\r\n <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <!-- Main Icon Area -->\r\n <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n <button (click)=\"onItemClick(item)\"\r\n class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n [circle]=\"true\"></cide-ele-skeleton-loader>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n <div #notesContainer class=\"tw-h-full\">\r\n </div>\r\n </div>\r\n </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"] }]
|
|
5117
5118
|
}], ctorParameters: () => [], propDecorators: { notesContainer: [{
|
|
5118
5119
|
type: ViewChild,
|
|
5119
5120
|
args: ['notesContainer', { read: ViewContainerRef }]
|
|
@@ -5842,20 +5843,20 @@ class CideLytFooterWrapperComponent {
|
|
|
5842
5843
|
this.floatingContainerService.bringToFront(containerId);
|
|
5843
5844
|
}
|
|
5844
5845
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5845
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
|
|
5846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>", styles: [".cide-footer{display:flex;align-items:center;justify-content:space-between;width:100%;height:20px;min-height:20px;padding:0 .5rem;background-color:var(--code-lyt-footer-wrapper-background-color, #f9fafb);border-top:1px solid var(--code-lyt-footer-wrapper-border-color, #e5e7eb);-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.cide-lyt-devider-track{width:100%;height:100%;background-color:transparent;cursor:row-resize;transition:background-color .2s ease}.cide-lyt-devider-track:hover{background-color:#3b82f61a}.cide-footer>div:last-child{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.cide-footer cide-ele-icon{transition:all .2s ease;cursor:pointer}.cide-footer cide-ele-icon:hover{transform:scale(1.1)}@media screen and (max-width: 768px){.cide-footer{height:24px;min-height:24px;padding:0 .5rem;font-size:.75rem}.cide-footer cide-ele-icon{font-size:.875rem}.cide-footer>div:last-child{gap:.5rem}.cide-footer .cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){.cide-footer{height:22px;min-height:22px;padding:0 .375rem}.cide-footer cide-ele-icon{font-size:.75rem}.cide-footer>div:last-child{gap:.375rem}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-footer{padding:0 .75rem}}:root[data-theme=dark] .cide-footer,:root.dark-mode .cide-footer{background-color:var(--code-lyt-footer-wrapper-background-color, #1f2937);border-top-color:var(--code-lyt-footer-wrapper-border-color, #374151)}:root[data-theme=dark] .cide-footer cide-ele-icon,:root.dark-mode .cide-footer cide-ele-icon{color:var(--cide-theme-icon-color, #9ca3af)}:root[data-theme=dark] .cide-footer cide-ele-icon:hover,:root.dark-mode .cide-footer cide-ele-icon:hover{color:var(--cide-theme-color-brand-primary, #60a5fa)}@media screen and (max-width: 768px) and (orientation: landscape){.cide-footer{height:20px;min-height:20px}}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
|
|
5846
5847
|
}
|
|
5847
5848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
|
|
5848
5849
|
type: Component,
|
|
5849
|
-
args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>" }]
|
|
5850
|
+
args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>", styles: [".cide-footer{display:flex;align-items:center;justify-content:space-between;width:100%;height:20px;min-height:20px;padding:0 .5rem;background-color:var(--code-lyt-footer-wrapper-background-color, #f9fafb);border-top:1px solid var(--code-lyt-footer-wrapper-border-color, #e5e7eb);-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.cide-lyt-devider-track{width:100%;height:100%;background-color:transparent;cursor:row-resize;transition:background-color .2s ease}.cide-lyt-devider-track:hover{background-color:#3b82f61a}.cide-footer>div:last-child{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.cide-footer cide-ele-icon{transition:all .2s ease;cursor:pointer}.cide-footer cide-ele-icon:hover{transform:scale(1.1)}@media screen and (max-width: 768px){.cide-footer{height:24px;min-height:24px;padding:0 .5rem;font-size:.75rem}.cide-footer cide-ele-icon{font-size:.875rem}.cide-footer>div:last-child{gap:.5rem}.cide-footer .cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){.cide-footer{height:22px;min-height:22px;padding:0 .375rem}.cide-footer cide-ele-icon{font-size:.75rem}.cide-footer>div:last-child{gap:.375rem}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-footer{padding:0 .75rem}}:root[data-theme=dark] .cide-footer,:root.dark-mode .cide-footer{background-color:var(--code-lyt-footer-wrapper-background-color, #1f2937);border-top-color:var(--code-lyt-footer-wrapper-border-color, #374151)}:root[data-theme=dark] .cide-footer cide-ele-icon,:root.dark-mode .cide-footer cide-ele-icon{color:var(--cide-theme-icon-color, #9ca3af)}:root[data-theme=dark] .cide-footer cide-ele-icon:hover,:root.dark-mode .cide-footer cide-ele-icon:hover{color:var(--cide-theme-color-brand-primary, #60a5fa)}@media screen and (max-width: 768px) and (orientation: landscape){.cide-footer{height:20px;min-height:20px}}\n"] }]
|
|
5850
5851
|
}], ctorParameters: () => [] });
|
|
5851
5852
|
|
|
5852
5853
|
class CideLytConsoleWrapperComponent {
|
|
5853
5854
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5854
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytConsoleWrapperComponent, isStandalone: true, selector: "cide-lyt-console-wrapper", ngImport: i0, template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: [""] });
|
|
5855
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytConsoleWrapperComponent, isStandalone: true, selector: "cide-lyt-console-wrapper", ngImport: i0, template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: ["#cide-lyt-console-wrapper{position:absolute;bottom:0;left:0;right:0;width:100%;height:0;min-height:0;background-color:#f9fafb;border-top:1px solid #e5e7eb;display:flex;align-items:center;padding:0 .75rem;z-index:100;-webkit-user-select:none;user-select:none;transition:height .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-sizing:border-box}.cide-lyt-console-wrapper-hide{display:none!important}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){height:auto;min-height:40px;max-height:50vh;overflow-y:auto}@media screen and (max-width: 768px){#cide-lyt-console-wrapper{padding:.5rem;font-size:.75rem;border-top-width:1px}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){min-height:36px;max-height:40vh}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 480px){#cide-lyt-console-wrapper{padding:.375rem;font-size:.7rem}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){min-height:32px;max-height:35vh}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-console-wrapper{padding:.625rem}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){max-height:45vh}}:root[data-theme=dark] #cide-lyt-console-wrapper,:root.dark-mode #cide-lyt-console-wrapper{background-color:#1f2937;border-top-color:#374151;color:#e5e7eb}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){max-height:30vh}}#cide-lyt-console-wrapper::-webkit-scrollbar{width:6px;height:6px}#cide-lyt-console-wrapper::-webkit-scrollbar-track{background:transparent}#cide-lyt-console-wrapper::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}#cide-lyt-console-wrapper::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] #cide-lyt-console-wrapper::-webkit-scrollbar-thumb,:root.dark-mode #cide-lyt-console-wrapper::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] #cide-lyt-console-wrapper::-webkit-scrollbar-thumb:hover,:root.dark-mode #cide-lyt-console-wrapper::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"] });
|
|
5855
5856
|
}
|
|
5856
5857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleWrapperComponent, decorators: [{
|
|
5857
5858
|
type: Component,
|
|
5858
|
-
args: [{ selector: 'cide-lyt-console-wrapper', standalone: true, imports: [], template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->" }]
|
|
5859
|
+
args: [{ selector: 'cide-lyt-console-wrapper', standalone: true, imports: [], template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: ["#cide-lyt-console-wrapper{position:absolute;bottom:0;left:0;right:0;width:100%;height:0;min-height:0;background-color:#f9fafb;border-top:1px solid #e5e7eb;display:flex;align-items:center;padding:0 .75rem;z-index:100;-webkit-user-select:none;user-select:none;transition:height .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-sizing:border-box}.cide-lyt-console-wrapper-hide{display:none!important}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){height:auto;min-height:40px;max-height:50vh;overflow-y:auto}@media screen and (max-width: 768px){#cide-lyt-console-wrapper{padding:.5rem;font-size:.75rem;border-top-width:1px}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){min-height:36px;max-height:40vh}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 480px){#cide-lyt-console-wrapper{padding:.375rem;font-size:.7rem}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){min-height:32px;max-height:35vh}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-console-wrapper{padding:.625rem}#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){max-height:45vh}}:root[data-theme=dark] #cide-lyt-console-wrapper,:root.dark-mode #cide-lyt-console-wrapper{background-color:#1f2937;border-top-color:#374151;color:#e5e7eb}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-console-wrapper:not(.cide-lyt-console-wrapper-hide){max-height:30vh}}#cide-lyt-console-wrapper::-webkit-scrollbar{width:6px;height:6px}#cide-lyt-console-wrapper::-webkit-scrollbar-track{background:transparent}#cide-lyt-console-wrapper::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}#cide-lyt-console-wrapper::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] #cide-lyt-console-wrapper::-webkit-scrollbar-thumb,:root.dark-mode #cide-lyt-console-wrapper::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] #cide-lyt-console-wrapper::-webkit-scrollbar-thumb:hover,:root.dark-mode #cide-lyt-console-wrapper::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"] }]
|
|
5859
5860
|
}] });
|
|
5860
5861
|
|
|
5861
5862
|
class CideLytRequestWrapperComponent {
|
|
@@ -5901,11 +5902,11 @@ class CideLytRequestWrapperComponent {
|
|
|
5901
5902
|
}
|
|
5902
5903
|
}
|
|
5903
5904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5904
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytRequestWrapperComponent, isStandalone: true, selector: "cide-lyt-request-wrapper", viewQueries: [{ propertyName: "requestItemElements", predicate: ["requestItemEl"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"requestItems() as requestItems\">\r\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\r\n <div class=\"request-content\">\r\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\r\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [attr.data-tooltip]=\"item.title\">\r\n <span class=\"request-title\">{{ item.title }}</span>\r\n <button class=\"request-action close-action\" \r\n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\r\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \r\n tabindex=\"0\"\r\n data-tooltip=\"Close this tab\">\r\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n <!-- Only add divider between items -->\r\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.request-content{display:flex;align-items:center;height:100%;width:100%;max-width:100%;position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-sizing:border-box}.request-content::-webkit-scrollbar{height:4px}.request-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.request-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:2px;opacity:.7}.request-content::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4);flex-shrink:0;white-space:nowrap;min-width:fit-content}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media (max-width: 640px){.request-title{max-width:80px}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
5905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytRequestWrapperComponent, isStandalone: true, selector: "cide-lyt-request-wrapper", viewQueries: [{ propertyName: "requestItemElements", predicate: ["requestItemEl"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"requestItems() as requestItems\">\r\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\r\n <div class=\"request-content\">\r\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\r\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [attr.data-tooltip]=\"item.title\">\r\n <span class=\"request-title\">{{ item.title }}</span>\r\n <button class=\"request-action close-action\" \r\n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\r\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \r\n tabindex=\"0\"\r\n data-tooltip=\"Close this tab\">\r\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n <!-- Only add divider between items -->\r\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.request-content{display:flex;align-items:center;height:100%;width:100%;max-width:100%;position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-sizing:border-box}.request-content::-webkit-scrollbar{height:4px}.request-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.request-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:2px;opacity:.7}.request-content::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4);flex-shrink:0;white-space:nowrap;min-width:fit-content}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media screen and (max-width: 768px){.cide-lyt-request{height:22px;padding:0 .5rem;min-height:22px}.request-item{padding:6px 10px;margin:0 3px;border-radius:.25rem;min-height:20px}.request-title{font-size:.65rem;max-width:100px;margin-right:.375rem}.request-action{width:12px;height:12px;min-width:12px;min-height:12px}.request-divider{height:16px;margin:0 2px}.request-content{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-behavior:smooth}.request-item{min-width:80px;touch-action:manipulation}.request-action,.request-add-action{min-width:28px;min-height:28px;touch-action:manipulation}}@media screen and (max-width: 480px){.cide-lyt-request{height:24px;padding:0 .375rem;min-height:24px}.request-item{padding:5px 8px;margin:0 2px;min-width:70px}.request-title{font-size:.6rem;max-width:80px;margin-right:.25rem}.request-action{width:14px;height:14px}.request-divider{height:14px;margin:0 1px}.request-divider{display:none}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-lyt-request{height:21px;padding:0 .625rem}.request-item{padding:7px 11px}.request-title{font-size:.7rem;max-width:110px}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-request{height:20px;min-height:20px}.request-item{padding:5px 9px}.request-title{max-width:90px}}@media (hover: none) and (pointer: coarse){.request-item{min-height:32px;padding:8px 12px}.request-action,.request-add-action{min-width:32px;min-height:32px}.request-item:hover{transform:none}.request-item:active{transform:scale(.98);background-color:#fffffff2}.request-action:active,.request-add-action:active{transform:scale(.95)}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
5905
5906
|
}
|
|
5906
5907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestWrapperComponent, decorators: [{
|
|
5907
5908
|
type: Component,
|
|
5908
|
-
args: [{ selector: 'cide-lyt-request-wrapper', standalone: true, imports: [CommonModule, CideIconComponent], template: "<ng-container *ngIf=\"requestItems() as requestItems\">\r\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\r\n <div class=\"request-content\">\r\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\r\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [attr.data-tooltip]=\"item.title\">\r\n <span class=\"request-title\">{{ item.title }}</span>\r\n <button class=\"request-action close-action\" \r\n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\r\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \r\n tabindex=\"0\"\r\n data-tooltip=\"Close this tab\">\r\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n <!-- Only add divider between items -->\r\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.request-content{display:flex;align-items:center;height:100%;width:100%;max-width:100%;position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-sizing:border-box}.request-content::-webkit-scrollbar{height:4px}.request-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.request-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:2px;opacity:.7}.request-content::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4);flex-shrink:0;white-space:nowrap;min-width:fit-content}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media (max-width: 640px){.request-title{max-width:80px}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"] }]
|
|
5909
|
+
args: [{ selector: 'cide-lyt-request-wrapper', standalone: true, imports: [CommonModule, CideIconComponent], template: "<ng-container *ngIf=\"requestItems() as requestItems\">\r\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\r\n <div class=\"request-content\">\r\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\r\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [attr.data-tooltip]=\"item.title\">\r\n <span class=\"request-title\">{{ item.title }}</span>\r\n <button class=\"request-action close-action\" \r\n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\r\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \r\n tabindex=\"0\"\r\n data-tooltip=\"Close this tab\">\r\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n <!-- Only add divider between items -->\r\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.request-content{display:flex;align-items:center;height:100%;width:100%;max-width:100%;position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-sizing:border-box}.request-content::-webkit-scrollbar{height:4px}.request-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.request-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:2px;opacity:.7}.request-content::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4);flex-shrink:0;white-space:nowrap;min-width:fit-content}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media screen and (max-width: 768px){.cide-lyt-request{height:22px;padding:0 .5rem;min-height:22px}.request-item{padding:6px 10px;margin:0 3px;border-radius:.25rem;min-height:20px}.request-title{font-size:.65rem;max-width:100px;margin-right:.375rem}.request-action{width:12px;height:12px;min-width:12px;min-height:12px}.request-divider{height:16px;margin:0 2px}.request-content{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-behavior:smooth}.request-item{min-width:80px;touch-action:manipulation}.request-action,.request-add-action{min-width:28px;min-height:28px;touch-action:manipulation}}@media screen and (max-width: 480px){.cide-lyt-request{height:24px;padding:0 .375rem;min-height:24px}.request-item{padding:5px 8px;margin:0 2px;min-width:70px}.request-title{font-size:.6rem;max-width:80px;margin-right:.25rem}.request-action{width:14px;height:14px}.request-divider{height:14px;margin:0 1px}.request-divider{display:none}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-lyt-request{height:21px;padding:0 .625rem}.request-item{padding:7px 11px}.request-title{font-size:.7rem;max-width:110px}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-request{height:20px;min-height:20px}.request-item{padding:5px 9px}.request-title{max-width:90px}}@media (hover: none) and (pointer: coarse){.request-item{min-height:32px;padding:8px 12px}.request-action,.request-add-action{min-width:32px;min-height:32px}.request-item:hover{transform:none}.request-item:active{transform:scale(.98);background-color:#fffffff2}.request-action:active,.request-add-action:active{transform:scale(.95)}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"] }]
|
|
5909
5910
|
}], propDecorators: { requestItemElements: [{
|
|
5910
5911
|
type: ViewChildren,
|
|
5911
5912
|
args: ['requestItemEl']
|
|
@@ -5994,7 +5995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5994
5995
|
|
|
5995
5996
|
class CideLytLayoutWrapperComponent {
|
|
5996
5997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytLayoutWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5997
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n <!-- We will use here Header -->\r\n <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n <!-- we will use here request tabs -->\r\n <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n <!-- We will use here Sidebar -->\r\n <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n <!-- We will use here Router Outlet -->\r\n <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\"\r\n id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n id=\"cide-lyt-outlet-wrapper\">\r\n <cide-lyt-tab-content></cide-lyt-tab-content>\r\n </div>\r\n <!-- We will use here Side Drawer -->\r\n <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n id=\"cide-lyt-footer-console-wrapper\">\r\n <!-- We will use here footer -->\r\n <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n <!-- We will use here Console -->\r\n <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }] });
|
|
5998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n <!-- We will use here Header -->\r\n <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n <!-- we will use here request tabs -->\r\n <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n <!-- We will use here Sidebar -->\r\n <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n <!-- We will use here Router Outlet -->\r\n <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\"\r\n id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n id=\"cide-lyt-outlet-wrapper\">\r\n <cide-lyt-tab-content></cide-lyt-tab-content>\r\n </div>\r\n <!-- We will use here Side Drawer -->\r\n <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n id=\"cide-lyt-footer-console-wrapper\">\r\n <!-- We will use here footer -->\r\n <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n <!-- We will use here Console -->\r\n <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n </div>\r\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}.cide-lyt-sidebar-page-wrapper{display:table-cell;width:100%;height:100%;vertical-align:top;position:relative}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-sidedrawer-wrapper{display:table-row;height:100%}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:56px;width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:absolute;top:0;left:0;bottom:0;z-index:30;height:100%;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}#cide-lyt-sidebar-page.mobile-open{transform:translate(0)}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{flex-shrink:0;height:auto;width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-outlet-wrapper{padding:.5rem}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:52px}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-sidebar-page{z-index:35}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:48px}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }] });
|
|
5998
5999
|
}
|
|
5999
6000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytLayoutWrapperComponent, decorators: [{
|
|
6000
6001
|
type: Component,
|
|
@@ -6007,7 +6008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
6007
6008
|
RouterModule,
|
|
6008
6009
|
CideLytRequestWrapperComponent,
|
|
6009
6010
|
TabContentComponent
|
|
6010
|
-
], template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n <!-- We will use here Header -->\r\n <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n <!-- we will use here request tabs -->\r\n <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n <!-- We will use here Sidebar -->\r\n <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n <!-- We will use here Router Outlet -->\r\n <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\"\r\n id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n id=\"cide-lyt-outlet-wrapper\">\r\n <cide-lyt-tab-content></cide-lyt-tab-content>\r\n </div>\r\n <!-- We will use here Side Drawer -->\r\n <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n id=\"cide-lyt-footer-console-wrapper\">\r\n <!-- We will use here footer -->\r\n <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n <!-- We will use here Console -->\r\n <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n </div>\r\n</div>" }]
|
|
6011
|
+
], template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n <!-- We will use here Header -->\r\n <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n <!-- we will use here request tabs -->\r\n <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n <!-- We will use here Sidebar -->\r\n <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n <!-- We will use here Router Outlet -->\r\n <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\"\r\n id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n id=\"cide-lyt-outlet-wrapper\">\r\n <cide-lyt-tab-content></cide-lyt-tab-content>\r\n </div>\r\n <!-- We will use here Side Drawer -->\r\n <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n id=\"cide-lyt-footer-console-wrapper\">\r\n <!-- We will use here footer -->\r\n <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n <!-- We will use here Console -->\r\n <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n </div>\r\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}.cide-lyt-sidebar-page-wrapper{display:table-cell;width:100%;height:100%;vertical-align:top;position:relative}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-sidedrawer-wrapper{display:table-row;height:100%}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:56px;width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:absolute;top:0;left:0;bottom:0;z-index:30;height:100%;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}#cide-lyt-sidebar-page.mobile-open{transform:translate(0)}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{flex-shrink:0;height:auto;width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-outlet-wrapper{padding:.5rem}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:52px}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-sidebar-page{z-index:35}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:48px}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"] }]
|
|
6011
6012
|
}] });
|
|
6012
6013
|
|
|
6013
6014
|
class CloudIdeLayoutComponent {
|
|
@@ -6226,13 +6227,34 @@ class CideLytSharedWrapperComponent {
|
|
|
6226
6227
|
icon: undefined,
|
|
6227
6228
|
url: undefined
|
|
6228
6229
|
});
|
|
6229
|
-
// Append additional items from input signal
|
|
6230
|
+
// Append additional items from input signal, filtering out duplicates
|
|
6230
6231
|
const inputBreadcrumbData = this.breadcrumb_data();
|
|
6231
6232
|
if (inputBreadcrumbData.length > 0) {
|
|
6232
|
-
|
|
6233
|
+
// Filter out items that duplicate the current page title or are "Home" (already shown as icon)
|
|
6234
|
+
const filteredItems = inputBreadcrumbData.filter(item => {
|
|
6235
|
+
// Skip "Home" items as they're already shown as an icon by the breadcrumb component
|
|
6236
|
+
const isHome = item.id === 'home' || item.label?.toLowerCase() === 'home';
|
|
6237
|
+
// Skip items that match the current page title (already in defaultItems)
|
|
6238
|
+
const matchesCurrentPage = item.label?.toLowerCase() === currentPageTitle.toLowerCase();
|
|
6239
|
+
// Skip items that match the module title
|
|
6240
|
+
const matchesModule = moduleInfo?.title && item.label?.toLowerCase() === moduleInfo.title.toLowerCase();
|
|
6241
|
+
return !isHome && !matchesCurrentPage && !matchesModule;
|
|
6242
|
+
});
|
|
6243
|
+
return [...defaultItems, ...filteredItems];
|
|
6233
6244
|
}
|
|
6234
6245
|
// Append additional items from internal signal (for backward compatibility)
|
|
6235
|
-
|
|
6246
|
+
const additionalItems = this.additionalBreadcrumbItems();
|
|
6247
|
+
if (additionalItems.length > 0) {
|
|
6248
|
+
// Filter out duplicates here too
|
|
6249
|
+
const filteredAdditional = additionalItems.filter(item => {
|
|
6250
|
+
const isHome = item.id === 'home' || item.label?.toLowerCase() === 'home';
|
|
6251
|
+
const matchesCurrentPage = item.label?.toLowerCase() === currentPageTitle.toLowerCase();
|
|
6252
|
+
const matchesModule = moduleInfo?.title && item.label?.toLowerCase() === moduleInfo.title.toLowerCase();
|
|
6253
|
+
return !isHome && !matchesCurrentPage && !matchesModule;
|
|
6254
|
+
});
|
|
6255
|
+
return [...defaultItems, ...filteredAdditional];
|
|
6256
|
+
}
|
|
6257
|
+
return defaultItems;
|
|
6236
6258
|
}, ...(ngDevMode ? [{ debugName: "fullBreadcrumbItems" }] : []));
|
|
6237
6259
|
constructor() {
|
|
6238
6260
|
// Watch for changes in breadcrumb data and update breadcrumb component
|
|
@@ -6626,7 +6648,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
6626
6648
|
},
|
|
6627
6649
|
{
|
|
6628
6650
|
path: "home",
|
|
6629
|
-
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-
|
|
6651
|
+
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-CeuB9Nsb.mjs').then(c => c.CideLytHomeWrapperComponent),
|
|
6630
6652
|
canActivate: [authGuard],
|
|
6631
6653
|
data: {
|
|
6632
6654
|
sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
|
|
@@ -6634,7 +6656,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
6634
6656
|
},
|
|
6635
6657
|
{
|
|
6636
6658
|
path: "dashboard-manager",
|
|
6637
|
-
loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-
|
|
6659
|
+
loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-Cet1zc7W.mjs').then(c => c.DashboardManagerComponent),
|
|
6638
6660
|
canActivate: [authGuard],
|
|
6639
6661
|
data: {
|
|
6640
6662
|
sypg_page_code: "cide_lyt_dashboard_manager"
|
|
@@ -8201,4 +8223,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
|
|
|
8201
8223
|
*/
|
|
8202
8224
|
|
|
8203
8225
|
export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, RightsService as R, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, ComponentContextService as i, layoutControlPannelChildRoutes as j, CustomRouteReuseStrategy as k, layoutRoutes as l, CideLytUserStatusService as m, CacheManagerService as n, CideLytFileManagerService as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingComponent as q, CideLytFloatingEntityRightsSharingService as r, setCSSVariable as s, themeFactory as t };
|
|
8204
|
-
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-
|
|
8226
|
+
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BbNpkUNq.mjs.map
|