cloud-ide-layout 1.0.47 → 1.0.49
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-C5X2le0W.mjs → cloud-ide-layout-cloud-ide-layout-Dp5qc3C5.mjs} +536 -533
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-Dp5qc3C5.mjs.map +1 -0
- package/fesm2022/cloud-ide-layout-drawer-theme.component-BkX1xh6A.mjs +297 -0
- package/fesm2022/cloud-ide-layout-drawer-theme.component-BkX1xh6A.mjs.map +1 -0
- package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-DTeaVXp3.mjs → cloud-ide-layout-floating-entity-selection.component-BwrKdQB4.mjs} +63 -65
- package/fesm2022/cloud-ide-layout-floating-entity-selection.component-BwrKdQB4.mjs.map +1 -0
- package/fesm2022/cloud-ide-layout-home-wrapper.component-DE5lpCxu.mjs +202 -0
- package/fesm2022/cloud-ide-layout-home-wrapper.component-DE5lpCxu.mjs.map +1 -0
- package/fesm2022/cloud-ide-layout-sidedrawer-notes.component-CDIHnAIJ.mjs +256 -0
- package/fesm2022/cloud-ide-layout-sidedrawer-notes.component-CDIHnAIJ.mjs.map +1 -0
- package/fesm2022/cloud-ide-layout.mjs +1 -1
- package/package.json +1 -1
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-C5X2le0W.mjs.map +0 -1
- package/fesm2022/cloud-ide-layout-drawer-theme.component-CBi6mgCC.mjs +0 -297
- package/fesm2022/cloud-ide-layout-drawer-theme.component-CBi6mgCC.mjs.map +0 -1
- package/fesm2022/cloud-ide-layout-floating-entity-selection.component-DTeaVXp3.mjs.map +0 -1
- package/fesm2022/cloud-ide-layout-home-wrapper.component-Dq9wbuoU.mjs +0 -202
- package/fesm2022/cloud-ide-layout-home-wrapper.component-Dq9wbuoU.mjs.map +0 -1
- package/fesm2022/cloud-ide-layout-sidedrawer-notes.component-DB4-p0ao.mjs +0 -256
- package/fesm2022/cloud-ide-layout-sidedrawer-notes.component-DB4-p0ao.mjs.map +0 -1
|
@@ -10,7 +10,8 @@ import { Title } from '@angular/platform-browser';
|
|
|
10
10
|
import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent, CideEleButtonComponent } from 'cloud-ide-element';
|
|
11
11
|
import * as i1 from '@angular/common';
|
|
12
12
|
import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
|
|
13
|
-
import { AUTH_SERVICE_TOKEN, authGuard } from 'cloud-ide-shared';
|
|
13
|
+
import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard } from 'cloud-ide-shared';
|
|
14
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
14
15
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
15
16
|
import { merge } from 'lodash';
|
|
16
17
|
import * as i2$1 from '@angular/forms';
|
|
@@ -1266,7 +1267,7 @@ class CideLytFloatingEntitySelectionService {
|
|
|
1266
1267
|
}
|
|
1267
1268
|
try {
|
|
1268
1269
|
// Use relative import to avoid circular dependency
|
|
1269
|
-
const module = await import('./cloud-ide-layout-floating-entity-selection.component-
|
|
1270
|
+
const module = await import('./cloud-ide-layout-floating-entity-selection.component-BwrKdQB4.mjs');
|
|
1270
1271
|
if (module.CideLytFloatingEntitySelectionComponent) {
|
|
1271
1272
|
this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
|
|
1272
1273
|
console.log('✅ Entity selection component registered successfully');
|
|
@@ -1351,9 +1352,9 @@ class CideLytHeaderWrapperComponent {
|
|
|
1351
1352
|
appStateService = inject(AppStateService);
|
|
1352
1353
|
// Inject floating entity selection service
|
|
1353
1354
|
floatingEntitySelectionService = inject(CideLytFloatingEntitySelectionService);
|
|
1354
|
-
// Inject year services
|
|
1355
|
-
|
|
1356
|
-
|
|
1355
|
+
// Inject year services using injection tokens
|
|
1356
|
+
financialYearService = inject(FINANCIAL_YEAR_SERVICE_TOKEN);
|
|
1357
|
+
academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
|
|
1357
1358
|
destroyRef = inject(DestroyRef);
|
|
1358
1359
|
// Signals for year data
|
|
1359
1360
|
financialYears = signal([], ...(ngDevMode ? [{ debugName: "financialYears" }] : []));
|
|
@@ -1545,47 +1546,49 @@ class CideLytHeaderWrapperComponent {
|
|
|
1545
1546
|
* Load financial years from API
|
|
1546
1547
|
*/
|
|
1547
1548
|
loadFinancialYears() {
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1549
|
+
this.financialYearService.getFinancialYearList({})
|
|
1550
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1551
|
+
.subscribe({
|
|
1552
|
+
next: (response) => {
|
|
1553
|
+
if (response?.success && response.data) {
|
|
1554
|
+
this.financialYears.set(response.data);
|
|
1555
|
+
this.updateFinancialYearDropdown();
|
|
1556
|
+
console.log('📊 Financial years loaded:', response.data);
|
|
1557
|
+
}
|
|
1558
|
+
else {
|
|
1559
|
+
console.warn('⚠️ No financial year data received');
|
|
1560
|
+
this.financialYears.set([]);
|
|
1561
|
+
}
|
|
1562
|
+
},
|
|
1563
|
+
error: (error) => {
|
|
1564
|
+
console.error('❌ Error loading financial years:', error);
|
|
1565
|
+
this.financialYears.set([]);
|
|
1566
|
+
}
|
|
1567
|
+
});
|
|
1566
1568
|
}
|
|
1567
1569
|
/**
|
|
1568
1570
|
* Load academic years from API
|
|
1569
1571
|
*/
|
|
1570
1572
|
loadAcademicYears() {
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1573
|
+
this.academicYearService.getAcademicYearList({})
|
|
1574
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1575
|
+
.subscribe({
|
|
1576
|
+
next: (response) => {
|
|
1577
|
+
if (response?.success && response.data) {
|
|
1578
|
+
this.academicYears.set(response.data);
|
|
1579
|
+
this.updateAcademicYearDropdown();
|
|
1580
|
+
console.log('📚 Academic years loaded:', response.data);
|
|
1581
|
+
}
|
|
1582
|
+
else {
|
|
1583
|
+
console.warn('⚠️ No academic year data received');
|
|
1584
|
+
this.academicYears.set([]);
|
|
1585
|
+
}
|
|
1586
|
+
},
|
|
1587
|
+
error: (error) => {
|
|
1588
|
+
console.error('❌ Error loading academic years:', error);
|
|
1589
|
+
this.academicYears.set([]);
|
|
1590
|
+
}
|
|
1591
|
+
});
|
|
1589
1592
|
}
|
|
1590
1593
|
/**
|
|
1591
1594
|
* Update financial year dropdown items
|
|
@@ -1753,11 +1756,11 @@ class CideLytHeaderWrapperComponent {
|
|
|
1753
1756
|
}
|
|
1754
1757
|
}
|
|
1755
1758
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1756
|
-
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 }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\r\n <!-- Logo Section -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\r\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\r\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\r\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\r\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\r\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\r\n } @else {\r\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\r\n }\r\n\r\n </div>\r\n @if (appStateService.activeEntity()?.syen_name) {\r\n <span\r\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\"\r\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\r\n {{ appStateService.activeEntity()?.syen_name }}\r\n </span>\r\n }\r\n </div>\r\n <!-- Search Section -->\r\n <div class=\"header-search-container\">\r\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\r\n size=\"md\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Icons Section -->\r\n <div class=\"header-icons-container\">\r\n <!-- Financial Year Dropdown -->\r\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentFinancialYearName() }}</span>\r\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\r\n (itemClick)=\"onFinancialYearClick($event)\">\r\n </cide-ele-dropdown>\r\n <div class=\"header-tooltip\">Financial Year</div>\r\n </div>\r\n\r\n <!-- Academic Year Dropdown -->\r\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentAcademicYearName() }}</span>\r\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\r\n (itemClick)=\"onAcademicYearClick($event)\">\r\n </cide-ele-dropdown>\r\n <div class=\"header-tooltip\">Academic Year</div>\r\n </div>\r\n\r\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <cide-ele-icon>notifications</cide-ele-icon>\r\n <div class=\"header-badge\">3</div>\r\n <div class=\"header-tooltip\">Notifications</div>\r\n </div>\r\n\r\n <div class=\"header-divider\"></div>\r\n\r\n <!-- Profile with Dropdown -->\r\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\r\n [triggerTemplate]=\"triggerTemplate\"\r\n (itemClick)=\"onProfileClick($event)\">\r\n <ng-template #triggerTemplate>\r\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\r\n <div class=\"profile-avatar\">\r\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\r\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\r\n </div>\r\n } @else {\r\n <div class=\"profile-avatar\">\r\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\r\n </div>\r\n }\r\n </ng-template>\r\n </cide-ele-dropdown>\r\n <div class=\"header-tooltip\">My Account</div>\r\n </div>\r\n </div>\r\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-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;padding:.25rem .5rem;background-color:#f9fafb99;border:1px solid rgba(229,231,235,.5);font-size:.75rem;font-weight:600;min-width:40px;height:28px}.header-dropdown-container:hover{background-color:#3b82f61a;border-color:#3b82f64d;color:#3b82f6;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f61a}.header-dropdown-container:active{transform:scale(.98)}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;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}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
1759
|
+
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 }], 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 <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentFinancialYearName() }}</span>\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentAcademicYearName() }}</span>\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>notifications</cide-ele-icon>\n <div class=\"header-badge\">3</div>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n\n <div class=\"header-divider\"></div>\n\n <!-- 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,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-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;padding:.25rem .5rem;background-color:#f9fafb99;border:1px solid rgba(229,231,235,.5);font-size:.75rem;font-weight:600;min-width:40px;height:28px}.header-dropdown-container:hover{background-color:#3b82f61a;border-color:#3b82f64d;color:#3b82f6;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f61a}.header-dropdown-container:active{transform:scale(.98)}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;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}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
1757
1760
|
}
|
|
1758
1761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
|
|
1759
1762
|
type: Component,
|
|
1760
|
-
args: [{ selector: 'cide-lyt-header-wrapper', standalone: true, imports: [CideInputComponent, CommonModule, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\r\n <!-- Logo Section -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\r\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\r\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\r\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\r\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\r\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\r\n } @else {\r\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\r\n }\r\n\r\n </div>\r\n @if (appStateService.activeEntity()?.syen_name) {\r\n <span\r\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\"\r\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\r\n {{ appStateService.activeEntity()?.syen_name }}\r\n </span>\r\n }\r\n </div>\r\n <!-- Search Section -->\r\n <div class=\"header-search-container\">\r\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\r\n size=\"md\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Icons Section -->\r\n <div class=\"header-icons-container\">\r\n <!-- Financial Year Dropdown -->\r\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentFinancialYearName() }}</span>\r\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\r\n (itemClick)=\"onFinancialYearClick($event)\">\r\n </cide-ele-dropdown>\r\n <div class=\"header-tooltip\">Financial Year</div>\r\n </div>\r\n\r\n <!-- Academic Year Dropdown -->\r\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentAcademicYearName() }}</span>\r\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\r\n (itemClick)=\"onAcademicYearClick($event)\">\r\n </cide-ele-dropdown>\r\n <div class=\"header-tooltip\">Academic Year</div>\r\n </div>\r\n\r\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <cide-ele-icon>notifications</cide-ele-icon>\r\n <div class=\"header-badge\">3</div>\r\n <div class=\"header-tooltip\">Notifications</div>\r\n </div>\r\n\r\n <div class=\"header-divider\"></div>\r\n\r\n <!-- Profile with Dropdown -->\r\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\r\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\r\n [triggerTemplate]=\"triggerTemplate\"\r\n (itemClick)=\"onProfileClick($event)\">\r\n <ng-template #triggerTemplate>\r\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\r\n <div class=\"profile-avatar\">\r\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\r\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\r\n </div>\r\n } @else {\r\n <div class=\"profile-avatar\">\r\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\r\n </div>\r\n }\r\n </ng-template>\r\n </cide-ele-dropdown>\r\n <div class=\"header-tooltip\">My Account</div>\r\n </div>\r\n </div>\r\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-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;padding:.25rem .5rem;background-color:#f9fafb99;border:1px solid rgba(229,231,235,.5);font-size:.75rem;font-weight:600;min-width:40px;height:28px}.header-dropdown-container:hover{background-color:#3b82f61a;border-color:#3b82f64d;color:#3b82f6;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f61a}.header-dropdown-container:active{transform:scale(.98)}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;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}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"] }]
|
|
1763
|
+
args: [{ selector: 'cide-lyt-header-wrapper', standalone: true, imports: [CideInputComponent, CommonModule, CideIconComponent, 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 <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentFinancialYearName() }}</span>\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <span class=\"tw-text-xs tw-font-semibold tw-mr-1\">{{ currentAcademicYearName() }}</span>\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n\n <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-icon>notifications</cide-ele-icon>\n <div class=\"header-badge\">3</div>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n\n <div class=\"header-divider\"></div>\n\n <!-- 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,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-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;padding:.25rem .5rem;background-color:#f9fafb99;border:1px solid rgba(229,231,235,.5);font-size:.75rem;font-weight:600;min-width:40px;height:28px}.header-dropdown-container:hover{background-color:#3b82f61a;border-color:#3b82f64d;color:#3b82f6;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f61a}.header-dropdown-container:active{transform:scale(.98)}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;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}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"] }]
|
|
1761
1764
|
}], ctorParameters: () => [], propDecorators: { triggerTemplate: [{
|
|
1762
1765
|
type: ViewChild,
|
|
1763
1766
|
args: ['triggerTemplate']
|
|
@@ -2342,7 +2345,7 @@ class CideLytSidebarWrapperComponent {
|
|
|
2342
2345
|
}
|
|
2343
2346
|
}
|
|
2344
2347
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2345
|
-
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()\">\r\n <!-- First tier sidebar (Icon only) -->\r\n <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\r\n <!-- Scrollable content -->\r\n <div class=\"sidebar-scroll-content\">\r\n <!-- Collapse/Expand toggle -->\r\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\r\n (keydown.enter)=\"toggleSidebar()\">\r\n <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\r\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\r\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\r\n </cide-ele-icon>\r\n </div> <!-- Main navigation icons - Enhanced Design -->\r\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n @for (core_system_module_item of core_system_module(); track $index) {\r\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\r\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\r\n tooltipPlacement=\"right\"\r\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\r\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\r\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\r\n\r\n <!-- Notification Badge with enhanced design -->\r\n @if (core_system_module_item?.syme_ping) {\r\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\"\r\n style=\"background-color: var(--cide-theme-error-color);\">\r\n </div>\r\n }\r\n\r\n <!-- Enhanced icon with better visual effects -->\r\n <div\r\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\r\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\r\n tw-border-2 tw-border-transparent\r\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\r\n <cide-ele-icon type=\"box\" size=\"xs\"\r\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\r\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\r\n {{core_system_module_item?.syme_icon || 'dashboard'}}\r\n </cide-ele-icon>\r\n </div>\r\n\r\n <!-- Modern active indicator -->\r\n @if (activeModuleId === core_system_module_item._id) {\r\n <div\r\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\">\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Bottom section with enhanced theme toggle and user avatar -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-3 tw-mt-auto tw-pb-4\">\r\n <!-- Theme toggle with modern design -->\r\n <div class=\"nav-item tw-group\">\r\n <div class=\"nav-tooltip\">Toggle Theme</div>\r\n <button class=\"theme-toggle\" (click)=\"toggleTheme()\" (keydown.enter)=\"toggleTheme()\"\r\n (keydown.space)=\"toggleTheme()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle theme\">\r\n <cide-ele-icon type=\"box\" size=\"sm\">\r\n {{darkMode() ? 'light_mode' : 'dark_mode'}}\r\n </cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- User avatar with dropdown -->\r\n <div class=\"tw-relative user-dropdown\" (click)=\"toggleUserMenu()\" (keydown.enter)=\"toggleUserMenu()\"\r\n (keydown.space)=\"toggleUserMenu()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle user menu\"\r\n [attr.aria-expanded]=\"showUserMenu()\">\r\n <div class=\"nav-tooltip\">Your Profile</div>\r\n <div class=\"user-avatar tw-w-10 tw-h-10 tw-rounded-full tw-overflow-hidden tw-bg-gray-200 tw-border-2 tw-shadow-sm tw-cursor-pointer hover:tw-shadow\"\r\n style=\"border-color: var(--cide-theme-sidebar-color);\">\r\n <img src=\"data:image/png;base64,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\"\r\n alt=\"User\" class=\"tw-w-full tw-h-full tw-object-cover\"\r\n onerror=\"this.src='data:image/png;base64,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'\">\r\n <!-- Modern Status Indicator Circle -->\r\n <div class=\"tw-absolute -tw-bottom-0.5 -tw-right-0.5 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-transition-all tw-duration-200\r\n {{getUserStatusClass()}}\" [cideEleTooltip]=\"getUserStatusText()\"\r\n tooltipPlacement=\"left\">\r\n <!-- Pulse animation for active status -->\r\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\r\n {{getUserStatusClass()}}\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced User dropdown menu with modern status options -->\r\n <div *ngIf=\"showUserMenu()\"\r\n class=\"user-menu tw-absolute tw-left-full tw-bottom-0 tw-mt-2 tw-ml-2 tw-w-72 tw-rounded-xl tw-shadow-2xl tw-bg-white tw-ring-1 tw-ring-black/5 tw-divide-y tw-divide-gray-100 tw-z-50 tw-backdrop-blur-sm\">\r\n\r\n <!-- Enhanced User Info Section -->\r\n <div class=\"tw-p-5 tw-bg-gradient-to-br tw-from-blue-50 tw-to-indigo-50\">\r\n <div class=\"tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-relative\">\r\n <div\r\n class=\"tw-w-12 tw-h-12 tw-rounded-xl tw-bg-gradient-to-br tw-from-blue-500 tw-via-purple-500 tw-to-indigo-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-semibold tw-text-sm tw-shadow-lg\">\r\n JD\r\n </div>\r\n <!-- Enhanced status indicator -->\r\n <div class=\"tw-absolute -tw-bottom-1 -tw-right-1 tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-white tw-shadow-md tw-transition-all tw-duration-300\"\r\n [class]=\"getUserStatusClass()\" [title]=\"getUserStatusText()\">\r\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\"\r\n [class]=\"getUserStatusClass()\"></div>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-truncate\">John Doe</div>\r\n <div class=\"tw-text-sm tw-text-gray-600 tw-truncate\">john.doe@company.com</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1 tw-flex tw-items-center tw-gap-1\">\r\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500 tw-animate-pulse\">\r\n </div>\r\n <span>Active now</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced Status Selection Section -->\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-blue-100 tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon type=\"none\" size=\"2xs\"\r\n class=\"tw-text-blue-600\">radio_button_checked</cide-ele-icon>\r\n </div>\r\n Set Status\r\n </h4>\r\n <span\r\n class=\"tw-text-xs tw-text-gray-500 tw-bg-gray-100 tw-px-2 tw-py-1 tw-rounded-full\">Auto-away\r\n in 5min</span>\r\n </div>\r\n\r\n <div class=\"tw-space-y-1\">\r\n <button (click)=\"setUserStatus('online')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-green-50 tw-group\"\r\n [class.tw-bg-green-50]=\"userStatusService.userStatus().status === 'online'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'online'\"\r\n [class.tw-ring-green-200]=\"userStatusService.userStatus().status === 'online'\">\r\n <div class=\"tw-relative\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-green-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-bg-green-500 tw-animate-ping tw-opacity-75\"\r\n *ngIf=\"userStatusService.userStatus().status === 'online'\"></div>\r\n </div>\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Online</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'online'\" type=\"none\"\r\n size=\"xs\" class=\"tw-text-green-600\">check</cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"setUserStatus('away')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-yellow-50 tw-group\"\r\n [class.tw-bg-yellow-50]=\"userStatusService.userStatus().status === 'away'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'away'\"\r\n [class.tw-ring-yellow-200]=\"userStatusService.userStatus().status === 'away'\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-yellow-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Away</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'away'\" type=\"none\"\r\n size=\"xs\" class=\"tw-text-yellow-600\">check</cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"setUserStatus('busy')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-orange-50 tw-group\"\r\n [class.tw-bg-orange-50]=\"userStatusService.userStatus().status === 'busy'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'busy'\"\r\n [class.tw-ring-orange-200]=\"userStatusService.userStatus().status === 'busy'\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-orange-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Busy</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'busy'\" type=\"none\"\r\n size=\"xs\" class=\"tw-text-orange-600\">check</cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"setUserStatus('do-not-disturb')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-red-50 tw-group\"\r\n [class.tw-bg-red-50]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\r\n [class.tw-ring-red-200]=\"userStatusService.userStatus().status === 'do-not-disturb'\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-red-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Do not disturb</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'do-not-disturb'\"\r\n type=\"none\" size=\"xs\" class=\"tw-text-red-600\">check</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced Quick Actions Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50\">\r\n <h4\r\n class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3 tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-gray-100 tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon type=\"none\" size=\"2xs\" class=\"tw-text-gray-600\">bolt</cide-ele-icon>\r\n </div>\r\n Quick Actions\r\n </h4>\r\n <div class=\"tw-space-y-1\">\r\n <a href=\"#\"\r\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-blue-200 tw-transition-colors\">\r\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-blue-600\">person</cide-ele-icon>\r\n </div>\r\n <span class=\"tw-flex-1\">View Profile</span>\r\n <cide-ele-icon type=\"none\" size=\"xs\"\r\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\r\n </a>\r\n <a href=\"#\"\r\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-gray-200 tw-transition-colors\">\r\n <cide-ele-icon type=\"none\" size=\"xs\"\r\n class=\"tw-text-gray-600\">settings</cide-ele-icon>\r\n </div>\r\n <span class=\"tw-flex-1\">Preferences</span>\r\n <cide-ele-icon type=\"none\" size=\"xs\"\r\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\r\n </a>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced Sign Out Section -->\r\n <div class=\"tw-p-4\">\r\n <a href=\"#\"\r\n class=\"tw-group tw-flex tw-items-center tw-px-3 tw-py-2.5 tw-text-sm tw-text-red-600 tw-rounded-lg hover:tw-bg-red-50 tw-transition-all tw-duration-200 tw-font-medium\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-red-200 tw-transition-colors\">\r\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-red-600\">logout</cide-ele-icon>\r\n </div>\r\n <span class=\"tw-flex-1\">Sign out</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> <!-- Second tier sidebar (Expanded view) -->\r\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\r\n <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n <!-- Header section with search and options -->\r\n <div class=\"sidebar-header tw-p-4 tw-border-b tw-border-gray-100\">\r\n <!-- Title with back button - Clean layout without online indicator -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-mb-4\">\r\n <button\r\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\"\r\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\r\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\r\n getActiveModuleIcon() }}</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\r\n {{ appState.getActiveModuleTitle() || 'Menu' }}\r\n </h2>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\r\n Module Dashboard\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- Search and options -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"search-wrapper tw-relative tw-flex-1\">\r\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\r\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\r\n </cide-ele-input>\r\n <div\r\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\">\r\n \u2318K</div>\r\n </div>\r\n <button\r\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\"\r\n (click)=\"toggleOptions()\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\r\n </button>\r\n\r\n <!-- Options dropdown menu -->\r\n <div *ngIf=\"showOptions()\"\r\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\">\r\n <div class=\"tw-py-1\">\r\n <a href=\"#\"\r\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\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\r\n Refresh\r\n </a>\r\n <a href=\"#\"\r\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\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\r\n Sync settings\r\n </a>\r\n </div>\r\n <div class=\"tw-py-1\">\r\n <a href=\"#\"\r\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\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\r\n Help & support\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Menu items with categories -->\r\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\r\n <!-- Search results if searching -->\r\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\r\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\r\n </div>\r\n\r\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\r\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\r\n class=\"menu-item tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500\" type=\"none\"\r\n size=\"xs\">{{item.icon}}</cide-ele-icon>\r\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\r\n </a>\r\n </div>\r\n\r\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\r\n </div>\r\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\r\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Only show these sections if not searching -->\r\n <ng-container *ngIf=\"!searchText()\">\r\n <!-- Loading state -->\r\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\r\n </div>\r\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\r\n </div>\r\n\r\n <!-- Dynamic menu tree -->\r\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-4\"\r\n [class.animate-in]=\"animateSections()[0]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\r\n </div>\r\n\r\n <!-- Empty state -->\r\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\r\n class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\r\n </div>\r\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\r\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Recursive menu template -->\r\n <ng-template #recursiveMenu let-menus let-level=\"level\">\r\n <div [class.tw-ml-0]=\"level > 0\">\r\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\r\n <!-- Title type items (section headers) -->\r\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-3\">\r\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\r\n menu.syme_title }}</h3>\r\n <!-- Render children of title -->\r\n <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Section type items (collapsible sections) -->\r\n <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\r\n <!-- Section header (clickable to expand/collapse) -->\r\n <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\r\n (keydown.space)=\"toggleSection(menu._id)\"\r\n class=\"section-header tw-w-full tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\r\n [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\r\n role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\r\n [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\r\n\r\n <!-- Section Icon (left side, like other menu items) -->\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\r\n menu.syme_icon || 'folder' }}</cide-ele-icon>\r\n\r\n <!-- Section Title -->\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title\r\n }}</span>\r\n\r\n <!-- Right side icons container -->\r\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\r\n <!-- Child Count Badge -->\r\n <span *ngIf=\"menu.children && menu.children.length > 0\"\r\n class=\"tw-px-2 tw-py-0.5 tw-bg-gray-200 tw-text-gray-600 tw-rounded-full tw-text-xs tw-font-medium\">\r\n {{ menu.children.length }}\r\n </span>\r\n\r\n <!-- Expand/Collapse Icon (right side) -->\r\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\r\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\r\n size=\"2xs\">chevron_right</cide-ele-icon>\r\n </div>\r\n </button>\r\n\r\n <!-- Section Content (collapsible) -->\r\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\r\n class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\r\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Menu type items (clickable links) -->\r\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\r\n (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\r\n role=\"button\"\r\n class=\"menu-item tw-flex tw-items-center tw-px-1 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\r\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-3 tw-text-gray-500\" type=\"none\"\r\n size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\r\n <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\r\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\r\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\r\n size=\"2xs\">chevron_right</cide-ele-icon>\r\n </a>\r\n\r\n <!-- Render nested children for menu items -->\r\n <ng-container\r\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Notification panel (overlays content when shown) -->\r\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\r\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\r\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\r\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\r\n (click)=\"toggleNotificationsPanel()\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\r\n <button class=\"tw-text-xs tw-text-blue-500\">Mark all as read</button>\r\n </div>\r\n\r\n <div class=\"tw-space-y-3\">\r\n <div\r\n class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\r\n <div class=\"tw-flex tw-gap-3\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\r\n with improved visualizations.</div>\r\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\r\n <div class=\"tw-flex tw-gap-3\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Storage info at bottom -->\r\n <div class=\"sidebar-footer tw-p-4 tw-border-t tw-border-gray-100\">\r\n <!-- for info display -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Resizer -->\r\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\r\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\r\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\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}.cide-lyt-sidebar.collapsed{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)}.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-theme-color-brand-primary) 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-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.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),#fff0)}.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),#fff0)}.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%;padding-top:.75rem;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:#f3f4f6;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, rgba(243, 244, 246, 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,#ffffff4d,#fff0);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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}@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:auto;background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgba(243,244,246,1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform}.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 rgba(243,244,246,.8);padding:1rem .75rem;transition:all .3s ease}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px #0000001a}.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:#f3f4f6}.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:#f3f4f6cc;border-radius:.25rem;border:1px solid rgba(229,231,235,.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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.5rem 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:3px 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}}.dark-mode .active-menu-item{background-color:#1e293b80;box-shadow:0 2px 5px #0f172a33}.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,#60a5fa,#3b82f6);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:#ffffffb3;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;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden}.notification-item:hover{background-color:#f3f4f6;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 rgba(243,244,246,.8);padding:.75rem;transition:all .3s ease}.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,#fff0,#fff3,#fff0);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:#f3f4f680}.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:rgba(209,213,219,.5) 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}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(255,255,255,.9),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,rgba(255,255,255,.9),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:#d1d5db80;border-radius:20px}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.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}.dark-mode{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:#1e293b;color:var(--cide-theme-light-color)}.dark-mode .cide-lyt-stack{background-color:#0f172a;border-right-color:#1e293b}.dark-mode .cide-lyt-stack:before,.dark-mode .cide-lyt-stack:after,.dark-mode .sidebar-content:before,.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,rgba(15,23,42,.9),transparent)}.dark-mode .sidebar-content:after,.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,rgba(15,23,42,.9),transparent)}.dark-mode .cide-lyt-sidebar-menu{background-color:#0f172a;border-left-color:#1e293b}.dark-mode .sidebar-header,.dark-mode .sidebar-footer{background-color:#0f172af2;border-color:#1e293b}.dark-mode .tw-text-gray-700{color:#e2e8f0}.dark-mode .tw-text-gray-500{color:#94a3b8}.dark-mode .tw-bg-gray-50,.dark-mode .menu-item:hover{background-color:#1e293b80}.dark-mode .tw-bg-gray-100{background-color:#1e293b}.dark-mode .tw-bg-gray-200{background-color:#334155}.dark-mode .nav-item:hover:before{background-color:#60a5fa1a}.dark-mode .back-button:hover{background-color:#1e293bb3}.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,#33415500,#33415580,#33415500)}.dark-mode .toggle-track:after{background:#00000080}.dark-mode .alert-box:before{opacity:.2}.dark-mode :host ::ng-deep .cide-input-field{background-color:#1e293b;color:#e2e8f0}.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:#475569;background-color:#0f172a}.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.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 .5rem}.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}.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}.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)}.dark-mode .nav-item:hover{background-color:#33415580;box-shadow:0 2px 8px #0f172a4d}.dark-mode .nav-tooltip{background-color:#0f172ae6;box-shadow:0 3px 10px #0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dark-mode .nav-tooltip:before{border-color:transparent rgba(15,23,42,.9) 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)}.dark-mode .nav-item:hover{background-color:#ffffff1a}.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 30%,var(--cide-theme-dark-color))}.dark-mode .user-avatar{border-color:var(--cide-theme-dark-color);background-color:#ffffff1a}.dark-mode .user-status{border-color:var(--cide-theme-dark-color)}.dark-mode .user-menu{background-color:var(--cide-theme-dark-color);border-color:#ffffff1a}.dark-mode .user-menu a{color:#fffc}.dark-mode .user-menu a:hover{background-color:#ffffff1a}.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", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: [
|
|
2348
|
+
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)\"\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)\">\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\n <!-- Bottom section with enhanced theme toggle and user avatar -->\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-3 tw-mt-auto tw-pb-4\">\n <!-- Theme toggle with modern design -->\n <div class=\"nav-item tw-group\">\n <div class=\"nav-tooltip\">Toggle Theme</div>\n <button class=\"theme-toggle\" (click)=\"toggleTheme()\" (keydown.enter)=\"toggleTheme()\"\n (keydown.space)=\"toggleTheme()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle theme\">\n <cide-ele-icon type=\"box\" size=\"sm\">\n {{darkMode() ? 'light_mode' : 'dark_mode'}}\n </cide-ele-icon>\n </button>\n </div>\n\n <!-- User avatar with dropdown -->\n <div class=\"tw-relative user-dropdown\" (click)=\"toggleUserMenu()\" (keydown.enter)=\"toggleUserMenu()\"\n (keydown.space)=\"toggleUserMenu()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle user menu\"\n [attr.aria-expanded]=\"showUserMenu()\">\n <div class=\"nav-tooltip\">Your Profile</div>\n <div class=\"user-avatar tw-w-10 tw-h-10 tw-rounded-full tw-overflow-hidden tw-bg-gray-200 tw-border-2 tw-shadow-sm tw-cursor-pointer hover:tw-shadow\"\n style=\"border-color: var(--cide-theme-sidebar-color);\">\n <img src=\"data:image/png;base64,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\"\n alt=\"User\" class=\"tw-w-full tw-h-full tw-object-cover\"\n onerror=\"this.src='data:image/png;base64,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'\">\n <!-- Modern Status Indicator Circle -->\n <div class=\"tw-absolute -tw-bottom-0.5 -tw-right-0.5 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-transition-all tw-duration-200\n {{getUserStatusClass()}}\" [cideEleTooltip]=\"getUserStatusText()\"\n tooltipPlacement=\"left\">\n <!-- Pulse animation for active status -->\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\n {{getUserStatusClass()}}\"></div>\n </div>\n </div>\n\n <!-- Enhanced User dropdown menu with modern status options -->\n <div *ngIf=\"showUserMenu()\"\n class=\"user-menu tw-absolute tw-left-full tw-bottom-0 tw-mt-2 tw-ml-2 tw-w-72 tw-rounded-xl tw-shadow-2xl tw-bg-white tw-ring-1 tw-ring-black/5 tw-divide-y tw-divide-gray-100 tw-z-50 tw-backdrop-blur-sm\">\n\n <!-- Enhanced User Info Section -->\n <div class=\"tw-p-5 tw-bg-gradient-to-br tw-from-blue-50 tw-to-indigo-50\">\n <div class=\"tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-relative\">\n <div\n class=\"tw-w-12 tw-h-12 tw-rounded-xl tw-bg-gradient-to-br tw-from-blue-500 tw-via-purple-500 tw-to-indigo-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-semibold tw-text-sm tw-shadow-lg\">\n JD\n </div>\n <!-- Enhanced status indicator -->\n <div class=\"tw-absolute -tw-bottom-1 -tw-right-1 tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-white tw-shadow-md tw-transition-all tw-duration-300\"\n [class]=\"getUserStatusClass()\" [title]=\"getUserStatusText()\">\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\"\n [class]=\"getUserStatusClass()\"></div>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <div class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-truncate\">John Doe</div>\n <div class=\"tw-text-sm tw-text-gray-600 tw-truncate\">john.doe@company.com</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1 tw-flex tw-items-center tw-gap-1\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500 tw-animate-pulse\">\n </div>\n <span>Active now</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Enhanced Status Selection Section -->\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-blue-100 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon type=\"none\" size=\"2xs\"\n class=\"tw-text-blue-600\">radio_button_checked</cide-ele-icon>\n </div>\n Set Status\n </h4>\n <span\n class=\"tw-text-xs tw-text-gray-500 tw-bg-gray-100 tw-px-2 tw-py-1 tw-rounded-full\">Auto-away\n in 5min</span>\n </div>\n\n <div class=\"tw-space-y-1\">\n <button (click)=\"setUserStatus('online')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-green-50 tw-group\"\n [class.tw-bg-green-50]=\"userStatusService.userStatus().status === 'online'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'online'\"\n [class.tw-ring-green-200]=\"userStatusService.userStatus().status === 'online'\">\n <div class=\"tw-relative\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-green-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-bg-green-500 tw-animate-ping tw-opacity-75\"\n *ngIf=\"userStatusService.userStatus().status === 'online'\"></div>\n </div>\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Online</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'online'\" type=\"none\"\n size=\"xs\" class=\"tw-text-green-600\">check</cide-ele-icon>\n </button>\n\n <button (click)=\"setUserStatus('away')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-yellow-50 tw-group\"\n [class.tw-bg-yellow-50]=\"userStatusService.userStatus().status === 'away'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'away'\"\n [class.tw-ring-yellow-200]=\"userStatusService.userStatus().status === 'away'\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-yellow-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Away</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'away'\" type=\"none\"\n size=\"xs\" class=\"tw-text-yellow-600\">check</cide-ele-icon>\n </button>\n\n <button (click)=\"setUserStatus('busy')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-orange-50 tw-group\"\n [class.tw-bg-orange-50]=\"userStatusService.userStatus().status === 'busy'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'busy'\"\n [class.tw-ring-orange-200]=\"userStatusService.userStatus().status === 'busy'\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-orange-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Busy</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'busy'\" type=\"none\"\n size=\"xs\" class=\"tw-text-orange-600\">check</cide-ele-icon>\n </button>\n\n <button (click)=\"setUserStatus('do-not-disturb')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-red-50 tw-group\"\n [class.tw-bg-red-50]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n [class.tw-ring-red-200]=\"userStatusService.userStatus().status === 'do-not-disturb'\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-red-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Do not disturb</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n type=\"none\" size=\"xs\" class=\"tw-text-red-600\">check</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Enhanced Quick Actions Section -->\n <div class=\"tw-p-4 tw-bg-gray-50/50\">\n <h4\n class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3 tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-gray-100 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon type=\"none\" size=\"2xs\" class=\"tw-text-gray-600\">bolt</cide-ele-icon>\n </div>\n Quick Actions\n </h4>\n <div class=\"tw-space-y-1\">\n <a href=\"#\"\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-blue-200 tw-transition-colors\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-blue-600\">person</cide-ele-icon>\n </div>\n <span class=\"tw-flex-1\">View Profile</span>\n <cide-ele-icon type=\"none\" size=\"xs\"\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n </a>\n <a href=\"#\"\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon type=\"none\" size=\"xs\"\n class=\"tw-text-gray-600\">settings</cide-ele-icon>\n </div>\n <span class=\"tw-flex-1\">Preferences</span>\n <cide-ele-icon type=\"none\" size=\"xs\"\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n </a>\n </div>\n </div>\n\n <!-- Enhanced Sign Out Section -->\n <div class=\"tw-p-4\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-3 tw-py-2.5 tw-text-sm tw-text-red-600 tw-rounded-lg hover:tw-bg-red-50 tw-transition-all tw-duration-200 tw-font-medium\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-red-200 tw-transition-colors\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-red-600\">logout</cide-ele-icon>\n </div>\n <span class=\"tw-flex-1\">Sign out</span>\n </a>\n </div>\n </div>\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-4 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-3 tw-mb-4\">\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-4\">\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-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-3 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-4\"\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-3\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\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-3 tw-py-2 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-3 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ 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-2\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-2 tw-py-0.5 tw-bg-gray-200 tw-text-gray-600 tw-rounded-full tw-text-xs 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-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\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)\"\n (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n role=\"button\"\n class=\"menu-item tw-flex tw-items-center tw-px-1 tw-py-1 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-3 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\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n <div\n class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500\">\n <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\n with improved visualizations.</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\n </div>\n </div>\n </div>\n\n <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\n </div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-4 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}.cide-lyt-sidebar.collapsed{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)}.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-theme-color-brand-primary) 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-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.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),#fff0)}.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),#fff0)}.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%;padding-top:.75rem;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:#f3f4f6;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, rgba(243, 244, 246, 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,#ffffff4d,#fff0);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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}@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:auto;background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgba(243,244,246,1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform}.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 rgba(243,244,246,.8);padding:1rem .75rem;transition:all .3s ease}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px #0000001a}.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:#f3f4f6}.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:#f3f4f6cc;border-radius:.25rem;border:1px solid rgba(229,231,235,.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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.5rem 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:3px 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}}.dark-mode .active-menu-item{background-color:#1e293b80;box-shadow:0 2px 5px #0f172a33}.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,#60a5fa,#3b82f6);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:#ffffffb3;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;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden}.notification-item:hover{background-color:#f3f4f6;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 rgba(243,244,246,.8);padding:.75rem;transition:all .3s ease}.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,#fff0,#fff3,#fff0);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:#f3f4f680}.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:rgba(209,213,219,.5) 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}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(255,255,255,.9),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,rgba(255,255,255,.9),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:#d1d5db80;border-radius:20px}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.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}.dark-mode{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:#1e293b;color:var(--cide-theme-light-color)}.dark-mode .cide-lyt-stack{background-color:#0f172a;border-right-color:#1e293b}.dark-mode .cide-lyt-stack:before,.dark-mode .cide-lyt-stack:after,.dark-mode .sidebar-content:before,.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,rgba(15,23,42,.9),transparent)}.dark-mode .sidebar-content:after,.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,rgba(15,23,42,.9),transparent)}.dark-mode .cide-lyt-sidebar-menu{background-color:#0f172a;border-left-color:#1e293b}.dark-mode .sidebar-header,.dark-mode .sidebar-footer{background-color:#0f172af2;border-color:#1e293b}.dark-mode .tw-text-gray-700{color:#e2e8f0}.dark-mode .tw-text-gray-500{color:#94a3b8}.dark-mode .tw-bg-gray-50,.dark-mode .menu-item:hover{background-color:#1e293b80}.dark-mode .tw-bg-gray-100{background-color:#1e293b}.dark-mode .tw-bg-gray-200{background-color:#334155}.dark-mode .nav-item:hover:before{background-color:#60a5fa1a}.dark-mode .back-button:hover{background-color:#1e293bb3}.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,#33415500,#33415580,#33415500)}.dark-mode .toggle-track:after{background:#00000080}.dark-mode .alert-box:before{opacity:.2}.dark-mode :host ::ng-deep .cide-input-field{background-color:#1e293b;color:#e2e8f0}.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:#475569;background-color:#0f172a}.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.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 .5rem}.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}.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}.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)}.dark-mode .nav-item:hover{background-color:#33415580;box-shadow:0 2px 8px #0f172a4d}.dark-mode .nav-tooltip{background-color:#0f172ae6;box-shadow:0 3px 10px #0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dark-mode .nav-tooltip:before{border-color:transparent rgba(15,23,42,.9) 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)}.dark-mode .nav-item:hover{background-color:#ffffff1a}.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 30%,var(--cide-theme-dark-color))}.dark-mode .user-avatar{border-color:var(--cide-theme-dark-color);background-color:#ffffff1a}.dark-mode .user-status{border-color:var(--cide-theme-dark-color)}.dark-mode .user-menu{background-color:var(--cide-theme-dark-color);border-color:#ffffff1a}.dark-mode .user-menu a{color:#fffc}.dark-mode .user-menu a:hover{background-color:#ffffff1a}.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", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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: [
|
|
2346
2349
|
trigger('slideInOut', [
|
|
2347
2350
|
state('in', style({
|
|
2348
2351
|
opacity: 1,
|
|
@@ -2376,7 +2379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
2376
2379
|
transition('in => out', animate('200ms ease-in')),
|
|
2377
2380
|
transition('out => in', animate('200ms ease-out'))
|
|
2378
2381
|
])
|
|
2379
|
-
], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\r\n <!-- First tier sidebar (Icon only) -->\r\n <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\r\n <!-- Scrollable content -->\r\n <div class=\"sidebar-scroll-content\">\r\n <!-- Collapse/Expand toggle -->\r\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\r\n (keydown.enter)=\"toggleSidebar()\">\r\n <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\r\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\r\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\r\n </cide-ele-icon>\r\n </div> <!-- Main navigation icons - Enhanced Design -->\r\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n @for (core_system_module_item of core_system_module(); track $index) {\r\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\r\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\r\n tooltipPlacement=\"right\"\r\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\r\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\r\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\r\n\r\n <!-- Notification Badge with enhanced design -->\r\n @if (core_system_module_item?.syme_ping) {\r\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\"\r\n style=\"background-color: var(--cide-theme-error-color);\">\r\n </div>\r\n }\r\n\r\n <!-- Enhanced icon with better visual effects -->\r\n <div\r\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\r\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\r\n tw-border-2 tw-border-transparent\r\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\r\n <cide-ele-icon type=\"box\" size=\"xs\"\r\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\r\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\r\n {{core_system_module_item?.syme_icon || 'dashboard'}}\r\n </cide-ele-icon>\r\n </div>\r\n\r\n <!-- Modern active indicator -->\r\n @if (activeModuleId === core_system_module_item._id) {\r\n <div\r\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\">\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Bottom section with enhanced theme toggle and user avatar -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-3 tw-mt-auto tw-pb-4\">\r\n <!-- Theme toggle with modern design -->\r\n <div class=\"nav-item tw-group\">\r\n <div class=\"nav-tooltip\">Toggle Theme</div>\r\n <button class=\"theme-toggle\" (click)=\"toggleTheme()\" (keydown.enter)=\"toggleTheme()\"\r\n (keydown.space)=\"toggleTheme()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle theme\">\r\n <cide-ele-icon type=\"box\" size=\"sm\">\r\n {{darkMode() ? 'light_mode' : 'dark_mode'}}\r\n </cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- User avatar with dropdown -->\r\n <div class=\"tw-relative user-dropdown\" (click)=\"toggleUserMenu()\" (keydown.enter)=\"toggleUserMenu()\"\r\n (keydown.space)=\"toggleUserMenu()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle user menu\"\r\n [attr.aria-expanded]=\"showUserMenu()\">\r\n <div class=\"nav-tooltip\">Your Profile</div>\r\n <div class=\"user-avatar tw-w-10 tw-h-10 tw-rounded-full tw-overflow-hidden tw-bg-gray-200 tw-border-2 tw-shadow-sm tw-cursor-pointer hover:tw-shadow\"\r\n style=\"border-color: var(--cide-theme-sidebar-color);\">\r\n <img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAADACAMAAAB/Pny7AAAA8FBMVEX///8Qdv8QUuf///0QUegNdP////sAcv8Ab/8Abf/M4vASX+8Ab/3n7vgAbvgETufR4PP0//sAaf0ASeU6YuMyW+fe8PcAafbC1velwfGWufCOsvL1/P3u9vh7qfh3pvgARucRWOu10vBglOmnxuw0fOValuYAbOdYk/EAYPgAZ+o9hPJMi+TH3/duoONwnuwdefe0yvRunfZ6pe1LiOk6gfuRu+y11eurvuU3YtmRpuCitOO7xuvG1OlJjPYdc+iNnOFOcOFceOJlg93Jz+wANt6kte58kNp1kOgAQMkZOdQOTNUAKNkfU9FMb9I9Zs4gMZ6mAAAPKUlEQVR4nO1dC1fiuhZum6ZFoA+sFIH2TAUclQ6KgzoKPlB08Dgz3v//b26StohjH0la1LMW39KjI5yGr/uRnb13E0FYY4011lhjjTXWWGONNdbgBgi+AfkG+Af5JXxl8QP9BYAP+oj0AITDCxnl1b+E5X98fjLBxwXRpwWOa9smgW27DpFQ+Mp/gQthowhCrdxpjbon/inCkHydnu6edEetTrmG3qb8FyRDbrrdO9zVdRGKIkRQYQhVxb+Kur572LPBwoo+HxAJBYtEsXtf9yqbVVUUMZkElDYre197NpajsOwdPg2Q3rj2mV85QLc/kcULYHWz75/ZrvAZTQi4ZvMEiYSGSAR1s/KtabpYOsqnIYM+jbY92ttUg3tOyYe8T93cG21riqB8NAchcsSK2dzXNyAxElrJwOitcEPfb5rhvPOhPo5oiNm+blQZtOsNqo3rtrmYVD+MCxq73PYbah4qGGpE5wMlAwS75eu5qWCNU/Xrlg0+UDIA9HwxfUZhgCr6vY+QTHAHQbmrq4XwCAH1rh24gXflQqKrs34BCvaajdo/w1POO7MBwD45KJgKZiMe7NrK+9oNilx6/Y3iuWCo/Z77vly0kV6ksUQg11T1kfZeTk1RgDLYb6yAyoKRvj94H7eGRnF6fml1XDBKfs95HzJOa5greMkGFKvD1juwAUptJBbtkf+iQqJpceSsWNXQ5WtfiwhfsgmhCdRZ7SIHTWjfVmwuL6h+c1a6ZlOck2oxgRgFYOmktjpNA4pL5MLEJszJwCAzw8am+s1djWjwMt09YosroS6SfFmEoYjtjfoSaF1w5K5ENDj5MtIZiOCQ/nvruPyCQafV9cXqy4o56wpo+hythA3i0sYBP3W2QvfbA0d4iedJLFwbtH2WQAjqbXcVZJzmkEHp1f4oXNUv3w8Mc9Snsx7yHjhsOgUTwRbTuaHS9zDlstdzg9Te0mIrXOO7vT2q1WnwhupNBxSbysWrSp/OKcPgE7yKFF9/EgAGe9QJKRTZ+GWlwNUaKU3sU0+WUCzdmEry8OgV86YqUro1dLWTIgMbrGWHm5Smj13VjQlSMpQka3hDZ3/E8W0cFqlmQPlRGdLeSmQvA5AiGGI6CpOmHfwokkutT+/H4F4nWymQP6Fmg9B3FaWg1C1QjhgCZb1N4UuB4rQZFqtqVymq1AZ6DOGYem3SXdT0WZbevaLyT+VrloisTWesQJhK1PKG8NouQjJomTxioAJPe3SXFYTL+k44w1LdIyc/GXSF7VMGi1F9k0oyeLK5MHaoRa6ebhfgnlHcz5K+UK9tWuXWbg2pItJW2qpH+SNOAHpDBi6ifqLRcQFAu7MkaYf2wnBIp7+pY2rfmfJKepdOt3H6bWbJEpENDRex1NXyclGOG0zLZDiiV+25jMhIFdrLNzp5A06NPsAkQMpAJxn0fb5jIDIyFRv0HnVfyzfZgA6lGkRjnpapc95A2zKwbAI2FIwqHSVXjd39xpaJVX36rCpwbolkEBudatmndnMkBNA9HjBm++E1ZaoLh86YDLaayG7S+aBXGwPuOhRe8x4xVpSwmlF6ZgDMrYgMpd1sHHHHNLjU12fjgtCmlAz6moZUEIwKVd6nb/NRQVDA2SYrFxVHhHRkUAQQkaGdbzbPeDOcyHXssXIRoT+gvf594MxCNjIVmz0+KgigzF5PhqcdyotjMtIyaOzmoMzN5pCjfEEfQk3q8isyRDYZhEqHnFRArc9TvmjRes+x/JpMIJuMEfdqnGw6rDUIjMaI7k6hlab3WjBypqZhrpRa/Ga4Q9Z6Ch6tP6JyOMiBT6U3osm2GxzIss41+O3uNXvxEvrNK6qABs3/95MLOVbT0lQNXrOnN/H7ByxZ/2AkYjG04QyyGumNaOQMu4HDAXPkjMdqMfeRobf/oGzmI/2ynRhFy4xsqB3MMhlwRF1ZWsI2pRKQlcnlGyrZbPQj5vAMjeWesPZhYAU5Zrlv50Ycm3QvUD1hL9qimNZnlQsyMdgWGBqSpkYMFTldNvCUvUkICGxZmYhOl0Uys1jJZMw3tAvzV2gzlJZfyPj02a1o2RxDJk02epuVCRBqX3j6SuCpSZd0wKpyVY9TsywvUP1SY7YZe5+rDwvHmXRkFGGyE2v/GWyq+8wrNGAypf5fMKIt2eEygPx21sz0abQ1k+WRtk+5yKhdOiXA0ptZMZPmEhsxdtaGp9vMZI45nBkeyjep9Ay9w7xINJmFbOLIDI+ZyTS5uCAcmS5FSAPcq8c0sSw07W18qDdZyYAWh2cmGA6nmpBWOifQpn9S7IUgfvaEUG8xzjNAYamfvsYGstBMMuatlyWXpNmz0WaMZ4Az4iaDexoyRzP/ZBhMpGkxZEasjbXuP/zd8ZXt1MHIk13bD1RcIk1bFtDGP6zt9e4XfjKbGT3JOBT9SUkmJg+98YWVjPadnwzO1qfOnEDQ0BxDJxn5jRcofWctoeUhA/fMNN+Mn7U1JTqTiWEDecjk6F/ebKX2u6EXx9RaJkl/Z255yPD3+0Pc15QSBqTGy/FslmXDTAbkkoxY3bWTszTIYi4oLWaZzYJP9Z3JiNVrN9ls7Asv+/O/4hKwgbySyeOaCZtvbpLR2M+MXAgWdgPZXXOeSTNi8zbqwLsG2M9WZiCTwgayT5p5wpmITWz1AQhzLzNajsWi4sEczgCmRr1YwJjGM2xH0/hkWTaZyKc12qxk+JcAERexFXvduAQzFZdF9wNaAjBxybM4izBsxvgz9Je0NEYWoUDTWBdnAu+yeYlMJ+4GAuGyzk2GsFE5ls2cCY0FSBo17sJXW0yz/1+ocCU0TI5S0zLUUztuogFAy8pjpAgGz54cqSbeJGAkl9LBt3ifA5zn30srZnaV2/nOngTkSs/CoIinHvQPB1pMCz12CYq2Pbd+44nzbRGQBt4j6wM1aFCOxDmhAjcrXwdOtHlWzJXRn53t2YMXmzXPhjVlLZ0B1kbTBZ/qzVlkLDFkgh0esMzs8R/L4JCNXJ8wCgYPO2B3Z6o63O254dNZ8UFztMcZFs/5rcQephlbV8zVGQDcE5V6cx8iE6gP9ztO9FxW/Igg+iJwLp/rIR1qUsYdXdvUKy6kQMuC6nC/V2MaB6mbcz4jdNLKAX+ReeSpNrOVzlVxv+kKac8Axd8x4E7uDIueiySNmR9zwmrC0tRQ9VsaTskyDRMaj/bzwqNmI9ev2Jsa8Ox2TU2m+tUUOJ4LAwLh75gz2rWnbNxyPq0xog1oGiPe/UjCz6XNPRKrZFGRZOuRr08bdCiNZvMo50OuuIrmUXg0RMa4VPjatGt0vbNwz8n7aAtStX/Ta4IhGempRlcAfgu6tsZKmfNmvXBBGDzQqJk3T5yOszCgaTitjtgcchIhbDaZevZwxXt5kNkKjN1dv5i9lYD5lC0Y4xfvgw1I9hRN2qUjl8Mpx8B9zPbPD2Puoaja5xu4TFaEnimXT1lcjCfKZ8DiuAhK5oMNqp/34anFcOnraezqvEf+BxtQJDiopM81cIN7vnwznDtP0zNkMMj8uXfXwj4w82GgxnFR23kC0MzQM+8uMRlPc30l6zEtuJdeWWYa7f5Xqp5JD5cC/zY0OKrVUpM0UL02iyIDgHmbWoOynrnNPxqik5pA3/iuFbfvgJYePD8d53WaQOumiYY5I58ykpDuAbxZXsFkNZ42WJtyUof6mUJG/nWefwTgHqUk0BrN4rRMSCVjPeZXaHQB8gh9wmSjNwuTDK52JJMxti7zB00gfXODAtUMACVRMrJszIvY3AA30l4n7gRWGhW3L1RiCIAiGePWLCCcJSm9XuKWhtAvbJ5Ja9qUpXOhgL2cg2xQNzG1UZQHwOr8M7E50JsVsgAkUNBSIDbtBEV4U07K9zMxwQFAUjQjy092cfJXlB8HSbONuhtXiGEECgIVLbkJ5fd2odvPgcOEhQ2EKpJNzm0I8XY/5T9WUg7AmxfEIgAQnJNqTMt00HFYGWta8C7ey2va+CEx1eQ9O0KB5wZgjS771cRsbeXX46XpRrnjqKYR530WBTUQbi2OQwzz+PFXcmOwtVWgw4w+Recm+WiJkvVwMZ3ca2RDQyU6gSapRkP2BAu4Otp9c3rxlNJOY9VZK+UUZBSnOYx30LjHXd+xvKet2XSCJKSA6BPHXEZYNDwqmnk/mc7+PHlpqxijPil4g8OAjduO3zSStLVVd9A07XnS1t3jdHx+b9opSwPHNu/Px/PZ3ZbleUZQdk4QjWxMV7ORpuCOYuPNcFdF0hIjGxa60fWt27vZbD4dTyaX91dXwTFHV1f3l5PJeDp/nN3dbtUNz7KM9H4AnPSfr2aLUwT3CJc5EwjpOy9bFRgWgmFIO/X61gvqCFL4EkVtCXOZrYwLCgXxRrrxbgAiu5GX7nCoPcYrYG2Sk5XqbzYeWfWvhg3eevok0QmgYCBqvloUkKMPH/5ZllhKsZL3P6egbGksFMVJ2Hw6mD4jGrK0VAh7/YOaDZILWsIoq9x+GtS+ppxkBHdY6sapMKyZoxS8UesbKA7esD0pGNB3iqEiGdIcKKs/hyLYSj/BCyz7tDyw6mMHFLRzZhoXFHSmHXKg87dgLiB7F+dOUnhXMBkABvvJhqPnthvZer4PQ9JVqxmGkngwCAxjgRx0DGteYM43E4Ac2ZKYF6jyywb9b9a/5+96ZIuQfJgOjNhwcpEfLvh3yuImgybQs0pMqjOIBXgkg5XTepqEa7d3hgLsrp6UtJFYzCaKGAzrmW5/1NXQ6fkJM44qMdAJuucs+WKSu3GFE8FaUmv5eimOEFMsgO3euB1rLLuJrIANAPhkQFVcfj58ebVGCcu7nZpJa+13ohOkojGdmJCAmo3sebfjoMHvI88GJIyQYyNHUL6Zd7LZkAWOZ939NAFjf+eqAP46HPTFpWXMnvhF7+HX/FJTiszy5ULYXh4c26ouccmKOmXL+/08CY5t/SxkwrZs9F/XbvmNzY3AFxA3oOPbH0vI8B4eLsaaC1LPEPhgBEcdl6IjgtUl65CCqVGWMZF/Zz37HVZfeRCkj/Eh1KIenHBUIlmZpfyMZDxdzM9xAAYyN6f4YCz8a3g8+K5/Q/JlCFsXt8+z+fi87ArhkycrXuHnRrSiCicMfHC7eYVhmrYWZY1f5sZPzSVMc4VMwkdlFq8sfv/AM4DXWGONNdZYY4011lhjjTU+I/4P0EdBunobKkUAAAAASUVORK5CYII=\"\r\n alt=\"User\" class=\"tw-w-full tw-h-full tw-object-cover\"\r\n onerror=\"this.src='data:image/png;base64,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'\">\r\n <!-- Modern Status Indicator Circle -->\r\n <div class=\"tw-absolute -tw-bottom-0.5 -tw-right-0.5 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-transition-all tw-duration-200\r\n {{getUserStatusClass()}}\" [cideEleTooltip]=\"getUserStatusText()\"\r\n tooltipPlacement=\"left\">\r\n <!-- Pulse animation for active status -->\r\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\r\n {{getUserStatusClass()}}\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced User dropdown menu with modern status options -->\r\n <div *ngIf=\"showUserMenu()\"\r\n class=\"user-menu tw-absolute tw-left-full tw-bottom-0 tw-mt-2 tw-ml-2 tw-w-72 tw-rounded-xl tw-shadow-2xl tw-bg-white tw-ring-1 tw-ring-black/5 tw-divide-y tw-divide-gray-100 tw-z-50 tw-backdrop-blur-sm\">\r\n\r\n <!-- Enhanced User Info Section -->\r\n <div class=\"tw-p-5 tw-bg-gradient-to-br tw-from-blue-50 tw-to-indigo-50\">\r\n <div class=\"tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-relative\">\r\n <div\r\n class=\"tw-w-12 tw-h-12 tw-rounded-xl tw-bg-gradient-to-br tw-from-blue-500 tw-via-purple-500 tw-to-indigo-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-semibold tw-text-sm tw-shadow-lg\">\r\n JD\r\n </div>\r\n <!-- Enhanced status indicator -->\r\n <div class=\"tw-absolute -tw-bottom-1 -tw-right-1 tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-white tw-shadow-md tw-transition-all tw-duration-300\"\r\n [class]=\"getUserStatusClass()\" [title]=\"getUserStatusText()\">\r\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\"\r\n [class]=\"getUserStatusClass()\"></div>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-truncate\">John Doe</div>\r\n <div class=\"tw-text-sm tw-text-gray-600 tw-truncate\">john.doe@company.com</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1 tw-flex tw-items-center tw-gap-1\">\r\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500 tw-animate-pulse\">\r\n </div>\r\n <span>Active now</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced Status Selection Section -->\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-blue-100 tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon type=\"none\" size=\"2xs\"\r\n class=\"tw-text-blue-600\">radio_button_checked</cide-ele-icon>\r\n </div>\r\n Set Status\r\n </h4>\r\n <span\r\n class=\"tw-text-xs tw-text-gray-500 tw-bg-gray-100 tw-px-2 tw-py-1 tw-rounded-full\">Auto-away\r\n in 5min</span>\r\n </div>\r\n\r\n <div class=\"tw-space-y-1\">\r\n <button (click)=\"setUserStatus('online')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-green-50 tw-group\"\r\n [class.tw-bg-green-50]=\"userStatusService.userStatus().status === 'online'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'online'\"\r\n [class.tw-ring-green-200]=\"userStatusService.userStatus().status === 'online'\">\r\n <div class=\"tw-relative\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-green-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-bg-green-500 tw-animate-ping tw-opacity-75\"\r\n *ngIf=\"userStatusService.userStatus().status === 'online'\"></div>\r\n </div>\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Online</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'online'\" type=\"none\"\r\n size=\"xs\" class=\"tw-text-green-600\">check</cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"setUserStatus('away')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-yellow-50 tw-group\"\r\n [class.tw-bg-yellow-50]=\"userStatusService.userStatus().status === 'away'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'away'\"\r\n [class.tw-ring-yellow-200]=\"userStatusService.userStatus().status === 'away'\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-yellow-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Away</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'away'\" type=\"none\"\r\n size=\"xs\" class=\"tw-text-yellow-600\">check</cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"setUserStatus('busy')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-orange-50 tw-group\"\r\n [class.tw-bg-orange-50]=\"userStatusService.userStatus().status === 'busy'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'busy'\"\r\n [class.tw-ring-orange-200]=\"userStatusService.userStatus().status === 'busy'\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-orange-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Busy</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'busy'\" type=\"none\"\r\n size=\"xs\" class=\"tw-text-orange-600\">check</cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"setUserStatus('do-not-disturb')\"\r\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-red-50 tw-group\"\r\n [class.tw-bg-red-50]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\r\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\r\n [class.tw-ring-red-200]=\"userStatusService.userStatus().status === 'do-not-disturb'\">\r\n <div\r\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-red-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\r\n </div>\r\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Do not disturb</span>\r\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'do-not-disturb'\"\r\n type=\"none\" size=\"xs\" class=\"tw-text-red-600\">check</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced Quick Actions Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50\">\r\n <h4\r\n class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3 tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-gray-100 tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon type=\"none\" size=\"2xs\" class=\"tw-text-gray-600\">bolt</cide-ele-icon>\r\n </div>\r\n Quick Actions\r\n </h4>\r\n <div class=\"tw-space-y-1\">\r\n <a href=\"#\"\r\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-blue-200 tw-transition-colors\">\r\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-blue-600\">person</cide-ele-icon>\r\n </div>\r\n <span class=\"tw-flex-1\">View Profile</span>\r\n <cide-ele-icon type=\"none\" size=\"xs\"\r\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\r\n </a>\r\n <a href=\"#\"\r\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-gray-200 tw-transition-colors\">\r\n <cide-ele-icon type=\"none\" size=\"xs\"\r\n class=\"tw-text-gray-600\">settings</cide-ele-icon>\r\n </div>\r\n <span class=\"tw-flex-1\">Preferences</span>\r\n <cide-ele-icon type=\"none\" size=\"xs\"\r\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\r\n </a>\r\n </div>\r\n </div>\r\n\r\n <!-- Enhanced Sign Out Section -->\r\n <div class=\"tw-p-4\">\r\n <a href=\"#\"\r\n class=\"tw-group tw-flex tw-items-center tw-px-3 tw-py-2.5 tw-text-sm tw-text-red-600 tw-rounded-lg hover:tw-bg-red-50 tw-transition-all tw-duration-200 tw-font-medium\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-red-200 tw-transition-colors\">\r\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-red-600\">logout</cide-ele-icon>\r\n </div>\r\n <span class=\"tw-flex-1\">Sign out</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> <!-- Second tier sidebar (Expanded view) -->\r\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\r\n <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n <!-- Header section with search and options -->\r\n <div class=\"sidebar-header tw-p-4 tw-border-b tw-border-gray-100\">\r\n <!-- Title with back button - Clean layout without online indicator -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-mb-4\">\r\n <button\r\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\"\r\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\r\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\r\n getActiveModuleIcon() }}</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\r\n {{ appState.getActiveModuleTitle() || 'Menu' }}\r\n </h2>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\r\n Module Dashboard\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- Search and options -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"search-wrapper tw-relative tw-flex-1\">\r\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\r\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\r\n </cide-ele-input>\r\n <div\r\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\">\r\n \u2318K</div>\r\n </div>\r\n <button\r\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\"\r\n (click)=\"toggleOptions()\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\r\n </button>\r\n\r\n <!-- Options dropdown menu -->\r\n <div *ngIf=\"showOptions()\"\r\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\">\r\n <div class=\"tw-py-1\">\r\n <a href=\"#\"\r\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\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\r\n Refresh\r\n </a>\r\n <a href=\"#\"\r\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\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\r\n Sync settings\r\n </a>\r\n </div>\r\n <div class=\"tw-py-1\">\r\n <a href=\"#\"\r\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\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\r\n Help & support\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Menu items with categories -->\r\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\r\n <!-- Search results if searching -->\r\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\r\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\r\n </div>\r\n\r\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\r\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\r\n class=\"menu-item tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50\">\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500\" type=\"none\"\r\n size=\"xs\">{{item.icon}}</cide-ele-icon>\r\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\r\n </a>\r\n </div>\r\n\r\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\r\n </div>\r\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\r\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Only show these sections if not searching -->\r\n <ng-container *ngIf=\"!searchText()\">\r\n <!-- Loading state -->\r\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\r\n </div>\r\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\r\n </div>\r\n\r\n <!-- Dynamic menu tree -->\r\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-4\"\r\n [class.animate-in]=\"animateSections()[0]\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\r\n </div>\r\n\r\n <!-- Empty state -->\r\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\r\n class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\r\n </div>\r\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\r\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Recursive menu template -->\r\n <ng-template #recursiveMenu let-menus let-level=\"level\">\r\n <div [class.tw-ml-0]=\"level > 0\">\r\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\r\n <!-- Title type items (section headers) -->\r\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-3\">\r\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\r\n menu.syme_title }}</h3>\r\n <!-- Render children of title -->\r\n <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Section type items (collapsible sections) -->\r\n <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\r\n <!-- Section header (clickable to expand/collapse) -->\r\n <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\r\n (keydown.space)=\"toggleSection(menu._id)\"\r\n class=\"section-header tw-w-full tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\r\n [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\r\n role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\r\n [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\r\n\r\n <!-- Section Icon (left side, like other menu items) -->\r\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\r\n menu.syme_icon || 'folder' }}</cide-ele-icon>\r\n\r\n <!-- Section Title -->\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title\r\n }}</span>\r\n\r\n <!-- Right side icons container -->\r\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\r\n <!-- Child Count Badge -->\r\n <span *ngIf=\"menu.children && menu.children.length > 0\"\r\n class=\"tw-px-2 tw-py-0.5 tw-bg-gray-200 tw-text-gray-600 tw-rounded-full tw-text-xs tw-font-medium\">\r\n {{ menu.children.length }}\r\n </span>\r\n\r\n <!-- Expand/Collapse Icon (right side) -->\r\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\r\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\r\n size=\"2xs\">chevron_right</cide-ele-icon>\r\n </div>\r\n </button>\r\n\r\n <!-- Section Content (collapsible) -->\r\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\r\n class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\r\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Menu type items (clickable links) -->\r\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\r\n (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\r\n role=\"button\"\r\n class=\"menu-item tw-flex tw-items-center tw-px-1 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\r\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-3 tw-text-gray-500\" type=\"none\"\r\n size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\r\n <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\r\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\r\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\r\n size=\"2xs\">chevron_right</cide-ele-icon>\r\n </a>\r\n\r\n <!-- Render nested children for menu items -->\r\n <ng-container\r\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Notification panel (overlays content when shown) -->\r\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\r\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\r\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\r\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\r\n (click)=\"toggleNotificationsPanel()\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\r\n <button class=\"tw-text-xs tw-text-blue-500\">Mark all as read</button>\r\n </div>\r\n\r\n <div class=\"tw-space-y-3\">\r\n <div\r\n class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\r\n <div class=\"tw-flex tw-gap-3\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\r\n with improved visualizations.</div>\r\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\r\n <div class=\"tw-flex tw-gap-3\">\r\n <div\r\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\r\n <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Storage info at bottom -->\r\n <div class=\"sidebar-footer tw-p-4 tw-border-t tw-border-gray-100\">\r\n <!-- for info display -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Resizer -->\r\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\r\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\r\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\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}.cide-lyt-sidebar.collapsed{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)}.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-theme-color-brand-primary) 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-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.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),#fff0)}.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),#fff0)}.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%;padding-top:.75rem;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:#f3f4f6;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, rgba(243, 244, 246, 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,#ffffff4d,#fff0);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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}@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:auto;background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgba(243,244,246,1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform}.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 rgba(243,244,246,.8);padding:1rem .75rem;transition:all .3s ease}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px #0000001a}.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:#f3f4f6}.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:#f3f4f6cc;border-radius:.25rem;border:1px solid rgba(229,231,235,.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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.5rem 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:3px 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}}.dark-mode .active-menu-item{background-color:#1e293b80;box-shadow:0 2px 5px #0f172a33}.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,#60a5fa,#3b82f6);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:#ffffffb3;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;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden}.notification-item:hover{background-color:#f3f4f6;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 rgba(243,244,246,.8);padding:.75rem;transition:all .3s ease}.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,#fff0,#fff3,#fff0);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:#f3f4f680}.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:rgba(209,213,219,.5) 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}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(255,255,255,.9),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,rgba(255,255,255,.9),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:#d1d5db80;border-radius:20px}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.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}.dark-mode{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:#1e293b;color:var(--cide-theme-light-color)}.dark-mode .cide-lyt-stack{background-color:#0f172a;border-right-color:#1e293b}.dark-mode .cide-lyt-stack:before,.dark-mode .cide-lyt-stack:after,.dark-mode .sidebar-content:before,.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,rgba(15,23,42,.9),transparent)}.dark-mode .sidebar-content:after,.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,rgba(15,23,42,.9),transparent)}.dark-mode .cide-lyt-sidebar-menu{background-color:#0f172a;border-left-color:#1e293b}.dark-mode .sidebar-header,.dark-mode .sidebar-footer{background-color:#0f172af2;border-color:#1e293b}.dark-mode .tw-text-gray-700{color:#e2e8f0}.dark-mode .tw-text-gray-500{color:#94a3b8}.dark-mode .tw-bg-gray-50,.dark-mode .menu-item:hover{background-color:#1e293b80}.dark-mode .tw-bg-gray-100{background-color:#1e293b}.dark-mode .tw-bg-gray-200{background-color:#334155}.dark-mode .nav-item:hover:before{background-color:#60a5fa1a}.dark-mode .back-button:hover{background-color:#1e293bb3}.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,#33415500,#33415580,#33415500)}.dark-mode .toggle-track:after{background:#00000080}.dark-mode .alert-box:before{opacity:.2}.dark-mode :host ::ng-deep .cide-input-field{background-color:#1e293b;color:#e2e8f0}.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:#475569;background-color:#0f172a}.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.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 .5rem}.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}.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}.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)}.dark-mode .nav-item:hover{background-color:#33415580;box-shadow:0 2px 8px #0f172a4d}.dark-mode .nav-tooltip{background-color:#0f172ae6;box-shadow:0 3px 10px #0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dark-mode .nav-tooltip:before{border-color:transparent rgba(15,23,42,.9) 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)}.dark-mode .nav-item:hover{background-color:#ffffff1a}.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 30%,var(--cide-theme-dark-color))}.dark-mode .user-avatar{border-color:var(--cide-theme-dark-color);background-color:#ffffff1a}.dark-mode .user-status{border-color:var(--cide-theme-dark-color)}.dark-mode .user-menu{background-color:var(--cide-theme-dark-color);border-color:#ffffff1a}.dark-mode .user-menu a{color:#fffc}.dark-mode .user-menu a:hover{background-color:#ffffff1a}.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"] }]
|
|
2382
|
+
], 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)\"\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)\">\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\n <!-- Bottom section with enhanced theme toggle and user avatar -->\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-3 tw-mt-auto tw-pb-4\">\n <!-- Theme toggle with modern design -->\n <div class=\"nav-item tw-group\">\n <div class=\"nav-tooltip\">Toggle Theme</div>\n <button class=\"theme-toggle\" (click)=\"toggleTheme()\" (keydown.enter)=\"toggleTheme()\"\n (keydown.space)=\"toggleTheme()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle theme\">\n <cide-ele-icon type=\"box\" size=\"sm\">\n {{darkMode() ? 'light_mode' : 'dark_mode'}}\n </cide-ele-icon>\n </button>\n </div>\n\n <!-- User avatar with dropdown -->\n <div class=\"tw-relative user-dropdown\" (click)=\"toggleUserMenu()\" (keydown.enter)=\"toggleUserMenu()\"\n (keydown.space)=\"toggleUserMenu()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle user menu\"\n [attr.aria-expanded]=\"showUserMenu()\">\n <div class=\"nav-tooltip\">Your Profile</div>\n <div class=\"user-avatar tw-w-10 tw-h-10 tw-rounded-full tw-overflow-hidden tw-bg-gray-200 tw-border-2 tw-shadow-sm tw-cursor-pointer hover:tw-shadow\"\n style=\"border-color: var(--cide-theme-sidebar-color);\">\n <img src=\"data:image/png;base64,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\"\n alt=\"User\" class=\"tw-w-full tw-h-full tw-object-cover\"\n onerror=\"this.src='data:image/png;base64,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'\">\n <!-- Modern Status Indicator Circle -->\n <div class=\"tw-absolute -tw-bottom-0.5 -tw-right-0.5 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-transition-all tw-duration-200\n {{getUserStatusClass()}}\" [cideEleTooltip]=\"getUserStatusText()\"\n tooltipPlacement=\"left\">\n <!-- Pulse animation for active status -->\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\n {{getUserStatusClass()}}\"></div>\n </div>\n </div>\n\n <!-- Enhanced User dropdown menu with modern status options -->\n <div *ngIf=\"showUserMenu()\"\n class=\"user-menu tw-absolute tw-left-full tw-bottom-0 tw-mt-2 tw-ml-2 tw-w-72 tw-rounded-xl tw-shadow-2xl tw-bg-white tw-ring-1 tw-ring-black/5 tw-divide-y tw-divide-gray-100 tw-z-50 tw-backdrop-blur-sm\">\n\n <!-- Enhanced User Info Section -->\n <div class=\"tw-p-5 tw-bg-gradient-to-br tw-from-blue-50 tw-to-indigo-50\">\n <div class=\"tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-relative\">\n <div\n class=\"tw-w-12 tw-h-12 tw-rounded-xl tw-bg-gradient-to-br tw-from-blue-500 tw-via-purple-500 tw-to-indigo-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-semibold tw-text-sm tw-shadow-lg\">\n JD\n </div>\n <!-- Enhanced status indicator -->\n <div class=\"tw-absolute -tw-bottom-1 -tw-right-1 tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-white tw-shadow-md tw-transition-all tw-duration-300\"\n [class]=\"getUserStatusClass()\" [title]=\"getUserStatusText()\">\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\"\n [class]=\"getUserStatusClass()\"></div>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <div class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-truncate\">John Doe</div>\n <div class=\"tw-text-sm tw-text-gray-600 tw-truncate\">john.doe@company.com</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1 tw-flex tw-items-center tw-gap-1\">\n <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500 tw-animate-pulse\">\n </div>\n <span>Active now</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Enhanced Status Selection Section -->\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-blue-100 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon type=\"none\" size=\"2xs\"\n class=\"tw-text-blue-600\">radio_button_checked</cide-ele-icon>\n </div>\n Set Status\n </h4>\n <span\n class=\"tw-text-xs tw-text-gray-500 tw-bg-gray-100 tw-px-2 tw-py-1 tw-rounded-full\">Auto-away\n in 5min</span>\n </div>\n\n <div class=\"tw-space-y-1\">\n <button (click)=\"setUserStatus('online')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-green-50 tw-group\"\n [class.tw-bg-green-50]=\"userStatusService.userStatus().status === 'online'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'online'\"\n [class.tw-ring-green-200]=\"userStatusService.userStatus().status === 'online'\">\n <div class=\"tw-relative\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-green-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-bg-green-500 tw-animate-ping tw-opacity-75\"\n *ngIf=\"userStatusService.userStatus().status === 'online'\"></div>\n </div>\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Online</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'online'\" type=\"none\"\n size=\"xs\" class=\"tw-text-green-600\">check</cide-ele-icon>\n </button>\n\n <button (click)=\"setUserStatus('away')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-yellow-50 tw-group\"\n [class.tw-bg-yellow-50]=\"userStatusService.userStatus().status === 'away'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'away'\"\n [class.tw-ring-yellow-200]=\"userStatusService.userStatus().status === 'away'\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-yellow-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Away</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'away'\" type=\"none\"\n size=\"xs\" class=\"tw-text-yellow-600\">check</cide-ele-icon>\n </button>\n\n <button (click)=\"setUserStatus('busy')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-orange-50 tw-group\"\n [class.tw-bg-orange-50]=\"userStatusService.userStatus().status === 'busy'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'busy'\"\n [class.tw-ring-orange-200]=\"userStatusService.userStatus().status === 'busy'\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-orange-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Busy</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'busy'\" type=\"none\"\n size=\"xs\" class=\"tw-text-orange-600\">check</cide-ele-icon>\n </button>\n\n <button (click)=\"setUserStatus('do-not-disturb')\"\n class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-red-50 tw-group\"\n [class.tw-bg-red-50]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n [class.tw-ring-2]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n [class.tw-ring-red-200]=\"userStatusService.userStatus().status === 'do-not-disturb'\">\n <div\n class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-red-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n </div>\n <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Do not disturb</span>\n <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n type=\"none\" size=\"xs\" class=\"tw-text-red-600\">check</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Enhanced Quick Actions Section -->\n <div class=\"tw-p-4 tw-bg-gray-50/50\">\n <h4\n class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3 tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-gray-100 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon type=\"none\" size=\"2xs\" class=\"tw-text-gray-600\">bolt</cide-ele-icon>\n </div>\n Quick Actions\n </h4>\n <div class=\"tw-space-y-1\">\n <a href=\"#\"\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-blue-200 tw-transition-colors\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-blue-600\">person</cide-ele-icon>\n </div>\n <span class=\"tw-flex-1\">View Profile</span>\n <cide-ele-icon type=\"none\" size=\"xs\"\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n </a>\n <a href=\"#\"\n class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-gray-200 tw-transition-colors\">\n <cide-ele-icon type=\"none\" size=\"xs\"\n class=\"tw-text-gray-600\">settings</cide-ele-icon>\n </div>\n <span class=\"tw-flex-1\">Preferences</span>\n <cide-ele-icon type=\"none\" size=\"xs\"\n class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n </a>\n </div>\n </div>\n\n <!-- Enhanced Sign Out Section -->\n <div class=\"tw-p-4\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-3 tw-py-2.5 tw-text-sm tw-text-red-600 tw-rounded-lg hover:tw-bg-red-50 tw-transition-all tw-duration-200 tw-font-medium\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-red-200 tw-transition-colors\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-red-600\">logout</cide-ele-icon>\n </div>\n <span class=\"tw-flex-1\">Sign out</span>\n </a>\n </div>\n </div>\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-4 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-3 tw-mb-4\">\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-4\">\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-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-3 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-4\"\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-3\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\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-3 tw-py-2 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-3 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ 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-2\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-2 tw-py-0.5 tw-bg-gray-200 tw-text-gray-600 tw-rounded-full tw-text-xs 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-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\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)\"\n (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n role=\"button\"\n class=\"menu-item tw-flex tw-items-center tw-px-1 tw-py-1 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-3 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\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n <div\n class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500\">\n <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\n with improved visualizations.</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\n </div>\n </div>\n </div>\n\n <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\n <div class=\"tw-flex tw-gap-3\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\n </div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-4 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}.cide-lyt-sidebar.collapsed{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)}.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-theme-color-brand-primary) 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-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.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),#fff0)}.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),#fff0)}.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%;padding-top:.75rem;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:#f3f4f6;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, rgba(243, 244, 246, 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,#ffffff4d,#fff0);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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}@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:auto;background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgba(243,244,246,1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform}.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 rgba(243,244,246,.8);padding:1rem .75rem;transition:all .3s ease}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px #0000001a}.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:#f3f4f6}.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:#f3f4f6cc;border-radius:.25rem;border:1px solid rgba(229,231,235,.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:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.5rem 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:3px 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}}.dark-mode .active-menu-item{background-color:#1e293b80;box-shadow:0 2px 5px #0f172a33}.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,#60a5fa,#3b82f6);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:#ffffffb3;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;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) 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:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden}.notification-item:hover{background-color:#f3f4f6;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 rgba(243,244,246,.8);padding:.75rem;transition:all .3s ease}.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,#fff0,#fff3,#fff0);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:#f3f4f680}.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:rgba(209,213,219,.5) 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}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(255,255,255,.9),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,rgba(255,255,255,.9),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:#d1d5db80;border-radius:20px}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.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}.dark-mode{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:#1e293b;color:var(--cide-theme-light-color)}.dark-mode .cide-lyt-stack{background-color:#0f172a;border-right-color:#1e293b}.dark-mode .cide-lyt-stack:before,.dark-mode .cide-lyt-stack:after,.dark-mode .sidebar-content:before,.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,rgba(15,23,42,.9),transparent)}.dark-mode .sidebar-content:after,.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,rgba(15,23,42,.9),transparent)}.dark-mode .cide-lyt-sidebar-menu{background-color:#0f172a;border-left-color:#1e293b}.dark-mode .sidebar-header,.dark-mode .sidebar-footer{background-color:#0f172af2;border-color:#1e293b}.dark-mode .tw-text-gray-700{color:#e2e8f0}.dark-mode .tw-text-gray-500{color:#94a3b8}.dark-mode .tw-bg-gray-50,.dark-mode .menu-item:hover{background-color:#1e293b80}.dark-mode .tw-bg-gray-100{background-color:#1e293b}.dark-mode .tw-bg-gray-200{background-color:#334155}.dark-mode .nav-item:hover:before{background-color:#60a5fa1a}.dark-mode .back-button:hover{background-color:#1e293bb3}.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,#33415500,#33415580,#33415500)}.dark-mode .toggle-track:after{background:#00000080}.dark-mode .alert-box:before{opacity:.2}.dark-mode :host ::ng-deep .cide-input-field{background-color:#1e293b;color:#e2e8f0}.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:#475569;background-color:#0f172a}.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.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 .5rem}.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}.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}.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)}.dark-mode .nav-item:hover{background-color:#33415580;box-shadow:0 2px 8px #0f172a4d}.dark-mode .nav-tooltip{background-color:#0f172ae6;box-shadow:0 3px 10px #0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dark-mode .nav-tooltip:before{border-color:transparent rgba(15,23,42,.9) 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)}.dark-mode .nav-item:hover{background-color:#ffffff1a}.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 30%,var(--cide-theme-dark-color))}.dark-mode .user-avatar{border-color:var(--cide-theme-dark-color);background-color:#ffffff1a}.dark-mode .user-status{border-color:var(--cide-theme-dark-color)}.dark-mode .user-menu{background-color:var(--cide-theme-dark-color);border-color:#ffffff1a}.dark-mode .user-menu a{color:#fffc}.dark-mode .user-menu a:hover{background-color:#ffffff1a}.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"] }]
|
|
2380
2383
|
}], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
|
|
2381
2384
|
type: HostListener,
|
|
2382
2385
|
args: ['document:click', ['$event']]
|
|
@@ -2963,8 +2966,8 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
2963
2966
|
}
|
|
2964
2967
|
ngOnInit() {
|
|
2965
2968
|
// Initialize the component map (You'd likely populate this from a config or service)
|
|
2966
|
-
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-
|
|
2967
|
-
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-
|
|
2969
|
+
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-CDIHnAIJ.mjs').then(m => m.CideLytSidedrawerNotesComponent);
|
|
2970
|
+
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-BkX1xh6A.mjs').then(m => m.CideLytDrawerThemeComponent);
|
|
2968
2971
|
}
|
|
2969
2972
|
async loadComponent(configFor) {
|
|
2970
2973
|
console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
|
|
@@ -3197,11 +3200,11 @@ class CideLytRequestWrapperComponent {
|
|
|
3197
3200
|
}
|
|
3198
3201
|
}
|
|
3199
3202
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3200
|
-
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 tw-flex tw-items-center tw-overflow-x-auto\">\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)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.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)}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
3203
|
+
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\">\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\n <div class=\"request-content tw-flex tw-items-center tw-overflow-x-auto\">\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n [attr.data-tooltip]=\"item.title\">\n <span class=\"request-title\">{{ item.title }}</span>\n <button class=\"request-action close-action\" \n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \n tabindex=\"0\"\n data-tooltip=\"Close this tab\">\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\n </button>\n </div>\n <!-- Only add divider between items -->\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\n </ng-container>\n </div>\n </div>\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)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.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)}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
3201
3204
|
}
|
|
3202
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestWrapperComponent, decorators: [{
|
|
3203
3206
|
type: Component,
|
|
3204
|
-
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 tw-flex tw-items-center tw-overflow-x-auto\">\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)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.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)}.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"] }]
|
|
3207
|
+
args: [{ selector: 'cide-lyt-request-wrapper', standalone: true, imports: [CommonModule, CideIconComponent], template: "<ng-container *ngIf=\"requestItems() as requestItems\">\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\n <div class=\"request-content tw-flex tw-items-center tw-overflow-x-auto\">\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n [attr.data-tooltip]=\"item.title\">\n <span class=\"request-title\">{{ item.title }}</span>\n <button class=\"request-action close-action\" \n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \n tabindex=\"0\"\n data-tooltip=\"Close this tab\">\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\n </button>\n </div>\n <!-- Only add divider between items -->\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\n </ng-container>\n </div>\n </div>\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)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.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)}.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"] }]
|
|
3205
3208
|
}], propDecorators: { requestItemElements: [{
|
|
3206
3209
|
type: ViewChildren,
|
|
3207
3210
|
args: ['requestItemEl']
|
|
@@ -3270,18 +3273,18 @@ class TabContentComponent {
|
|
|
3270
3273
|
}
|
|
3271
3274
|
}
|
|
3272
3275
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, deps: [{ token: CideLytRequestService }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: TabContentComponent, isStandalone: true, selector: "cide-lyt-tab-content", viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: `
|
|
3274
|
-
<div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
|
|
3275
|
-
<router-outlet></router-outlet>
|
|
3276
|
-
</div>
|
|
3276
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: TabContentComponent, isStandalone: true, selector: "cide-lyt-tab-content", viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: `
|
|
3277
|
+
<div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
|
|
3278
|
+
<router-outlet></router-outlet>
|
|
3279
|
+
</div>
|
|
3277
3280
|
`, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
|
|
3278
3281
|
}
|
|
3279
3282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, decorators: [{
|
|
3280
3283
|
type: Component,
|
|
3281
|
-
args: [{ selector: 'cide-lyt-tab-content', standalone: true, imports: [CommonModule, RouterModule], template: `
|
|
3282
|
-
<div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
|
|
3283
|
-
<router-outlet></router-outlet>
|
|
3284
|
-
</div>
|
|
3284
|
+
args: [{ selector: 'cide-lyt-tab-content', standalone: true, imports: [CommonModule, RouterModule], template: `
|
|
3285
|
+
<div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
|
|
3286
|
+
<router-outlet></router-outlet>
|
|
3287
|
+
</div>
|
|
3285
3288
|
`, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"] }]
|
|
3286
3289
|
}], ctorParameters: () => [{ type: CideLytRequestService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollContainerRef: [{
|
|
3287
3290
|
type: ViewChild,
|
|
@@ -3308,26 +3311,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
3308
3311
|
|
|
3309
3312
|
class CloudIdeLayoutComponent {
|
|
3310
3313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeLayoutComponent, isStandalone: true, selector: "cide-lyt-wrapper", ngImport: i0, template: `
|
|
3312
|
-
<cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
|
|
3313
|
-
|
|
3314
|
-
<!-- Floating Container Manager -->
|
|
3315
|
-
<cide-ele-floating-container-manager></cide-ele-floating-container-manager>
|
|
3316
|
-
|
|
3317
|
-
<!-- Global Notifications and Confirmation Dialogs -->
|
|
3318
|
-
<cide-ele-global-notifications></cide-ele-global-notifications>
|
|
3314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeLayoutComponent, isStandalone: true, selector: "cide-lyt-wrapper", ngImport: i0, template: `
|
|
3315
|
+
<cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
|
|
3316
|
+
|
|
3317
|
+
<!-- Floating Container Manager -->
|
|
3318
|
+
<cide-ele-floating-container-manager></cide-ele-floating-container-manager>
|
|
3319
|
+
|
|
3320
|
+
<!-- Global Notifications and Confirmation Dialogs -->
|
|
3321
|
+
<cide-ele-global-notifications></cide-ele-global-notifications>
|
|
3319
3322
|
`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: CideLytLayoutWrapperComponent, selector: "cide-lyt-layout-wrapper" }, { kind: "component", type: CideEleFloatingContainerManagerComponent, selector: "cide-ele-floating-container-manager" }, { kind: "component", type: CideEleGlobalNotificationsComponent, selector: "cide-ele-global-notifications" }] });
|
|
3320
3323
|
}
|
|
3321
3324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutComponent, decorators: [{
|
|
3322
3325
|
type: Component,
|
|
3323
|
-
args: [{ selector: 'cide-lyt-wrapper', standalone: true, template: `
|
|
3324
|
-
<cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
|
|
3325
|
-
|
|
3326
|
-
<!-- Floating Container Manager -->
|
|
3327
|
-
<cide-ele-floating-container-manager></cide-ele-floating-container-manager>
|
|
3328
|
-
|
|
3329
|
-
<!-- Global Notifications and Confirmation Dialogs -->
|
|
3330
|
-
<cide-ele-global-notifications></cide-ele-global-notifications>
|
|
3326
|
+
args: [{ selector: 'cide-lyt-wrapper', standalone: true, template: `
|
|
3327
|
+
<cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
|
|
3328
|
+
|
|
3329
|
+
<!-- Floating Container Manager -->
|
|
3330
|
+
<cide-ele-floating-container-manager></cide-ele-floating-container-manager>
|
|
3331
|
+
|
|
3332
|
+
<!-- Global Notifications and Confirmation Dialogs -->
|
|
3333
|
+
<cide-ele-global-notifications></cide-ele-global-notifications>
|
|
3331
3334
|
`, imports: [
|
|
3332
3335
|
CideLytLayoutWrapperComponent,
|
|
3333
3336
|
CideEleFloatingContainerManagerComponent,
|
|
@@ -3468,11 +3471,11 @@ class CideLytSharedWrapperComponent {
|
|
|
3468
3471
|
this.router.navigate(['/control-panel']);
|
|
3469
3472
|
}
|
|
3470
3473
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: CideLytSharedWrapperComponent, isStandalone: true, selector: "cide-lyt-shared-wrapper", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb_data: { classPropertyName: "breadcrumb_data", publicName: "breadcrumb_data", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "breadcrumb", first: true, predicate: CideEleBreadcrumbComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tw-w-full tw-h-full tw-table\">\
|
|
3474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: CideLytSharedWrapperComponent, isStandalone: true, selector: "cide-lyt-shared-wrapper", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb_data: { classPropertyName: "breadcrumb_data", publicName: "breadcrumb_data", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "breadcrumb", first: true, predicate: CideEleBreadcrumbComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tw-w-full tw-h-full tw-table\">\n <div\n class=\"tw-sticky tw-table-row tw-w-full tw-top-0 tw-z-50 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-0.5\">\n <div class=\"tw-flex-1\">\n <cide-ele-breadcrumb style=\"modern\" [compact]=\"true\" (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n </div>\n <div class=\"tw-flex-shrink-0 tw-ml-4\">\n <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n </div>\n </div>\n </div>\n\n <div class=\"tw-table-row tw-h-full tw-w-full tw-overflow-y-auto\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{display:block;height:100%}:host>div{display:flex;flex-direction:column}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}\n"], dependencies: [{ kind: "component", type: CideEleBreadcrumbComponent, selector: "cide-ele-breadcrumb", inputs: ["items", "style", "separator", "showHomeIcon", "homeIcon", "maxItems", "showDropdownOnOverflow", "dropdownOptions", "clickableItems", "showTooltips", "responsive", "compact", "animated", "loadingInput", "disabled", "contextId", "pageCode"], outputs: ["itemClick", "dropdownOptionClick", "homeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3472
3475
|
}
|
|
3473
3476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedWrapperComponent, decorators: [{
|
|
3474
3477
|
type: Component,
|
|
3475
|
-
args: [{ selector: 'cide-lyt-shared-wrapper', standalone: true, imports: [CideEleBreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-w-full tw-h-full tw-table\">\
|
|
3478
|
+
args: [{ selector: 'cide-lyt-shared-wrapper', standalone: true, imports: [CideEleBreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-w-full tw-h-full tw-table\">\n <div\n class=\"tw-sticky tw-table-row tw-w-full tw-top-0 tw-z-50 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-0.5\">\n <div class=\"tw-flex-1\">\n <cide-ele-breadcrumb style=\"modern\" [compact]=\"true\" (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n </div>\n <div class=\"tw-flex-shrink-0 tw-ml-4\">\n <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n </div>\n </div>\n </div>\n\n <div class=\"tw-table-row tw-h-full tw-w-full tw-overflow-y-auto\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{display:block;height:100%}:host>div{display:flex;flex-direction:column}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}\n"] }]
|
|
3476
3479
|
}], ctorParameters: () => [] });
|
|
3477
3480
|
|
|
3478
3481
|
const layoutRoutes = {
|
|
@@ -3487,7 +3490,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
3487
3490
|
},
|
|
3488
3491
|
{
|
|
3489
3492
|
path: "home",
|
|
3490
|
-
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-
|
|
3493
|
+
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DE5lpCxu.mjs').then(c => c.CideLytHomeWrapperComponent),
|
|
3491
3494
|
canActivate: [authGuard],
|
|
3492
3495
|
data: {
|
|
3493
3496
|
reuseTab: true, // For CustomRouteReuseStrategy
|
|
@@ -4568,234 +4571,234 @@ class CideLytFloatingEntityRightsSharingComponent {
|
|
|
4568
4571
|
this.close.emit();
|
|
4569
4572
|
}
|
|
4570
4573
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingEntityRightsSharingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4571
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytFloatingEntityRightsSharingComponent, isStandalone: true, selector: "cide-lyt-floating-entity-rights-sharing", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", save: "save" }, ngImport: i0, template: `
|
|
4572
|
-
<!-- Entity Rights Sharing Content -->
|
|
4573
|
-
<div class="tw-flex tw-flex-col tw-h-full">
|
|
4574
|
-
<!-- Main Content Area -->
|
|
4575
|
-
<div class="tw-flex-1 tw-p-4 tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-gray-300 tw-scrollbar-track-transparent tw-select-none">
|
|
4576
|
-
<!-- Tabs / Pills -->
|
|
4577
|
-
<div class="tw-mb-3 tw-flex tw-items-center tw-gap-2">
|
|
4578
|
-
<button type="button"
|
|
4579
|
-
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4580
|
-
[class.tw-bg-blue-600]="selectedTab() === 'user'"
|
|
4581
|
-
[class.tw-text-white]="selectedTab() === 'user'"
|
|
4582
|
-
[class.tw-bg-gray-100]="selectedTab() !== 'user'"
|
|
4583
|
-
[class.tw-text-gray-700]="selectedTab() !== 'user'"
|
|
4584
|
-
(click)="selectTab('user')">
|
|
4585
|
-
User Linked
|
|
4586
|
-
</button>
|
|
4587
|
-
<button type="button"
|
|
4588
|
-
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4589
|
-
[class.tw-bg-blue-600]="selectedTab() === 'hierarchy'"
|
|
4590
|
-
[class.tw-text-white]="selectedTab() === 'hierarchy'"
|
|
4591
|
-
[class.tw-bg-gray-100]="selectedTab() !== 'hierarchy'"
|
|
4592
|
-
[class.tw-text-gray-700]="selectedTab() !== 'hierarchy'"
|
|
4593
|
-
(click)="selectTab('hierarchy')">
|
|
4594
|
-
Entity Hierarchy
|
|
4595
|
-
</button>
|
|
4596
|
-
</div>
|
|
4597
|
-
|
|
4598
|
-
<!-- User Linked Entities -->
|
|
4599
|
-
@if (selectedTab() === 'user') {
|
|
4600
|
-
<div class="tw-mb-4">
|
|
4601
|
-
|
|
4602
|
-
@if (entitiesLoading()) {
|
|
4603
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4604
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4605
|
-
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading entities...</span>
|
|
4606
|
-
</div>
|
|
4607
|
-
} @else if (entities().length === 0) {
|
|
4608
|
-
<div class="tw-text-center tw-py-6">
|
|
4609
|
-
<div class="tw-w-10 tw-h-10 tw-bg-gray-100 tw-rounded-xl tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-2">
|
|
4610
|
-
<cide-ele-icon class="tw-w-5 tw-h-5 tw-text-gray-400">business</cide-ele-icon>
|
|
4611
|
-
</div>
|
|
4612
|
-
<p class="tw-text-gray-500 tw-text-sm">No entities available</p>
|
|
4613
|
-
</div>
|
|
4614
|
-
} @else {
|
|
4615
|
-
<div class="tw-space-y-2">
|
|
4616
|
-
@defer (when entitiesWithPermissions().length > 0) {
|
|
4617
|
-
@for (entity of entitiesWithPermissions(); track entity._id || entity.syen_name) {
|
|
4618
|
-
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-blue-300 hover:tw-border-opacity-50 hover:tw-scale-[1.01] tw-group tw-select-none"
|
|
4619
|
-
[class.tw-border-blue-500]="selectedEntityId() === entity._id"
|
|
4620
|
-
[class.tw-bg-blue-50]="selectedEntityId() === entity._id"
|
|
4621
|
-
[class.tw-opacity-50]="!entity.isActive"
|
|
4622
|
-
[class.tw-bg-gray-100]="!entity.isActive"
|
|
4623
|
-
[class.tw-border-gray-300]="!entity.isActive"
|
|
4624
|
-
(click)="selectEntity(entity._id || '')">
|
|
4625
|
-
<div class="tw-flex tw-items-start tw-space-x-3">
|
|
4626
|
-
<div class="tw-w-6 tw-h-6 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-flex-shrink-0"
|
|
4627
|
-
[class.tw-bg-gray-100]="entity.isActive"
|
|
4628
|
-
[class.tw-bg-gray-200]="!entity.isActive">
|
|
4629
|
-
<cide-ele-icon [class.tw-text-gray-600]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">person</cide-ele-icon>
|
|
4630
|
-
</div>
|
|
4631
|
-
<div class="tw-flex-1 tw-min-w-0">
|
|
4632
|
-
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-1">
|
|
4633
|
-
<h4 class="tw-text-sm tw-font-semibold tw-truncate"
|
|
4634
|
-
[class.tw-text-gray-900]="entity.isActive"
|
|
4635
|
-
[class.tw-text-gray-500]="!entity.isActive">{{ entity.syen_name }}</h4>
|
|
4636
|
-
@if (hasPendingChanges(entity._id || '')) {
|
|
4637
|
-
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-orange-100 tw-text-orange-800">
|
|
4638
|
-
<cide-ele-icon>edit</cide-ele-icon>
|
|
4639
|
-
<span>Modified</span>
|
|
4640
|
-
</div>
|
|
4641
|
-
}
|
|
4642
|
-
@if (entity.isOwner) {
|
|
4643
|
-
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-space-x-1">
|
|
4644
|
-
<cide-ele-icon>admin_panel_settings</cide-ele-icon>
|
|
4645
|
-
<span>Owner</span>
|
|
4646
|
-
</div>
|
|
4647
|
-
}
|
|
4648
|
-
</div>
|
|
4649
|
-
<div class="tw-flex tw-items-center tw-space-x-3">
|
|
4650
|
-
@if (entity.canView) {
|
|
4651
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4652
|
-
<cide-ele-icon [class.tw-text-green-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">visibility</cide-ele-icon>
|
|
4653
|
-
<span class="tw-text-xs" [class.tw-text-green-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">View</span>
|
|
4654
|
-
</div>
|
|
4655
|
-
}
|
|
4656
|
-
@if (entity.canEdit) {
|
|
4657
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4658
|
-
<cide-ele-icon [class.tw-text-blue-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">edit</cide-ele-icon>
|
|
4659
|
-
<span class="tw-text-xs" [class.tw-text-blue-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Edit</span>
|
|
4660
|
-
</div>
|
|
4661
|
-
}
|
|
4662
|
-
@if (entity.isOwner) {
|
|
4663
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4664
|
-
<cide-ele-icon [class.tw-text-purple-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">admin_panel_settings</cide-ele-icon>
|
|
4665
|
-
<span class="tw-text-xs" [class.tw-text-purple-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Owner</span>
|
|
4666
|
-
</div>
|
|
4667
|
-
}
|
|
4668
|
-
@if (!entity.isActive) {
|
|
4669
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4670
|
-
<cide-ele-icon class="tw-text-red-400">block</cide-ele-icon>
|
|
4671
|
-
<span class="tw-text-xs tw-text-red-500">Inactive</span>
|
|
4672
|
-
</div>
|
|
4673
|
-
}
|
|
4674
|
-
</div>
|
|
4675
|
-
</div>
|
|
4676
|
-
@if (selectedEntityId() === entity._id) {
|
|
4677
|
-
<div class="tw-w-4 tw-h-4 tw-bg-green-500 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0">
|
|
4678
|
-
<cide-ele-icon class="tw-text-white">done</cide-ele-icon>
|
|
4679
|
-
</div>
|
|
4680
|
-
}
|
|
4681
|
-
</div>
|
|
4682
|
-
</div>
|
|
4683
|
-
}
|
|
4684
|
-
} @placeholder {
|
|
4685
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-py-4">
|
|
4686
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4687
|
-
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading entities...</span>
|
|
4688
|
-
</div>
|
|
4689
|
-
}
|
|
4690
|
-
</div>
|
|
4691
|
-
}
|
|
4692
|
-
</div>
|
|
4693
|
-
}
|
|
4694
|
-
|
|
4695
|
-
<!-- Entity Hierarchy -->
|
|
4696
|
-
@if (selectedTab() === 'hierarchy') {
|
|
4697
|
-
<div class="tw-mb-4">
|
|
4698
|
-
@if (hierarchyLoading()) {
|
|
4699
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4700
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4701
|
-
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading hierarchy...</span>
|
|
4702
|
-
</div>
|
|
4703
|
-
} @else {
|
|
4704
|
-
<div class="tw-space-y-2">
|
|
4705
|
-
@for (node of hierarchy(); track node._id) {
|
|
4706
|
-
<div class="tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-p-3">
|
|
4707
|
-
<div class="tw-flex tw-items-center tw-justify-between">
|
|
4708
|
-
<div class="tw-flex tw-items-center tw-gap-2">
|
|
4709
|
-
<cide-ele-icon class="tw-text-gray-500">account_tree</cide-ele-icon>
|
|
4710
|
-
<span class="tw-text-sm tw-font-medium tw-text-gray-800">{{ node.syen_name }}</span>
|
|
4711
|
-
</div>
|
|
4712
|
-
<span class="tw-text-xs tw-text-gray-500">Code: {{ node.syen_entity_code }}</span>
|
|
4713
|
-
</div>
|
|
4714
|
-
</div>
|
|
4715
|
-
}
|
|
4716
|
-
</div>
|
|
4717
|
-
}
|
|
4718
|
-
</div>
|
|
4719
|
-
}
|
|
4720
|
-
|
|
4721
|
-
<!-- Rights Management -->
|
|
4722
|
-
@if (selectedEntityId()) {
|
|
4723
|
-
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-shadow-sm">
|
|
4724
|
-
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-3">
|
|
4725
|
-
<cide-ele-icon class="tw-text-green-600">security</cide-ele-icon>
|
|
4726
|
-
<h3 class="tw-text-sm tw-font-semibold tw-text-gray-900">Manage Rights</h3>
|
|
4727
|
-
</div>
|
|
4728
|
-
|
|
4729
|
-
@if (accessPassLoading()) {
|
|
4730
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
4731
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4732
|
-
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading...</span>
|
|
4733
|
-
</div>
|
|
4734
|
-
} @else {
|
|
4735
|
-
@defer (when !accessPassLoading()) {
|
|
4736
|
-
<form [formGroup]="rightsForm" (ngSubmit)="saveRights()">
|
|
4737
|
-
<div class="tw-flex tw-flex-wrap tw-gap-3 tw-min-h-[80px] tw-items-center">
|
|
4738
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4739
|
-
<cide-ele-input
|
|
4740
|
-
type="checkbox"
|
|
4741
|
-
formControlName="can_view"
|
|
4742
|
-
label="View">
|
|
4743
|
-
</cide-ele-input>
|
|
4744
|
-
</div>
|
|
4745
|
-
|
|
4746
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4747
|
-
<cide-ele-input
|
|
4748
|
-
type="checkbox"
|
|
4749
|
-
formControlName="can_edit"
|
|
4750
|
-
label="Edit">
|
|
4751
|
-
</cide-ele-input>
|
|
4752
|
-
</div>
|
|
4753
|
-
|
|
4754
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4755
|
-
<cide-ele-input
|
|
4756
|
-
type="checkbox"
|
|
4757
|
-
formControlName="is_owner"
|
|
4758
|
-
label="Is Owner">
|
|
4759
|
-
</cide-ele-input>
|
|
4760
|
-
</div>
|
|
4761
|
-
|
|
4762
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4763
|
-
<cide-ele-input
|
|
4764
|
-
type="checkbox"
|
|
4765
|
-
formControlName="syepm_isactive"
|
|
4766
|
-
label="Is Active">
|
|
4767
|
-
</cide-ele-input>
|
|
4768
|
-
</div>
|
|
4769
|
-
</div>
|
|
4770
|
-
</form>
|
|
4771
|
-
} @placeholder {
|
|
4772
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
4773
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4774
|
-
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading rights...</span>
|
|
4775
|
-
</div>
|
|
4776
|
-
}
|
|
4777
|
-
}
|
|
4778
|
-
</div>
|
|
4779
|
-
}
|
|
4780
|
-
</div>
|
|
4781
|
-
|
|
4782
|
-
<!-- Fixed Footer -->
|
|
4783
|
-
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-px-4 tw-py-3 tw-border-t tw-border-gray-200 tw-border-opacity-30 tw-flex tw-justify-end tw-space-x-2 tw-flex-shrink-0">
|
|
4784
|
-
<button cideEleButton variant="secondary" size="xs" type="button" (click)="onCancel()">
|
|
4785
|
-
Cancel
|
|
4786
|
-
</button>
|
|
4787
|
-
@if (selectedEntityId()) {
|
|
4788
|
-
<button cideEleButton variant="primary" size="xs" type="button" (click)="saveRights()"
|
|
4789
|
-
[disabled]="rightsForm.invalid || saving()" [loading]="saving()">
|
|
4790
|
-
@if (pendingChangesCount() > 0) {
|
|
4791
|
-
Save {{ pendingChangesCount() }} Change{{ pendingChangesCount() > 1 ? 's' : '' }}
|
|
4792
|
-
} @else {
|
|
4793
|
-
{{ saving() ? 'Saving...' : 'Save' }}
|
|
4794
|
-
}
|
|
4795
|
-
</button>
|
|
4796
|
-
}
|
|
4797
|
-
</div>
|
|
4798
|
-
</div>
|
|
4574
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytFloatingEntityRightsSharingComponent, isStandalone: true, selector: "cide-lyt-floating-entity-rights-sharing", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", save: "save" }, ngImport: i0, template: `
|
|
4575
|
+
<!-- Entity Rights Sharing Content -->
|
|
4576
|
+
<div class="tw-flex tw-flex-col tw-h-full">
|
|
4577
|
+
<!-- Main Content Area -->
|
|
4578
|
+
<div class="tw-flex-1 tw-p-4 tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-gray-300 tw-scrollbar-track-transparent tw-select-none">
|
|
4579
|
+
<!-- Tabs / Pills -->
|
|
4580
|
+
<div class="tw-mb-3 tw-flex tw-items-center tw-gap-2">
|
|
4581
|
+
<button type="button"
|
|
4582
|
+
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4583
|
+
[class.tw-bg-blue-600]="selectedTab() === 'user'"
|
|
4584
|
+
[class.tw-text-white]="selectedTab() === 'user'"
|
|
4585
|
+
[class.tw-bg-gray-100]="selectedTab() !== 'user'"
|
|
4586
|
+
[class.tw-text-gray-700]="selectedTab() !== 'user'"
|
|
4587
|
+
(click)="selectTab('user')">
|
|
4588
|
+
User Linked
|
|
4589
|
+
</button>
|
|
4590
|
+
<button type="button"
|
|
4591
|
+
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4592
|
+
[class.tw-bg-blue-600]="selectedTab() === 'hierarchy'"
|
|
4593
|
+
[class.tw-text-white]="selectedTab() === 'hierarchy'"
|
|
4594
|
+
[class.tw-bg-gray-100]="selectedTab() !== 'hierarchy'"
|
|
4595
|
+
[class.tw-text-gray-700]="selectedTab() !== 'hierarchy'"
|
|
4596
|
+
(click)="selectTab('hierarchy')">
|
|
4597
|
+
Entity Hierarchy
|
|
4598
|
+
</button>
|
|
4599
|
+
</div>
|
|
4600
|
+
|
|
4601
|
+
<!-- User Linked Entities -->
|
|
4602
|
+
@if (selectedTab() === 'user') {
|
|
4603
|
+
<div class="tw-mb-4">
|
|
4604
|
+
|
|
4605
|
+
@if (entitiesLoading()) {
|
|
4606
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4607
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4608
|
+
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading entities...</span>
|
|
4609
|
+
</div>
|
|
4610
|
+
} @else if (entities().length === 0) {
|
|
4611
|
+
<div class="tw-text-center tw-py-6">
|
|
4612
|
+
<div class="tw-w-10 tw-h-10 tw-bg-gray-100 tw-rounded-xl tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-2">
|
|
4613
|
+
<cide-ele-icon class="tw-w-5 tw-h-5 tw-text-gray-400">business</cide-ele-icon>
|
|
4614
|
+
</div>
|
|
4615
|
+
<p class="tw-text-gray-500 tw-text-sm">No entities available</p>
|
|
4616
|
+
</div>
|
|
4617
|
+
} @else {
|
|
4618
|
+
<div class="tw-space-y-2">
|
|
4619
|
+
@defer (when entitiesWithPermissions().length > 0) {
|
|
4620
|
+
@for (entity of entitiesWithPermissions(); track entity._id || entity.syen_name) {
|
|
4621
|
+
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-blue-300 hover:tw-border-opacity-50 hover:tw-scale-[1.01] tw-group tw-select-none"
|
|
4622
|
+
[class.tw-border-blue-500]="selectedEntityId() === entity._id"
|
|
4623
|
+
[class.tw-bg-blue-50]="selectedEntityId() === entity._id"
|
|
4624
|
+
[class.tw-opacity-50]="!entity.isActive"
|
|
4625
|
+
[class.tw-bg-gray-100]="!entity.isActive"
|
|
4626
|
+
[class.tw-border-gray-300]="!entity.isActive"
|
|
4627
|
+
(click)="selectEntity(entity._id || '')">
|
|
4628
|
+
<div class="tw-flex tw-items-start tw-space-x-3">
|
|
4629
|
+
<div class="tw-w-6 tw-h-6 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-flex-shrink-0"
|
|
4630
|
+
[class.tw-bg-gray-100]="entity.isActive"
|
|
4631
|
+
[class.tw-bg-gray-200]="!entity.isActive">
|
|
4632
|
+
<cide-ele-icon [class.tw-text-gray-600]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">person</cide-ele-icon>
|
|
4633
|
+
</div>
|
|
4634
|
+
<div class="tw-flex-1 tw-min-w-0">
|
|
4635
|
+
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-1">
|
|
4636
|
+
<h4 class="tw-text-sm tw-font-semibold tw-truncate"
|
|
4637
|
+
[class.tw-text-gray-900]="entity.isActive"
|
|
4638
|
+
[class.tw-text-gray-500]="!entity.isActive">{{ entity.syen_name }}</h4>
|
|
4639
|
+
@if (hasPendingChanges(entity._id || '')) {
|
|
4640
|
+
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-orange-100 tw-text-orange-800">
|
|
4641
|
+
<cide-ele-icon>edit</cide-ele-icon>
|
|
4642
|
+
<span>Modified</span>
|
|
4643
|
+
</div>
|
|
4644
|
+
}
|
|
4645
|
+
@if (entity.isOwner) {
|
|
4646
|
+
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-space-x-1">
|
|
4647
|
+
<cide-ele-icon>admin_panel_settings</cide-ele-icon>
|
|
4648
|
+
<span>Owner</span>
|
|
4649
|
+
</div>
|
|
4650
|
+
}
|
|
4651
|
+
</div>
|
|
4652
|
+
<div class="tw-flex tw-items-center tw-space-x-3">
|
|
4653
|
+
@if (entity.canView) {
|
|
4654
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4655
|
+
<cide-ele-icon [class.tw-text-green-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">visibility</cide-ele-icon>
|
|
4656
|
+
<span class="tw-text-xs" [class.tw-text-green-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">View</span>
|
|
4657
|
+
</div>
|
|
4658
|
+
}
|
|
4659
|
+
@if (entity.canEdit) {
|
|
4660
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4661
|
+
<cide-ele-icon [class.tw-text-blue-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">edit</cide-ele-icon>
|
|
4662
|
+
<span class="tw-text-xs" [class.tw-text-blue-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Edit</span>
|
|
4663
|
+
</div>
|
|
4664
|
+
}
|
|
4665
|
+
@if (entity.isOwner) {
|
|
4666
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4667
|
+
<cide-ele-icon [class.tw-text-purple-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">admin_panel_settings</cide-ele-icon>
|
|
4668
|
+
<span class="tw-text-xs" [class.tw-text-purple-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Owner</span>
|
|
4669
|
+
</div>
|
|
4670
|
+
}
|
|
4671
|
+
@if (!entity.isActive) {
|
|
4672
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4673
|
+
<cide-ele-icon class="tw-text-red-400">block</cide-ele-icon>
|
|
4674
|
+
<span class="tw-text-xs tw-text-red-500">Inactive</span>
|
|
4675
|
+
</div>
|
|
4676
|
+
}
|
|
4677
|
+
</div>
|
|
4678
|
+
</div>
|
|
4679
|
+
@if (selectedEntityId() === entity._id) {
|
|
4680
|
+
<div class="tw-w-4 tw-h-4 tw-bg-green-500 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0">
|
|
4681
|
+
<cide-ele-icon class="tw-text-white">done</cide-ele-icon>
|
|
4682
|
+
</div>
|
|
4683
|
+
}
|
|
4684
|
+
</div>
|
|
4685
|
+
</div>
|
|
4686
|
+
}
|
|
4687
|
+
} @placeholder {
|
|
4688
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-py-4">
|
|
4689
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4690
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading entities...</span>
|
|
4691
|
+
</div>
|
|
4692
|
+
}
|
|
4693
|
+
</div>
|
|
4694
|
+
}
|
|
4695
|
+
</div>
|
|
4696
|
+
}
|
|
4697
|
+
|
|
4698
|
+
<!-- Entity Hierarchy -->
|
|
4699
|
+
@if (selectedTab() === 'hierarchy') {
|
|
4700
|
+
<div class="tw-mb-4">
|
|
4701
|
+
@if (hierarchyLoading()) {
|
|
4702
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4703
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4704
|
+
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading hierarchy...</span>
|
|
4705
|
+
</div>
|
|
4706
|
+
} @else {
|
|
4707
|
+
<div class="tw-space-y-2">
|
|
4708
|
+
@for (node of hierarchy(); track node._id) {
|
|
4709
|
+
<div class="tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-p-3">
|
|
4710
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
4711
|
+
<div class="tw-flex tw-items-center tw-gap-2">
|
|
4712
|
+
<cide-ele-icon class="tw-text-gray-500">account_tree</cide-ele-icon>
|
|
4713
|
+
<span class="tw-text-sm tw-font-medium tw-text-gray-800">{{ node.syen_name }}</span>
|
|
4714
|
+
</div>
|
|
4715
|
+
<span class="tw-text-xs tw-text-gray-500">Code: {{ node.syen_entity_code }}</span>
|
|
4716
|
+
</div>
|
|
4717
|
+
</div>
|
|
4718
|
+
}
|
|
4719
|
+
</div>
|
|
4720
|
+
}
|
|
4721
|
+
</div>
|
|
4722
|
+
}
|
|
4723
|
+
|
|
4724
|
+
<!-- Rights Management -->
|
|
4725
|
+
@if (selectedEntityId()) {
|
|
4726
|
+
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-shadow-sm">
|
|
4727
|
+
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-3">
|
|
4728
|
+
<cide-ele-icon class="tw-text-green-600">security</cide-ele-icon>
|
|
4729
|
+
<h3 class="tw-text-sm tw-font-semibold tw-text-gray-900">Manage Rights</h3>
|
|
4730
|
+
</div>
|
|
4731
|
+
|
|
4732
|
+
@if (accessPassLoading()) {
|
|
4733
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
4734
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4735
|
+
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading...</span>
|
|
4736
|
+
</div>
|
|
4737
|
+
} @else {
|
|
4738
|
+
@defer (when !accessPassLoading()) {
|
|
4739
|
+
<form [formGroup]="rightsForm" (ngSubmit)="saveRights()">
|
|
4740
|
+
<div class="tw-flex tw-flex-wrap tw-gap-3 tw-min-h-[80px] tw-items-center">
|
|
4741
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4742
|
+
<cide-ele-input
|
|
4743
|
+
type="checkbox"
|
|
4744
|
+
formControlName="can_view"
|
|
4745
|
+
label="View">
|
|
4746
|
+
</cide-ele-input>
|
|
4747
|
+
</div>
|
|
4748
|
+
|
|
4749
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4750
|
+
<cide-ele-input
|
|
4751
|
+
type="checkbox"
|
|
4752
|
+
formControlName="can_edit"
|
|
4753
|
+
label="Edit">
|
|
4754
|
+
</cide-ele-input>
|
|
4755
|
+
</div>
|
|
4756
|
+
|
|
4757
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4758
|
+
<cide-ele-input
|
|
4759
|
+
type="checkbox"
|
|
4760
|
+
formControlName="is_owner"
|
|
4761
|
+
label="Is Owner">
|
|
4762
|
+
</cide-ele-input>
|
|
4763
|
+
</div>
|
|
4764
|
+
|
|
4765
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4766
|
+
<cide-ele-input
|
|
4767
|
+
type="checkbox"
|
|
4768
|
+
formControlName="syepm_isactive"
|
|
4769
|
+
label="Is Active">
|
|
4770
|
+
</cide-ele-input>
|
|
4771
|
+
</div>
|
|
4772
|
+
</div>
|
|
4773
|
+
</form>
|
|
4774
|
+
} @placeholder {
|
|
4775
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
4776
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4777
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading rights...</span>
|
|
4778
|
+
</div>
|
|
4779
|
+
}
|
|
4780
|
+
}
|
|
4781
|
+
</div>
|
|
4782
|
+
}
|
|
4783
|
+
</div>
|
|
4784
|
+
|
|
4785
|
+
<!-- Fixed Footer -->
|
|
4786
|
+
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-px-4 tw-py-3 tw-border-t tw-border-gray-200 tw-border-opacity-30 tw-flex tw-justify-end tw-space-x-2 tw-flex-shrink-0">
|
|
4787
|
+
<button cideEleButton variant="secondary" size="xs" type="button" (click)="onCancel()">
|
|
4788
|
+
Cancel
|
|
4789
|
+
</button>
|
|
4790
|
+
@if (selectedEntityId()) {
|
|
4791
|
+
<button cideEleButton variant="primary" size="xs" type="button" (click)="saveRights()"
|
|
4792
|
+
[disabled]="rightsForm.invalid || saving()" [loading]="saving()">
|
|
4793
|
+
@if (pendingChangesCount() > 0) {
|
|
4794
|
+
Save {{ pendingChangesCount() }} Change{{ pendingChangesCount() > 1 ? 's' : '' }}
|
|
4795
|
+
} @else {
|
|
4796
|
+
{{ saving() ? 'Saving...' : 'Save' }}
|
|
4797
|
+
}
|
|
4798
|
+
</button>
|
|
4799
|
+
}
|
|
4800
|
+
</div>
|
|
4801
|
+
</div>
|
|
4799
4802
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [CideIconComponent], () => [i2$1.ɵNgNoValidate, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, CideInputComponent]] });
|
|
4800
4803
|
}
|
|
4801
4804
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingEntityRightsSharingComponent, decorators: [{
|
|
@@ -4807,234 +4810,234 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
4807
4810
|
CideInputComponent,
|
|
4808
4811
|
CideIconComponent,
|
|
4809
4812
|
CideSpinnerComponent
|
|
4810
|
-
], template: `
|
|
4811
|
-
<!-- Entity Rights Sharing Content -->
|
|
4812
|
-
<div class="tw-flex tw-flex-col tw-h-full">
|
|
4813
|
-
<!-- Main Content Area -->
|
|
4814
|
-
<div class="tw-flex-1 tw-p-4 tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-gray-300 tw-scrollbar-track-transparent tw-select-none">
|
|
4815
|
-
<!-- Tabs / Pills -->
|
|
4816
|
-
<div class="tw-mb-3 tw-flex tw-items-center tw-gap-2">
|
|
4817
|
-
<button type="button"
|
|
4818
|
-
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4819
|
-
[class.tw-bg-blue-600]="selectedTab() === 'user'"
|
|
4820
|
-
[class.tw-text-white]="selectedTab() === 'user'"
|
|
4821
|
-
[class.tw-bg-gray-100]="selectedTab() !== 'user'"
|
|
4822
|
-
[class.tw-text-gray-700]="selectedTab() !== 'user'"
|
|
4823
|
-
(click)="selectTab('user')">
|
|
4824
|
-
User Linked
|
|
4825
|
-
</button>
|
|
4826
|
-
<button type="button"
|
|
4827
|
-
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4828
|
-
[class.tw-bg-blue-600]="selectedTab() === 'hierarchy'"
|
|
4829
|
-
[class.tw-text-white]="selectedTab() === 'hierarchy'"
|
|
4830
|
-
[class.tw-bg-gray-100]="selectedTab() !== 'hierarchy'"
|
|
4831
|
-
[class.tw-text-gray-700]="selectedTab() !== 'hierarchy'"
|
|
4832
|
-
(click)="selectTab('hierarchy')">
|
|
4833
|
-
Entity Hierarchy
|
|
4834
|
-
</button>
|
|
4835
|
-
</div>
|
|
4836
|
-
|
|
4837
|
-
<!-- User Linked Entities -->
|
|
4838
|
-
@if (selectedTab() === 'user') {
|
|
4839
|
-
<div class="tw-mb-4">
|
|
4840
|
-
|
|
4841
|
-
@if (entitiesLoading()) {
|
|
4842
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4843
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4844
|
-
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading entities...</span>
|
|
4845
|
-
</div>
|
|
4846
|
-
} @else if (entities().length === 0) {
|
|
4847
|
-
<div class="tw-text-center tw-py-6">
|
|
4848
|
-
<div class="tw-w-10 tw-h-10 tw-bg-gray-100 tw-rounded-xl tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-2">
|
|
4849
|
-
<cide-ele-icon class="tw-w-5 tw-h-5 tw-text-gray-400">business</cide-ele-icon>
|
|
4850
|
-
</div>
|
|
4851
|
-
<p class="tw-text-gray-500 tw-text-sm">No entities available</p>
|
|
4852
|
-
</div>
|
|
4853
|
-
} @else {
|
|
4854
|
-
<div class="tw-space-y-2">
|
|
4855
|
-
@defer (when entitiesWithPermissions().length > 0) {
|
|
4856
|
-
@for (entity of entitiesWithPermissions(); track entity._id || entity.syen_name) {
|
|
4857
|
-
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-blue-300 hover:tw-border-opacity-50 hover:tw-scale-[1.01] tw-group tw-select-none"
|
|
4858
|
-
[class.tw-border-blue-500]="selectedEntityId() === entity._id"
|
|
4859
|
-
[class.tw-bg-blue-50]="selectedEntityId() === entity._id"
|
|
4860
|
-
[class.tw-opacity-50]="!entity.isActive"
|
|
4861
|
-
[class.tw-bg-gray-100]="!entity.isActive"
|
|
4862
|
-
[class.tw-border-gray-300]="!entity.isActive"
|
|
4863
|
-
(click)="selectEntity(entity._id || '')">
|
|
4864
|
-
<div class="tw-flex tw-items-start tw-space-x-3">
|
|
4865
|
-
<div class="tw-w-6 tw-h-6 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-flex-shrink-0"
|
|
4866
|
-
[class.tw-bg-gray-100]="entity.isActive"
|
|
4867
|
-
[class.tw-bg-gray-200]="!entity.isActive">
|
|
4868
|
-
<cide-ele-icon [class.tw-text-gray-600]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">person</cide-ele-icon>
|
|
4869
|
-
</div>
|
|
4870
|
-
<div class="tw-flex-1 tw-min-w-0">
|
|
4871
|
-
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-1">
|
|
4872
|
-
<h4 class="tw-text-sm tw-font-semibold tw-truncate"
|
|
4873
|
-
[class.tw-text-gray-900]="entity.isActive"
|
|
4874
|
-
[class.tw-text-gray-500]="!entity.isActive">{{ entity.syen_name }}</h4>
|
|
4875
|
-
@if (hasPendingChanges(entity._id || '')) {
|
|
4876
|
-
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-orange-100 tw-text-orange-800">
|
|
4877
|
-
<cide-ele-icon>edit</cide-ele-icon>
|
|
4878
|
-
<span>Modified</span>
|
|
4879
|
-
</div>
|
|
4880
|
-
}
|
|
4881
|
-
@if (entity.isOwner) {
|
|
4882
|
-
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-space-x-1">
|
|
4883
|
-
<cide-ele-icon>admin_panel_settings</cide-ele-icon>
|
|
4884
|
-
<span>Owner</span>
|
|
4885
|
-
</div>
|
|
4886
|
-
}
|
|
4887
|
-
</div>
|
|
4888
|
-
<div class="tw-flex tw-items-center tw-space-x-3">
|
|
4889
|
-
@if (entity.canView) {
|
|
4890
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4891
|
-
<cide-ele-icon [class.tw-text-green-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">visibility</cide-ele-icon>
|
|
4892
|
-
<span class="tw-text-xs" [class.tw-text-green-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">View</span>
|
|
4893
|
-
</div>
|
|
4894
|
-
}
|
|
4895
|
-
@if (entity.canEdit) {
|
|
4896
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4897
|
-
<cide-ele-icon [class.tw-text-blue-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">edit</cide-ele-icon>
|
|
4898
|
-
<span class="tw-text-xs" [class.tw-text-blue-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Edit</span>
|
|
4899
|
-
</div>
|
|
4900
|
-
}
|
|
4901
|
-
@if (entity.isOwner) {
|
|
4902
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4903
|
-
<cide-ele-icon [class.tw-text-purple-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">admin_panel_settings</cide-ele-icon>
|
|
4904
|
-
<span class="tw-text-xs" [class.tw-text-purple-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Owner</span>
|
|
4905
|
-
</div>
|
|
4906
|
-
}
|
|
4907
|
-
@if (!entity.isActive) {
|
|
4908
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4909
|
-
<cide-ele-icon class="tw-text-red-400">block</cide-ele-icon>
|
|
4910
|
-
<span class="tw-text-xs tw-text-red-500">Inactive</span>
|
|
4911
|
-
</div>
|
|
4912
|
-
}
|
|
4913
|
-
</div>
|
|
4914
|
-
</div>
|
|
4915
|
-
@if (selectedEntityId() === entity._id) {
|
|
4916
|
-
<div class="tw-w-4 tw-h-4 tw-bg-green-500 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0">
|
|
4917
|
-
<cide-ele-icon class="tw-text-white">done</cide-ele-icon>
|
|
4918
|
-
</div>
|
|
4919
|
-
}
|
|
4920
|
-
</div>
|
|
4921
|
-
</div>
|
|
4922
|
-
}
|
|
4923
|
-
} @placeholder {
|
|
4924
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-py-4">
|
|
4925
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4926
|
-
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading entities...</span>
|
|
4927
|
-
</div>
|
|
4928
|
-
}
|
|
4929
|
-
</div>
|
|
4930
|
-
}
|
|
4931
|
-
</div>
|
|
4932
|
-
}
|
|
4933
|
-
|
|
4934
|
-
<!-- Entity Hierarchy -->
|
|
4935
|
-
@if (selectedTab() === 'hierarchy') {
|
|
4936
|
-
<div class="tw-mb-4">
|
|
4937
|
-
@if (hierarchyLoading()) {
|
|
4938
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4939
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4940
|
-
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading hierarchy...</span>
|
|
4941
|
-
</div>
|
|
4942
|
-
} @else {
|
|
4943
|
-
<div class="tw-space-y-2">
|
|
4944
|
-
@for (node of hierarchy(); track node._id) {
|
|
4945
|
-
<div class="tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-p-3">
|
|
4946
|
-
<div class="tw-flex tw-items-center tw-justify-between">
|
|
4947
|
-
<div class="tw-flex tw-items-center tw-gap-2">
|
|
4948
|
-
<cide-ele-icon class="tw-text-gray-500">account_tree</cide-ele-icon>
|
|
4949
|
-
<span class="tw-text-sm tw-font-medium tw-text-gray-800">{{ node.syen_name }}</span>
|
|
4950
|
-
</div>
|
|
4951
|
-
<span class="tw-text-xs tw-text-gray-500">Code: {{ node.syen_entity_code }}</span>
|
|
4952
|
-
</div>
|
|
4953
|
-
</div>
|
|
4954
|
-
}
|
|
4955
|
-
</div>
|
|
4956
|
-
}
|
|
4957
|
-
</div>
|
|
4958
|
-
}
|
|
4959
|
-
|
|
4960
|
-
<!-- Rights Management -->
|
|
4961
|
-
@if (selectedEntityId()) {
|
|
4962
|
-
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-shadow-sm">
|
|
4963
|
-
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-3">
|
|
4964
|
-
<cide-ele-icon class="tw-text-green-600">security</cide-ele-icon>
|
|
4965
|
-
<h3 class="tw-text-sm tw-font-semibold tw-text-gray-900">Manage Rights</h3>
|
|
4966
|
-
</div>
|
|
4967
|
-
|
|
4968
|
-
@if (accessPassLoading()) {
|
|
4969
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
4970
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4971
|
-
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading...</span>
|
|
4972
|
-
</div>
|
|
4973
|
-
} @else {
|
|
4974
|
-
@defer (when !accessPassLoading()) {
|
|
4975
|
-
<form [formGroup]="rightsForm" (ngSubmit)="saveRights()">
|
|
4976
|
-
<div class="tw-flex tw-flex-wrap tw-gap-3 tw-min-h-[80px] tw-items-center">
|
|
4977
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4978
|
-
<cide-ele-input
|
|
4979
|
-
type="checkbox"
|
|
4980
|
-
formControlName="can_view"
|
|
4981
|
-
label="View">
|
|
4982
|
-
</cide-ele-input>
|
|
4983
|
-
</div>
|
|
4984
|
-
|
|
4985
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4986
|
-
<cide-ele-input
|
|
4987
|
-
type="checkbox"
|
|
4988
|
-
formControlName="can_edit"
|
|
4989
|
-
label="Edit">
|
|
4990
|
-
</cide-ele-input>
|
|
4991
|
-
</div>
|
|
4992
|
-
|
|
4993
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4994
|
-
<cide-ele-input
|
|
4995
|
-
type="checkbox"
|
|
4996
|
-
formControlName="is_owner"
|
|
4997
|
-
label="Is Owner">
|
|
4998
|
-
</cide-ele-input>
|
|
4999
|
-
</div>
|
|
5000
|
-
|
|
5001
|
-
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
5002
|
-
<cide-ele-input
|
|
5003
|
-
type="checkbox"
|
|
5004
|
-
formControlName="syepm_isactive"
|
|
5005
|
-
label="Is Active">
|
|
5006
|
-
</cide-ele-input>
|
|
5007
|
-
</div>
|
|
5008
|
-
</div>
|
|
5009
|
-
</form>
|
|
5010
|
-
} @placeholder {
|
|
5011
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
5012
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
5013
|
-
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading rights...</span>
|
|
5014
|
-
</div>
|
|
5015
|
-
}
|
|
5016
|
-
}
|
|
5017
|
-
</div>
|
|
5018
|
-
}
|
|
5019
|
-
</div>
|
|
5020
|
-
|
|
5021
|
-
<!-- Fixed Footer -->
|
|
5022
|
-
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-px-4 tw-py-3 tw-border-t tw-border-gray-200 tw-border-opacity-30 tw-flex tw-justify-end tw-space-x-2 tw-flex-shrink-0">
|
|
5023
|
-
<button cideEleButton variant="secondary" size="xs" type="button" (click)="onCancel()">
|
|
5024
|
-
Cancel
|
|
5025
|
-
</button>
|
|
5026
|
-
@if (selectedEntityId()) {
|
|
5027
|
-
<button cideEleButton variant="primary" size="xs" type="button" (click)="saveRights()"
|
|
5028
|
-
[disabled]="rightsForm.invalid || saving()" [loading]="saving()">
|
|
5029
|
-
@if (pendingChangesCount() > 0) {
|
|
5030
|
-
Save {{ pendingChangesCount() }} Change{{ pendingChangesCount() > 1 ? 's' : '' }}
|
|
5031
|
-
} @else {
|
|
5032
|
-
{{ saving() ? 'Saving...' : 'Save' }}
|
|
5033
|
-
}
|
|
5034
|
-
</button>
|
|
5035
|
-
}
|
|
5036
|
-
</div>
|
|
5037
|
-
</div>
|
|
4813
|
+
], template: `
|
|
4814
|
+
<!-- Entity Rights Sharing Content -->
|
|
4815
|
+
<div class="tw-flex tw-flex-col tw-h-full">
|
|
4816
|
+
<!-- Main Content Area -->
|
|
4817
|
+
<div class="tw-flex-1 tw-p-4 tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-gray-300 tw-scrollbar-track-transparent tw-select-none">
|
|
4818
|
+
<!-- Tabs / Pills -->
|
|
4819
|
+
<div class="tw-mb-3 tw-flex tw-items-center tw-gap-2">
|
|
4820
|
+
<button type="button"
|
|
4821
|
+
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4822
|
+
[class.tw-bg-blue-600]="selectedTab() === 'user'"
|
|
4823
|
+
[class.tw-text-white]="selectedTab() === 'user'"
|
|
4824
|
+
[class.tw-bg-gray-100]="selectedTab() !== 'user'"
|
|
4825
|
+
[class.tw-text-gray-700]="selectedTab() !== 'user'"
|
|
4826
|
+
(click)="selectTab('user')">
|
|
4827
|
+
User Linked
|
|
4828
|
+
</button>
|
|
4829
|
+
<button type="button"
|
|
4830
|
+
class="tw-text-xs tw-font-medium tw-rounded-full tw-px-3 tw-py-1 tw-transition-colors"
|
|
4831
|
+
[class.tw-bg-blue-600]="selectedTab() === 'hierarchy'"
|
|
4832
|
+
[class.tw-text-white]="selectedTab() === 'hierarchy'"
|
|
4833
|
+
[class.tw-bg-gray-100]="selectedTab() !== 'hierarchy'"
|
|
4834
|
+
[class.tw-text-gray-700]="selectedTab() !== 'hierarchy'"
|
|
4835
|
+
(click)="selectTab('hierarchy')">
|
|
4836
|
+
Entity Hierarchy
|
|
4837
|
+
</button>
|
|
4838
|
+
</div>
|
|
4839
|
+
|
|
4840
|
+
<!-- User Linked Entities -->
|
|
4841
|
+
@if (selectedTab() === 'user') {
|
|
4842
|
+
<div class="tw-mb-4">
|
|
4843
|
+
|
|
4844
|
+
@if (entitiesLoading()) {
|
|
4845
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4846
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4847
|
+
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading entities...</span>
|
|
4848
|
+
</div>
|
|
4849
|
+
} @else if (entities().length === 0) {
|
|
4850
|
+
<div class="tw-text-center tw-py-6">
|
|
4851
|
+
<div class="tw-w-10 tw-h-10 tw-bg-gray-100 tw-rounded-xl tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-2">
|
|
4852
|
+
<cide-ele-icon class="tw-w-5 tw-h-5 tw-text-gray-400">business</cide-ele-icon>
|
|
4853
|
+
</div>
|
|
4854
|
+
<p class="tw-text-gray-500 tw-text-sm">No entities available</p>
|
|
4855
|
+
</div>
|
|
4856
|
+
} @else {
|
|
4857
|
+
<div class="tw-space-y-2">
|
|
4858
|
+
@defer (when entitiesWithPermissions().length > 0) {
|
|
4859
|
+
@for (entity of entitiesWithPermissions(); track entity._id || entity.syen_name) {
|
|
4860
|
+
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-blue-300 hover:tw-border-opacity-50 hover:tw-scale-[1.01] tw-group tw-select-none"
|
|
4861
|
+
[class.tw-border-blue-500]="selectedEntityId() === entity._id"
|
|
4862
|
+
[class.tw-bg-blue-50]="selectedEntityId() === entity._id"
|
|
4863
|
+
[class.tw-opacity-50]="!entity.isActive"
|
|
4864
|
+
[class.tw-bg-gray-100]="!entity.isActive"
|
|
4865
|
+
[class.tw-border-gray-300]="!entity.isActive"
|
|
4866
|
+
(click)="selectEntity(entity._id || '')">
|
|
4867
|
+
<div class="tw-flex tw-items-start tw-space-x-3">
|
|
4868
|
+
<div class="tw-w-6 tw-h-6 tw-rounded-lg tw-flex tw-items-center tw-justify-center tw-flex-shrink-0"
|
|
4869
|
+
[class.tw-bg-gray-100]="entity.isActive"
|
|
4870
|
+
[class.tw-bg-gray-200]="!entity.isActive">
|
|
4871
|
+
<cide-ele-icon [class.tw-text-gray-600]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">person</cide-ele-icon>
|
|
4872
|
+
</div>
|
|
4873
|
+
<div class="tw-flex-1 tw-min-w-0">
|
|
4874
|
+
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-1">
|
|
4875
|
+
<h4 class="tw-text-sm tw-font-semibold tw-truncate"
|
|
4876
|
+
[class.tw-text-gray-900]="entity.isActive"
|
|
4877
|
+
[class.tw-text-gray-500]="!entity.isActive">{{ entity.syen_name }}</h4>
|
|
4878
|
+
@if (hasPendingChanges(entity._id || '')) {
|
|
4879
|
+
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-orange-100 tw-text-orange-800">
|
|
4880
|
+
<cide-ele-icon>edit</cide-ele-icon>
|
|
4881
|
+
<span>Modified</span>
|
|
4882
|
+
</div>
|
|
4883
|
+
}
|
|
4884
|
+
@if (entity.isOwner) {
|
|
4885
|
+
<div class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-space-x-1">
|
|
4886
|
+
<cide-ele-icon>admin_panel_settings</cide-ele-icon>
|
|
4887
|
+
<span>Owner</span>
|
|
4888
|
+
</div>
|
|
4889
|
+
}
|
|
4890
|
+
</div>
|
|
4891
|
+
<div class="tw-flex tw-items-center tw-space-x-3">
|
|
4892
|
+
@if (entity.canView) {
|
|
4893
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4894
|
+
<cide-ele-icon [class.tw-text-green-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">visibility</cide-ele-icon>
|
|
4895
|
+
<span class="tw-text-xs" [class.tw-text-green-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">View</span>
|
|
4896
|
+
</div>
|
|
4897
|
+
}
|
|
4898
|
+
@if (entity.canEdit) {
|
|
4899
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4900
|
+
<cide-ele-icon [class.tw-text-blue-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">edit</cide-ele-icon>
|
|
4901
|
+
<span class="tw-text-xs" [class.tw-text-blue-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Edit</span>
|
|
4902
|
+
</div>
|
|
4903
|
+
}
|
|
4904
|
+
@if (entity.isOwner) {
|
|
4905
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4906
|
+
<cide-ele-icon [class.tw-text-purple-500]="entity.isActive" [class.tw-text-gray-400]="!entity.isActive">admin_panel_settings</cide-ele-icon>
|
|
4907
|
+
<span class="tw-text-xs" [class.tw-text-purple-600]="entity.isActive" [class.tw-text-gray-500]="!entity.isActive">Owner</span>
|
|
4908
|
+
</div>
|
|
4909
|
+
}
|
|
4910
|
+
@if (!entity.isActive) {
|
|
4911
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
4912
|
+
<cide-ele-icon class="tw-text-red-400">block</cide-ele-icon>
|
|
4913
|
+
<span class="tw-text-xs tw-text-red-500">Inactive</span>
|
|
4914
|
+
</div>
|
|
4915
|
+
}
|
|
4916
|
+
</div>
|
|
4917
|
+
</div>
|
|
4918
|
+
@if (selectedEntityId() === entity._id) {
|
|
4919
|
+
<div class="tw-w-4 tw-h-4 tw-bg-green-500 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0">
|
|
4920
|
+
<cide-ele-icon class="tw-text-white">done</cide-ele-icon>
|
|
4921
|
+
</div>
|
|
4922
|
+
}
|
|
4923
|
+
</div>
|
|
4924
|
+
</div>
|
|
4925
|
+
}
|
|
4926
|
+
} @placeholder {
|
|
4927
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-py-4">
|
|
4928
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4929
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading entities...</span>
|
|
4930
|
+
</div>
|
|
4931
|
+
}
|
|
4932
|
+
</div>
|
|
4933
|
+
}
|
|
4934
|
+
</div>
|
|
4935
|
+
}
|
|
4936
|
+
|
|
4937
|
+
<!-- Entity Hierarchy -->
|
|
4938
|
+
@if (selectedTab() === 'hierarchy') {
|
|
4939
|
+
<div class="tw-mb-4">
|
|
4940
|
+
@if (hierarchyLoading()) {
|
|
4941
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-py-6">
|
|
4942
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4943
|
+
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading hierarchy...</span>
|
|
4944
|
+
</div>
|
|
4945
|
+
} @else {
|
|
4946
|
+
<div class="tw-space-y-2">
|
|
4947
|
+
@for (node of hierarchy(); track node._id) {
|
|
4948
|
+
<div class="tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-p-3">
|
|
4949
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
4950
|
+
<div class="tw-flex tw-items-center tw-gap-2">
|
|
4951
|
+
<cide-ele-icon class="tw-text-gray-500">account_tree</cide-ele-icon>
|
|
4952
|
+
<span class="tw-text-sm tw-font-medium tw-text-gray-800">{{ node.syen_name }}</span>
|
|
4953
|
+
</div>
|
|
4954
|
+
<span class="tw-text-xs tw-text-gray-500">Code: {{ node.syen_entity_code }}</span>
|
|
4955
|
+
</div>
|
|
4956
|
+
</div>
|
|
4957
|
+
}
|
|
4958
|
+
</div>
|
|
4959
|
+
}
|
|
4960
|
+
</div>
|
|
4961
|
+
}
|
|
4962
|
+
|
|
4963
|
+
<!-- Rights Management -->
|
|
4964
|
+
@if (selectedEntityId()) {
|
|
4965
|
+
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-p-3 tw-shadow-sm">
|
|
4966
|
+
<div class="tw-flex tw-items-center tw-space-x-2 tw-mb-3">
|
|
4967
|
+
<cide-ele-icon class="tw-text-green-600">security</cide-ele-icon>
|
|
4968
|
+
<h3 class="tw-text-sm tw-font-semibold tw-text-gray-900">Manage Rights</h3>
|
|
4969
|
+
</div>
|
|
4970
|
+
|
|
4971
|
+
@if (accessPassLoading()) {
|
|
4972
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
4973
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
4974
|
+
<span class="tw-ml-3 tw-text-gray-600 tw-text-sm">Loading...</span>
|
|
4975
|
+
</div>
|
|
4976
|
+
} @else {
|
|
4977
|
+
@defer (when !accessPassLoading()) {
|
|
4978
|
+
<form [formGroup]="rightsForm" (ngSubmit)="saveRights()">
|
|
4979
|
+
<div class="tw-flex tw-flex-wrap tw-gap-3 tw-min-h-[80px] tw-items-center">
|
|
4980
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4981
|
+
<cide-ele-input
|
|
4982
|
+
type="checkbox"
|
|
4983
|
+
formControlName="can_view"
|
|
4984
|
+
label="View">
|
|
4985
|
+
</cide-ele-input>
|
|
4986
|
+
</div>
|
|
4987
|
+
|
|
4988
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4989
|
+
<cide-ele-input
|
|
4990
|
+
type="checkbox"
|
|
4991
|
+
formControlName="can_edit"
|
|
4992
|
+
label="Edit">
|
|
4993
|
+
</cide-ele-input>
|
|
4994
|
+
</div>
|
|
4995
|
+
|
|
4996
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
4997
|
+
<cide-ele-input
|
|
4998
|
+
type="checkbox"
|
|
4999
|
+
formControlName="is_owner"
|
|
5000
|
+
label="Is Owner">
|
|
5001
|
+
</cide-ele-input>
|
|
5002
|
+
</div>
|
|
5003
|
+
|
|
5004
|
+
<div class="tw-flex tw-items-center tw-space-x-2">
|
|
5005
|
+
<cide-ele-input
|
|
5006
|
+
type="checkbox"
|
|
5007
|
+
formControlName="syepm_isactive"
|
|
5008
|
+
label="Is Active">
|
|
5009
|
+
</cide-ele-input>
|
|
5010
|
+
</div>
|
|
5011
|
+
</div>
|
|
5012
|
+
</form>
|
|
5013
|
+
} @placeholder {
|
|
5014
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-min-h-[80px]">
|
|
5015
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
5016
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading rights...</span>
|
|
5017
|
+
</div>
|
|
5018
|
+
}
|
|
5019
|
+
}
|
|
5020
|
+
</div>
|
|
5021
|
+
}
|
|
5022
|
+
</div>
|
|
5023
|
+
|
|
5024
|
+
<!-- Fixed Footer -->
|
|
5025
|
+
<div class="tw-bg-white tw-bg-opacity-80 tw-backdrop-blur-sm tw-px-4 tw-py-3 tw-border-t tw-border-gray-200 tw-border-opacity-30 tw-flex tw-justify-end tw-space-x-2 tw-flex-shrink-0">
|
|
5026
|
+
<button cideEleButton variant="secondary" size="xs" type="button" (click)="onCancel()">
|
|
5027
|
+
Cancel
|
|
5028
|
+
</button>
|
|
5029
|
+
@if (selectedEntityId()) {
|
|
5030
|
+
<button cideEleButton variant="primary" size="xs" type="button" (click)="saveRights()"
|
|
5031
|
+
[disabled]="rightsForm.invalid || saving()" [loading]="saving()">
|
|
5032
|
+
@if (pendingChangesCount() > 0) {
|
|
5033
|
+
Save {{ pendingChangesCount() }} Change{{ pendingChangesCount() > 1 ? 's' : '' }}
|
|
5034
|
+
} @else {
|
|
5035
|
+
{{ saving() ? 'Saving...' : 'Save' }}
|
|
5036
|
+
}
|
|
5037
|
+
</button>
|
|
5038
|
+
}
|
|
5039
|
+
</div>
|
|
5040
|
+
</div>
|
|
5038
5041
|
` }]
|
|
5039
5042
|
}], ctorParameters: () => [] });
|
|
5040
5043
|
|
|
@@ -5055,4 +5058,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
|
|
|
5055
5058
|
*/
|
|
5056
5059
|
|
|
5057
5060
|
export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
|
|
5058
|
-
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-
|
|
5061
|
+
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-Dp5qc3C5.mjs.map
|