cloud-ide-layout 1.0.320 → 1.0.321
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-api-endpoint-manager.component-DRfrvc19.mjs → cloud-ide-layout-api-endpoint-manager.component-Dw1cxsrx.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-api-endpoint-manager.component-DRfrvc19.mjs.map → cloud-ide-layout-api-endpoint-manager.component-Dw1cxsrx.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-cloud-ide-layout-4gj1hEcz.mjs → cloud-ide-layout-cloud-ide-layout-BAI-kDhZ.mjs} +16 -16
- package/fesm2022/{cloud-ide-layout-cloud-ide-layout-4gj1hEcz.mjs.map → cloud-ide-layout-cloud-ide-layout-BAI-kDhZ.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-dashboard-manager.component-eptxY0A8.mjs → cloud-ide-layout-dashboard-manager.component-CLZvHVjK.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-dashboard-manager.component-eptxY0A8.mjs.map → cloud-ide-layout-dashboard-manager.component-CLZvHVjK.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-wBJeXEbh.mjs → cloud-ide-layout-drawer-theme.component-CcutSNX1.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-wBJeXEbh.mjs.map → cloud-ide-layout-drawer-theme.component-CcutSNX1.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-home-wrapper.component-s7qtYASg.mjs → cloud-ide-layout-home-wrapper.component-CvgOSRYL.mjs} +3 -3
- package/fesm2022/{cloud-ide-layout-home-wrapper.component-s7qtYASg.mjs.map → cloud-ide-layout-home-wrapper.component-CvgOSRYL.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CiD0O7JH.mjs → cloud-ide-layout-sidedrawer-notes.component-m45NE8mK.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CiD0O7JH.mjs.map → cloud-ide-layout-sidedrawer-notes.component-m45NE8mK.mjs.map} +1 -1
- package/fesm2022/cloud-ide-layout.mjs +1 -1
- package/package.json +1 -1
|
@@ -2152,7 +2152,7 @@ class NotificationSettingsComponent {
|
|
|
2152
2152
|
</form>
|
|
2153
2153
|
</div>
|
|
2154
2154
|
|
|
2155
|
-
`, isInline: true, styles: ["@media (max-width: 768px){.notification-settings-container{max-width:100%}}.volume-slider-container{position:relative;width:100%;--slider-fill: #2563eb;--slider-track: #e5e7eb}:host-context(.dark-mode) .volume-slider-container{--slider-fill: #3b82f6;--slider-track: #374151}.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;transition:all .2s ease}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#2563eb;cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 4px #0003;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{background:#1d4ed8;transform:scale(1.1);box-shadow:0 3px 6px #0000004d}:host-context(.dark-mode) .volume-slider::-webkit-slider-thumb{background:#3b82f6;border-color:#1e293b}.volume-slider{background-size:var(--slider-value, 0%) 100%;background-repeat:no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
2155
|
+
`, isInline: true, styles: ["@media (max-width: 768px){.notification-settings-container{max-width:100%}}.volume-slider-container{position:relative;width:100%;--slider-fill: #2563eb;--slider-track: #e5e7eb}:host-context(.dark-mode) .volume-slider-container{--slider-fill: #3b82f6;--slider-track: #374151}.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;transition:all .2s ease}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#2563eb;cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 4px #0003;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{background:#1d4ed8;transform:scale(1.1);box-shadow:0 3px 6px #0000004d}:host-context(.dark-mode) .volume-slider::-webkit-slider-thumb{background:#3b82f6;border-color:#1e293b}.volume-slider{background-size:var(--slider-value, 0%) 100%;background-repeat:no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
2156
2156
|
}
|
|
2157
2157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationSettingsComponent, decorators: [{
|
|
2158
2158
|
type: Component,
|
|
@@ -3825,7 +3825,7 @@ class CideLytHeaderWrapperComponent {
|
|
|
3825
3825
|
this.floatingContainerService.bringToFront(containerId);
|
|
3826
3826
|
}
|
|
3827
3827
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3828
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: true }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <!-- Sidebar Toggle Button - Only visible on small screens when sidebar is visible -->\n @if (isSidebarVisible()) {\n <button\n class=\"header-sidebar-toggle tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-gray-900 tw-transition-all tw-duration-300 tw-cursor-pointer tw-mr-1 md:!tw-hidden\"\n (click)=\"toggleSidebar()\" (keydown.enter)=\"toggleSidebar()\" (keydown.space)=\"toggleSidebar()\" tabindex=\"0\"\n role=\"button\" [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\"\n [attr.title]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\">\n <cide-ele-icon size=\"sm\" type=\"none\">\n {{ isSidebarCollapsed() ? 'menu' : 'menu_open' }}\n </cide-ele-icon>\n </button>\n }\n\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 <!-- Financial Year Dropdown -->\n @if (!isStudent()) {\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\" (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n }\n\n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\" (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n\n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- AI Assistant button (when OPEN_AI_ASSISTANT_ACTION is provided) -->\n @if (openAiAction) {\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <button type=\"button\"\n class=\"header-icon tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/30 tw-transition-colors tw-cursor-pointer\"\n (click)=\"openAiAssistant()\" (keydown.enter)=\"openAiAssistant()\" (keydown.space)=\"openAiAssistant()\"\n tabindex=\"0\" role=\"button\" aria-label=\"Open AI Assistant\" title=\"Open AI Assistant (Alt + A)\">\n <cide-ele-icon>smart_toy</cide-ele-icon>\n </button>\n <div class=\"header-tooltip\">AI Assistant (Alt + A)</div>\n </div>\n }\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown #notificationDropdown [items]=\"notificationItems()\" [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\" [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n\n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div\n class=\"tw-w-full tw-min-w-0 sm:tw-min-w-[380px] tw-max-w-[calc(100vw-24px)] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n <!-- Header - Fixed/Sticky -->\n <div\n class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <div\n class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <h3\n class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">\n Notifications</h3>\n @if (unreadCount() > 0) {\n <span\n class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{\n unreadCount() }}</span>\n }\n </div>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n <button type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n title=\"Notification Settings\">\n <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n </button>\n @if (unreadCount() > 0) {\n <button type=\"button\"\n class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n (click)=\"markAllAsRead(); $event.stopPropagation()\" title=\"Mark all as read\">\n <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n </button>\n }\n <button type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n (click)=\"closeNotificationDropdown($event)\" title=\"Close\">\n <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Notifications List -->\n <div\n class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n @if (notifications().length === 0) {\n <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n <cide-ele-icon\n class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No\n notifications yet</p>\n <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught\n up!</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\n [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n [class.tw-bg-blue-50]=\"!isNotificationRead(notif)\"\n [class.dark:tw-bg-gray-700]=\"!isNotificationRead(notif)\"\n [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n [class.tw-mb-0]=\"isNotificationAnimating(notif)\" [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Icon/Avatar -->\n <div class=\"tw-flex-shrink-0 tw-relative\">\n <div\n class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n @if (getNotificationAvatar(notif)) {\n <img cideEleFileImage [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type)\n }}</cide-ele-icon>\n }\n </div>\n <!-- Green online indicator -->\n <div\n class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\">\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <!-- Title and relative time -->\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h4\n class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{\n getNotificationName(notif) }}</span><span\n class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{\n getNotificationAction(notif) }}</span>\n </h4>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{\n getTimeAgo(notif.timestamp) }}</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n @if (!isNotificationRead(notif)) {\n <div\n class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\">\n </div>\n }\n @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n <button type=\"button\"\n (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n Undo\n </button>\n }\n </div>\n </div>\n\n <!-- Message -->\n @if (notif.message && notif.message !== notif.title) {\n <p\n class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n {{ notif.message }}\n </p>\n }\n\n <!-- Comment -->\n @if (notif.data?.comment) {\n <div\n class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n <p\n class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">\n {{ notif.data.comment }}</p>\n </div>\n }\n\n <!-- File -->\n @if (notif.data?.file) {\n <div\n class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{\n getFileIcon(notif.data.file.type) }}</span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p\n class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n {{ notif.data.file.name }}</p>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{\n notif.data.file.size }}</p>\n </div>\n <cide-ele-icon\n class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n </div>\n }\n\n <!-- Action Buttons -->\n @if (notif.action_label) {\n <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\"\n class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\"\n class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\" [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'\"\n class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:200;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgb(var(--tw-gray-200-rgb) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-sidebar-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;outline:none;transition:background-color .2s ease;position:relative;flex-shrink:0}.header-sidebar-toggle:hover{background-color:rgb(var(--tw-gray-100-rgb) / .8)}.header-sidebar-toggle:active{background-color:rgb(var(--tw-gray-200-rgb) / .8)}.header-sidebar-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.5rem}.header-sidebar-toggle cide-ele-icon{transition:transform .2s ease,opacity .2s ease;display:inline-block;transform-origin:center}.header-sidebar-toggle:hover cide-ele-icon{transform:scale(1.1)}:root[data-theme=dark] .header-sidebar-toggle,:root.dark-mode .header-sidebar-toggle{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-sidebar-toggle:hover,:root.dark-mode .header-sidebar-toggle:hover{background-color:var(--cide-theme-hover-bg-color);color:var(--cide-theme-color-brand-primary)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:rgb(var(--tw-gray-50-rgb) / .8);border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:rgb(var(--tw-white-rgb) / 1);transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em;padding-left:2.5rem!important}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon-wrapper{left:.5rem!important;z-index:1}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.cide-lyt-header{padding:0 .5rem;flex-wrap:nowrap;min-height:var(--cide-lyt-header-wrapper-height);height:var(--cide-lyt-header-wrapper-height);z-index:10001!important}.header-sidebar-toggle{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;background:transparent!important;padding:0!important;margin-right:.125rem!important}.header-sidebar-toggle:hover{background:transparent!important;color:var(--cide-theme-color-brand-primary)!important}.header-logo-container{padding:0;gap:.25rem!important}.header-logo-container img,.header-logo-container cide-ele-icon{width:18px;height:18px}.cide-lyt-header .tw-text-md{display:block!important;font-size:.7rem!important;font-weight:600!important;max-width:calc(100vw - 120px);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-4px;line-height:normal}@media (min-width: 640px){.cide-lyt-header .tw-text-md{font-size:.75rem!important;max-width:calc(100vw - 180px)}}.header-search-container{display:none}.header-icons-container{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}.header-icon{width:22px;height:22px;margin:0;min-width:22px;min-height:22px}.header-year-pill{padding:0;font-size:.6rem;min-height:22px;height:22px;border:none;background:transparent;box-shadow:none}.header-year-pill-text{max-width:35px;font-size:.55rem}.profile-avatar{width:20px;height:20px;font-size:.55rem}.header-divider{display:none}.header-dropdown-container{margin:0}.header-badge{min-width:12px;height:12px;font-size:7px;padding:0 2px;top:-1px;right:-1px;border-width:1px}.header-icon cide-ele-icon{font-size:1rem!important}.header-dropdown-container cide-ele-icon{font-size:.9rem!important}}@media (max-width: 480px){.cide-lyt-header{padding:0 .25rem}.cide-lyt-header .tw-text-md{display:inline-block!important;max-width:calc(100vw - 100px);flex:1 1 auto;min-width:0;font-size:.7rem!important}.header-year-pill-text{display:none}.header-year-pill{width:auto;justify-content:center;background:transparent!important;border:none!important;box-shadow:none!important}.header-icons-container{gap:.125rem}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:var(--cide-lyt-header-wrapper-height);padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{max-height:450px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
3828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: true }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <!-- Sidebar Toggle Button - Only visible on small screens when sidebar is visible -->\n @if (isSidebarVisible()) {\n <button\n class=\"header-sidebar-toggle tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-gray-900 tw-transition-all tw-duration-300 tw-cursor-pointer tw-mr-1 md:!tw-hidden\"\n (click)=\"toggleSidebar()\" (keydown.enter)=\"toggleSidebar()\" (keydown.space)=\"toggleSidebar()\" tabindex=\"0\"\n role=\"button\" [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\"\n [attr.title]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\">\n <cide-ele-icon size=\"sm\" type=\"none\">\n {{ isSidebarCollapsed() ? 'menu' : 'menu_open' }}\n </cide-ele-icon>\n </button>\n }\n\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 <!-- Financial Year Dropdown -->\n @if (!isStudent()) {\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\" (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n }\n\n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\" (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n\n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- AI Assistant button (when OPEN_AI_ASSISTANT_ACTION is provided) -->\n @if (openAiAction) {\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <button type=\"button\"\n class=\"header-icon tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/30 tw-transition-colors tw-cursor-pointer\"\n (click)=\"openAiAssistant()\" (keydown.enter)=\"openAiAssistant()\" (keydown.space)=\"openAiAssistant()\"\n tabindex=\"0\" role=\"button\" aria-label=\"Open AI Assistant\" title=\"Open AI Assistant (Alt + A)\">\n <cide-ele-icon>smart_toy</cide-ele-icon>\n </button>\n <div class=\"header-tooltip\">AI Assistant (Alt + A)</div>\n </div>\n }\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown #notificationDropdown [items]=\"notificationItems()\" [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\" [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n\n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div\n class=\"tw-w-full tw-min-w-0 sm:tw-min-w-[380px] tw-max-w-[calc(100vw-24px)] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n <!-- Header - Fixed/Sticky -->\n <div\n class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <div\n class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <h3\n class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">\n Notifications</h3>\n @if (unreadCount() > 0) {\n <span\n class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{\n unreadCount() }}</span>\n }\n </div>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n <button type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n title=\"Notification Settings\">\n <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n </button>\n @if (unreadCount() > 0) {\n <button type=\"button\"\n class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n (click)=\"markAllAsRead(); $event.stopPropagation()\" title=\"Mark all as read\">\n <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n </button>\n }\n <button type=\"button\"\n class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n (click)=\"closeNotificationDropdown($event)\" title=\"Close\">\n <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n\n <!-- Notifications List -->\n <div\n class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n @if (notifications().length === 0) {\n <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n <cide-ele-icon\n class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No\n notifications yet</p>\n <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught\n up!</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\n [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n [class.tw-bg-blue-50]=\"!isNotificationRead(notif)\"\n [class.dark:tw-bg-gray-700]=\"!isNotificationRead(notif)\"\n [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n [class.tw-mb-0]=\"isNotificationAnimating(notif)\" [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Icon/Avatar -->\n <div class=\"tw-flex-shrink-0 tw-relative\">\n <div\n class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n @if (getNotificationAvatar(notif)) {\n <img cideEleFileImage [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type)\n }}</cide-ele-icon>\n }\n </div>\n <!-- Green online indicator -->\n <div\n class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\">\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-min-w-0\">\n <!-- Title and relative time -->\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h4\n class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{\n getNotificationName(notif) }}</span><span\n class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{\n getNotificationAction(notif) }}</span>\n </h4>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{\n getTimeAgo(notif.timestamp) }}</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n @if (!isNotificationRead(notif)) {\n <div\n class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\">\n </div>\n }\n @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n <button type=\"button\"\n (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n Undo\n </button>\n }\n </div>\n </div>\n\n <!-- Message -->\n @if (notif.message && notif.message !== notif.title) {\n <p\n class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n {{ notif.message }}\n </p>\n }\n\n <!-- Comment -->\n @if (notif.data?.comment) {\n <div\n class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n <p\n class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">\n {{ notif.data.comment }}</p>\n </div>\n }\n\n <!-- File -->\n @if (notif.data?.file) {\n <div\n class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{\n getFileIcon(notif.data.file.type) }}</span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p\n class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n {{ notif.data.file.name }}</p>\n <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{\n notif.data.file.size }}</p>\n </div>\n <cide-ele-icon\n class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n </div>\n }\n\n <!-- Action Buttons -->\n @if (notif.action_label) {\n <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\"\n class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\"\n class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\" [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'\"\n class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:200;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgb(var(--tw-gray-200-rgb) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-sidebar-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;outline:none;transition:background-color .2s ease;position:relative;flex-shrink:0}.header-sidebar-toggle:hover{background-color:rgb(var(--tw-gray-100-rgb) / .8)}.header-sidebar-toggle:active{background-color:rgb(var(--tw-gray-200-rgb) / .8)}.header-sidebar-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.5rem}.header-sidebar-toggle cide-ele-icon{transition:transform .2s ease,opacity .2s ease;display:inline-block;transform-origin:center}.header-sidebar-toggle:hover cide-ele-icon{transform:scale(1.1)}:root[data-theme=dark] .header-sidebar-toggle,:root.dark-mode .header-sidebar-toggle{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-sidebar-toggle:hover,:root.dark-mode .header-sidebar-toggle:hover{background-color:var(--cide-theme-hover-bg-color);color:var(--cide-theme-color-brand-primary)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:rgb(var(--tw-gray-50-rgb) / .8);border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:rgb(var(--tw-white-rgb) / 1);transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em;padding-left:2.5rem!important}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon-wrapper{left:.5rem!important;z-index:1}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.cide-lyt-header{padding:0 .5rem;flex-wrap:nowrap;min-height:var(--cide-lyt-header-wrapper-height);height:var(--cide-lyt-header-wrapper-height);z-index:10001!important}.header-sidebar-toggle{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;background:transparent!important;padding:0!important;margin-right:.125rem!important}.header-sidebar-toggle:hover{background:transparent!important;color:var(--cide-theme-color-brand-primary)!important}.header-logo-container{padding:0;gap:.25rem!important}.header-logo-container img,.header-logo-container cide-ele-icon{width:18px;height:18px}.cide-lyt-header .tw-text-md{display:block!important;font-size:.7rem!important;font-weight:600!important;max-width:calc(100vw - 120px);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-4px;line-height:normal}@media (min-width: 640px){.cide-lyt-header .tw-text-md{font-size:.75rem!important;max-width:calc(100vw - 180px)}}.header-search-container{display:none}.header-icons-container{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}.header-icon{width:22px;height:22px;margin:0;min-width:22px;min-height:22px}.header-year-pill{padding:0;font-size:.6rem;min-height:22px;height:22px;border:none;background:transparent;box-shadow:none}.header-year-pill-text{max-width:35px;font-size:.55rem}.profile-avatar{width:20px;height:20px;font-size:.55rem}.header-divider{display:none}.header-dropdown-container{margin:0}.header-badge{min-width:12px;height:12px;font-size:7px;padding:0 2px;top:-1px;right:-1px;border-width:1px}.header-icon cide-ele-icon{font-size:1rem!important}.header-dropdown-container cide-ele-icon{font-size:.9rem!important}}@media (max-width: 480px){.cide-lyt-header{padding:0 .25rem}.cide-lyt-header .tw-text-md{display:inline-block!important;max-width:calc(100vw - 100px);flex:1 1 auto;min-width:0;font-size:.7rem!important}.header-year-pill-text{display:none}.header-year-pill{width:auto;justify-content:center;background:transparent!important;border:none!important;box-shadow:none!important}.header-icons-container{gap:.125rem}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:var(--cide-lyt-header-wrapper-height);padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{max-height:450px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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"] }] });
|
|
3829
3829
|
}
|
|
3830
3830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
|
|
3831
3831
|
type: Component,
|
|
@@ -4649,7 +4649,7 @@ class CideLytSidebarWrapperComponent {
|
|
|
4649
4649
|
}
|
|
4650
4650
|
}
|
|
4651
4651
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4652
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 - Always visible on all screen sizes -->\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n (keydown.enter)=\"toggleSidebar()\" [cideEleTooltip]=\"isCollapsed() ? 'Expand Menu' : 'Collapse Menu'\"\n tooltipPlacement=\"right\">\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n </cide-ele-icon>\n </div> <!-- Main navigation icons - Enhanced Design -->\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\n @for (core_system_module_item of core_system_module(); track $index) {\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n tooltipPlacement=\"right\"\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n <!-- Notification Badge with enhanced design -->\n @if (core_system_module_item?.syme_ping) {\n <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n style=\"background-color: var(--cide-theme-error-color);\">\n </div>\n }\n\n <!-- Enhanced icon with better visual effects -->\n <div\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n tw-border-2 tw-border-transparent\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n <cide-ele-icon type=\"box\" size=\"xs\"\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n {{core_system_module_item?.syme_icon || 'dashboard'}}\n </cide-ele-icon>\n </div>\n\n <!-- Modern active indicator -->\n @if (activeModuleId === core_system_module_item._id) {\n <div\n class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div> <!-- Second tier sidebar (Expanded view) -->\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n <div class=\"tw-flex tw-flex-col tw-h-full\">\n <!-- Header section with search and options -->\n <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n <!-- Title with back button - Clean layout without online indicator -->\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n <button\n class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n getActiveModuleIcon() }}</cide-ele-icon>\n </button>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n {{ appState.getActiveModuleTitle() || 'Menu' }}\n </h2>\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n Module Dashboard\n </p>\n </div>\n </div>\n\n <!-- Search and options -->\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"search-wrapper tw-relative tw-flex-1\">\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\"\n (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=\"options-toggle tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n (click)=\"toggleOptions()\">\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n </button>\n\n <!-- Options dropdown menu -->\n <div *ngIf=\"showOptions()\"\n class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n Refresh\n </a>\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\n Sync settings\n </a>\n </div>\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n Help & support\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Menu items with categories -->\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n <!-- Search results if searching -->\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n </div>\n\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{item.icon}}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n </a>\n </div>\n\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n </div>\n </div>\n\n <!-- Only show these sections if not searching -->\n <ng-container *ngIf=\"!searchText()\">\n <!-- Loading state -->\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n </div>\n\n <!-- Dynamic menu tree -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n [class.animate-in]=\"animateSections()[0]\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n </div>\n\n <!-- Empty state -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n </div>\n </ng-container>\n\n <!-- Recursive menu template -->\n <ng-template #recursiveMenu let-menus let-level=\"level\">\n <div [class.tw-ml-0]=\"level > 0\">\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n <!-- Title type items (section headers) -->\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n <h3\n class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">\n {{\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 hover:tw-bg-gray-50 tw-cursor-pointer\"\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-text-gray-400\" type=\"none\" size=\"2xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n }}</span>\n\n <!-- Right side icons container -->\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n {{ menu.children.length }}\n </span>\n\n <!-- Expand/Collapse Icon (right side) -->\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </div>\n </button>\n\n <!-- Section Content (collapsible) -->\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200\"\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </div>\n </div>\n\n <!-- Menu type items (clickable links) -->\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\"\n tabindex=\"0\" role=\"button\" class=\"menu-item hover:tw-bg-gray-50 tw-cursor-pointer\">\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-text-gray-500\" type=\"none\" size=\"xs\">{{\n menu.syme_icon }}</cide-ele-icon>\n <span class=\"tw-text-gray-700\">{{ menu.syme_title }}</span>\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </a>\n\n <!-- Render nested children for menu items -->\n <ng-container\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- Notification panel (overlays content when shown) -->\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n (click)=\"toggleNotificationsPanel()\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\"\n (click)=\"markAllAsRead()\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n @for (notification of notifications(); track notification.id) {\n <div [@notificationRemove]=\"notification.state\"\n class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n [class.tw-border-blue-500]=\"notification.unread\"\n [class.tw-border-transparent]=\"!notification.unread\"\n [class.tw-bg-blue-50]=\"notification.unread\">\n <div class=\"tw-flex tw-gap-3\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n [class.tw-bg-blue-100]=\"notification.unread\"\n [class.tw-bg-gray-100]=\"!notification.unread\"\n [class.tw-text-blue-500]=\"notification.unread\"\n [class.tw-text-gray-500]=\"!notification.unread\">\n <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n </div>\n <button\n class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n (click)=\"removeNotification(notification.id)\" title=\"Remove notification\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n @if (notifications().length === 0) {\n <div class=\"tw-p-8 tw-text-center\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\"\n size=\"md\">notifications_none</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n <!-- for info display -->\n </div>\n </div>\n </div>\n\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n</nav>\n\n<!-- Mobile Overlay Backdrop -->\n<div class=\"sidebar-overlay\" [class.active]=\"!isCollapsed()\" (click)=\"toggleSidebar()\"></div>", 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 .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;--sidebar-menu-item-margin: 2px 0;--sidebar-menu-item-padding: 4px 8px;--sidebar-menu-font-size: 13px;--sidebar-menu-icon-size: 16px;--sidebar-menu-item-height: 28px;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));z-index:150}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;box-shadow:0 2px 8px var(--sidebar-shadow-color)}.cide-lyt-sidebar:not(.collapsed){box-shadow:0 4px 12px var(--sidebar-shadow-color)}.cide-lyt-sidebar.animating{transition:width .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-20px);transition:width .4s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1),visibility .35s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);pointer-events:none}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);pointer-events:auto;transition:width .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1) .15s,visibility .4s cubic-bezier(.4,0,.2,1) .15s,transform .4s cubic-bezier(.4,0,.2,1) .15s}.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 .4s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.collapse-toggle:hover{background:#fff3;transform:scale(1.1)}.collapse-toggle:active{transform:scale(.95)}@media screen and (max-width: 768px){.collapse-toggle{background:#ffffff26;margin-bottom:.75rem;box-shadow:0 2px 4px #0000001a}}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1) .15s,visibility .4s cubic-bezier(.4,0,.2,1) .15s,transform .4s cubic-bezier(.4,0,.2,1) .15s,border-left .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:var(--sidebar-menu-item-margin);padding:var(--sidebar-menu-item-padding);min-height:var(--sidebar-menu-item-height);border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color);display:flex!important;align-items:center}.menu-item span{font-size:var(--sidebar-menu-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.menu-item cide-ele-icon{font-size:var(--sidebar-menu-icon-size);width:var(--sidebar-menu-icon-size);height:var(--sidebar-menu-icon-size);display:flex;align-items:center;justify-content:center;margin-right:8px}.section-header{width:100%;display:flex!important;align-items:center;margin:var(--sidebar-menu-item-margin);padding:var(--sidebar-menu-item-padding);min-height:var(--sidebar-menu-item-height);border-radius:.5rem;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;text-align:left}.section-header span{font-size:var(--sidebar-menu-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.section-header cide-ele-icon{font-size:var(--sidebar-menu-icon-size);width:var(--sidebar-menu-icon-size);height:var(--sidebar-menu-icon-size);display:flex;align-items:center;justify-content:center;margin-right:8px}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar{position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;height:calc(100vh - var(--cide-lyt-header-wrapper-height));height:calc(100dvh - var(--cide-lyt-header-wrapper-height));z-index:9999;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);width:auto;min-width:auto;background-color:var(--cide-theme-sidebar-color);box-shadow:4px 0 20px #00000026;pointer-events:auto;--sidebar-menu-icon-size: 12px;--sidebar-menu-font-size: 12px}.cide-lyt-sidebar.collapsed{transform:translate(-100%);box-shadow:none}.cide-lyt-stack{width:32px;min-width:32px;flex-shrink:0;border-right:1px solid var(--cide-theme-border-color)}.cide-lyt-sidebar-menu{width:calc(100vw - 32px);max-width:100%;height:100%;opacity:1!important;visibility:visible!important;transform:none!important}.sidebar-header{padding:.2rem!important;padding-top:10px!important}.sidebar-header .tw-mb-2\\.5{margin-bottom:.1rem!important}.sidebar-header .tw-gap-2{gap:.1rem!important}.back-button{padding:.1rem!important}.sidebar-header h2{font-size:.65rem!important;line-height:1!important}.sidebar-header p{font-size:.55rem!important}.search-wrapper ::ng-deep .cide-input-field{min-height:20px!important;height:20px!important;font-size:.6rem!important;padding:0 .25rem!important}.search-wrapper ::ng-deep .cide-input-icon{font-size:.6rem!important}.search-shortcut{font-size:.5rem!important;padding:0 .2rem!important;height:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;right:2px!important;top:50%!important;transform:translateY(-50%)!important}.options-toggle{min-height:20px!important;height:20px!important;width:20px!important;padding:0!important;margin-left:.25rem!important;display:flex!important;align-items:center!important;justify-content:center!important}.options-toggle cide-ele-icon{scale:.7}.sidebar-content{padding:0!important}.nav-item{width:22px!important;height:22px!important;margin:1.5px 0!important;border-radius:4px!important}.nav-item cide-ele-icon{font-size:.6rem!important}.menu-item{padding:.25rem 0!important;margin:0!important;min-height:18px!important;gap:.35rem!important}.menu-item span{font-size:.65rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;max-width:100%!important}.menu-item cide-ele-icon{width:12px!important;height:12px!important;min-width:12px!important;margin-right:.35rem!important}.section-header{padding:.2rem 3px!important;margin:0!important;gap:.35rem!important}.section-header span{font-size:.6rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;max-width:calc(100% - 20px)!important}.section-header cide-ele-icon{width:11px!important;height:11px!important;min-width:11px!important;margin-right:.35rem!important}.section-content{padding-left:0!important;margin-left:0!important;margin-top:2px!important;border-left:1px solid var(--cide-theme-border-color)!important;margin-bottom:4px!important}.tw-text-\\[10px\\]{font-size:7px!important}.sidebar-overlay{position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;right:0;bottom:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);z-index:9998}.sidebar-overlay.active{opacity:1;pointer-events:auto}.user-menu{width:12rem;max-width:calc(100vw - 2rem)}.options-menu{width:10rem!important;max-width:calc(100vw - 3rem);z-index:10002!important}.options-menu a{padding:.35rem .5rem!important;font-size:.7rem!important}.options-menu cide-ele-icon{font-size:.65rem!important;margin-right:.5rem!important}.section-header:focus,.menu-item:focus,.nav-item:focus,.back-button:focus,.options-toggle:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.sidebar-section .tw-mb-2{margin-bottom:.125rem!important}.sidebar-section .tw-mb-1\\.5{margin-bottom:.1rem!important}.sidebar-section .tw-mt-1{margin-top:0!important}.sidebar-section{padding:2px!important}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;padding:.25rem .5rem}.notification-panel{width:100%;max-width:100%;padding:.375rem}}@media screen and (max-width: 480px){.cide-lyt-sidebar-menu{width:calc(100% - 32px);min-width:unset}.cide-lyt-stack{width:40px;min-width:40px}.sidebar-content{padding:.375rem}.menu-item{padding:.4rem 0;font-size:.8rem;gap:.35rem}.menu-item cide-ele-icon{width:11px!important;height:11px!important;min-width:11px!important;margin-right:.3rem!important}.nav-item{width:32px;height:32px;margin:4px 0}.user-avatar{width:2rem;height:2rem}.notification-panel{padding:.375rem}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-sidebar-menu{max-width:300px}.sidebar-content{padding:.5rem}.nav-item{margin:4px 0}.menu-item{padding:.625rem 0}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: [
|
|
4652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 - Always visible on all screen sizes -->\n <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n (keydown.enter)=\"toggleSidebar()\" [cideEleTooltip]=\"isCollapsed() ? 'Expand Menu' : 'Collapse Menu'\"\n tooltipPlacement=\"right\">\n <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n </cide-ele-icon>\n </div> <!-- Main navigation icons - Enhanced Design -->\n <div class=\"tw-flex tw-flex-col tw-gap-4\">\n @for (core_system_module_item of core_system_module(); track $index) {\n <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n tooltipPlacement=\"right\"\n [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n <!-- Notification Badge with enhanced design -->\n @if (core_system_module_item?.syme_ping) {\n <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n style=\"background-color: var(--cide-theme-error-color);\">\n </div>\n }\n\n <!-- Enhanced icon with better visual effects -->\n <div\n class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n tw-border-2 tw-border-transparent\n {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n <cide-ele-icon type=\"box\" size=\"xs\"\n class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n {{core_system_module_item?.syme_icon || 'dashboard'}}\n </cide-ele-icon>\n </div>\n\n <!-- Modern active indicator -->\n @if (activeModuleId === core_system_module_item._id) {\n <div\n class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div> <!-- Second tier sidebar (Expanded view) -->\n <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n <div class=\"tw-flex tw-flex-col tw-h-full\">\n <!-- Header section with search and options -->\n <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n <!-- Title with back button - Clean layout without online indicator -->\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n <button\n class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n getActiveModuleIcon() }}</cide-ele-icon>\n </button>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n {{ appState.getActiveModuleTitle() || 'Menu' }}\n </h2>\n <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n Module Dashboard\n </p>\n </div>\n </div>\n\n <!-- Search and options -->\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"search-wrapper tw-relative tw-flex-1\">\n <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\"\n (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=\"options-toggle tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n (click)=\"toggleOptions()\">\n <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n </button>\n\n <!-- Options dropdown menu -->\n <div *ngIf=\"showOptions()\"\n class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n Refresh\n </a>\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">sync</cide-ele-icon>\n Sync settings\n </a>\n </div>\n <div class=\"tw-py-1\">\n <a href=\"#\"\n class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n Help & support\n </a>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Menu items with categories -->\n <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n <!-- Search results if searching -->\n <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n </div>\n\n <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n <a *ngFor=\"let item of searchResults()\" href=\"#\"\n class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n size=\"xs\">{{item.icon}}</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n </a>\n </div>\n\n <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n </div>\n </div>\n\n <!-- Only show these sections if not searching -->\n <ng-container *ngIf=\"!searchText()\">\n <!-- Loading state -->\n <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n </div>\n\n <!-- Dynamic menu tree -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n [class.animate-in]=\"animateSections()[0]\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n </div>\n\n <!-- Empty state -->\n <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n class=\"tw-p-4 tw-text-center\">\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\n <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n </div>\n <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n </div>\n </ng-container>\n\n <!-- Recursive menu template -->\n <ng-template #recursiveMenu let-menus let-level=\"level\">\n <div [class.tw-ml-0]=\"level > 0\">\n <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n <!-- Title type items (section headers) -->\n <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n <h3\n class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">\n {{\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 hover:tw-bg-gray-50 tw-cursor-pointer\"\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-text-gray-400\" type=\"none\" size=\"2xs\">{{\n menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n <!-- Section Title -->\n <span class=\"tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n }}</span>\n\n <!-- Right side icons container -->\n <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Child Count Badge -->\n <span *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n {{ menu.children.length }}\n </span>\n\n <!-- Expand/Collapse Icon (right side) -->\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </div>\n </button>\n\n <!-- Section Content (collapsible) -->\n <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200\"\n [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </div>\n </div>\n\n <!-- Menu type items (clickable links) -->\n <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\"\n tabindex=\"0\" role=\"button\" class=\"menu-item hover:tw-bg-gray-50 tw-cursor-pointer\">\n <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-text-gray-500\" type=\"none\" size=\"xs\">{{\n menu.syme_icon }}</cide-ele-icon>\n <span class=\"tw-text-gray-700\">{{ menu.syme_title }}</span>\n <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n size=\"2xs\">chevron_right</cide-ele-icon>\n </a>\n\n <!-- Render nested children for menu items -->\n <ng-container\n *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n </ng-container>\n </div>\n </div>\n </ng-template>\n </div>\n\n <!-- Notification panel (overlays content when shown) -->\n <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n (click)=\"toggleNotificationsPanel()\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\"\n (click)=\"markAllAsRead()\">Mark all as read</button>\n </div>\n\n <div class=\"tw-space-y-3\">\n @for (notification of notifications(); track notification.id) {\n <div [@notificationRemove]=\"notification.state\"\n class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n [class.tw-border-blue-500]=\"notification.unread\"\n [class.tw-border-transparent]=\"!notification.unread\"\n [class.tw-bg-blue-50]=\"notification.unread\">\n <div class=\"tw-flex tw-gap-3\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n [class.tw-bg-blue-100]=\"notification.unread\"\n [class.tw-bg-gray-100]=\"!notification.unread\"\n [class.tw-text-blue-500]=\"notification.unread\"\n [class.tw-text-gray-500]=\"!notification.unread\">\n <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n </div>\n <button\n class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n (click)=\"removeNotification(notification.id)\" title=\"Remove notification\">\n <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n @if (notifications().length === 0) {\n <div class=\"tw-p-8 tw-text-center\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\"\n size=\"md\">notifications_none</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Storage info at bottom -->\n <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n <!-- for info display -->\n </div>\n </div>\n </div>\n\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n</nav>\n\n<!-- Mobile Overlay Backdrop -->\n<div class=\"sidebar-overlay\" [class.active]=\"!isCollapsed()\" (click)=\"toggleSidebar()\"></div>", 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 .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;--sidebar-menu-item-margin: 2px 0;--sidebar-menu-item-padding: 4px 8px;--sidebar-menu-font-size: 13px;--sidebar-menu-icon-size: 16px;--sidebar-menu-item-height: 28px;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));z-index:150}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;box-shadow:0 2px 8px var(--sidebar-shadow-color)}.cide-lyt-sidebar:not(.collapsed){box-shadow:0 4px 12px var(--sidebar-shadow-color)}.cide-lyt-sidebar.animating{transition:width .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-20px);transition:width .4s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1),visibility .35s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);pointer-events:none}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);pointer-events:auto;transition:width .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1) .15s,visibility .4s cubic-bezier(.4,0,.2,1) .15s,transform .4s cubic-bezier(.4,0,.2,1) .15s}.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 .4s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.collapse-toggle:hover{background:#fff3;transform:scale(1.1)}.collapse-toggle:active{transform:scale(.95)}@media screen and (max-width: 768px){.collapse-toggle{background:#ffffff26;margin-bottom:.75rem;box-shadow:0 2px 4px #0000001a}}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1) .15s,visibility .4s cubic-bezier(.4,0,.2,1) .15s,transform .4s cubic-bezier(.4,0,.2,1) .15s,border-left .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:var(--sidebar-menu-item-margin);padding:var(--sidebar-menu-item-padding);min-height:var(--sidebar-menu-item-height);border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color);display:flex!important;align-items:center}.menu-item span{font-size:var(--sidebar-menu-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.menu-item cide-ele-icon{font-size:var(--sidebar-menu-icon-size);width:var(--sidebar-menu-icon-size);height:var(--sidebar-menu-icon-size);display:flex;align-items:center;justify-content:center;margin-right:8px}.section-header{width:100%;display:flex!important;align-items:center;margin:var(--sidebar-menu-item-margin);padding:var(--sidebar-menu-item-padding);min-height:var(--sidebar-menu-item-height);border-radius:.5rem;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;text-align:left}.section-header span{font-size:var(--sidebar-menu-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.section-header cide-ele-icon{font-size:var(--sidebar-menu-icon-size);width:var(--sidebar-menu-icon-size);height:var(--sidebar-menu-icon-size);display:flex;align-items:center;justify-content:center;margin-right:8px}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar{position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;height:calc(100vh - var(--cide-lyt-header-wrapper-height));height:calc(100dvh - var(--cide-lyt-header-wrapper-height));z-index:9999;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);width:auto;min-width:auto;background-color:var(--cide-theme-sidebar-color);box-shadow:4px 0 20px #00000026;pointer-events:auto;--sidebar-menu-icon-size: 12px;--sidebar-menu-font-size: 12px}.cide-lyt-sidebar.collapsed{transform:translate(-100%);box-shadow:none}.cide-lyt-stack{width:32px;min-width:32px;flex-shrink:0;border-right:1px solid var(--cide-theme-border-color)}.cide-lyt-sidebar-menu{width:calc(100vw - 32px);max-width:100%;height:100%;opacity:1!important;visibility:visible!important;transform:none!important}.sidebar-header{padding:.2rem!important;padding-top:10px!important}.sidebar-header .tw-mb-2\\.5{margin-bottom:.1rem!important}.sidebar-header .tw-gap-2{gap:.1rem!important}.back-button{padding:.1rem!important}.sidebar-header h2{font-size:.65rem!important;line-height:1!important}.sidebar-header p{font-size:.55rem!important}.search-wrapper ::ng-deep .cide-input-field{min-height:20px!important;height:20px!important;font-size:.6rem!important;padding:0 .25rem!important}.search-wrapper ::ng-deep .cide-input-icon{font-size:.6rem!important}.search-shortcut{font-size:.5rem!important;padding:0 .2rem!important;height:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;right:2px!important;top:50%!important;transform:translateY(-50%)!important}.options-toggle{min-height:20px!important;height:20px!important;width:20px!important;padding:0!important;margin-left:.25rem!important;display:flex!important;align-items:center!important;justify-content:center!important}.options-toggle cide-ele-icon{scale:.7}.sidebar-content{padding:0!important}.nav-item{width:22px!important;height:22px!important;margin:1.5px 0!important;border-radius:4px!important}.nav-item cide-ele-icon{font-size:.6rem!important}.menu-item{padding:.25rem 0!important;margin:0!important;min-height:18px!important;gap:.35rem!important}.menu-item span{font-size:.65rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;max-width:100%!important}.menu-item cide-ele-icon{width:12px!important;height:12px!important;min-width:12px!important;margin-right:.35rem!important}.section-header{padding:.2rem 3px!important;margin:0!important;gap:.35rem!important}.section-header span{font-size:.6rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;max-width:calc(100% - 20px)!important}.section-header cide-ele-icon{width:11px!important;height:11px!important;min-width:11px!important;margin-right:.35rem!important}.section-content{padding-left:0!important;margin-left:0!important;margin-top:2px!important;border-left:1px solid var(--cide-theme-border-color)!important;margin-bottom:4px!important}.tw-text-\\[10px\\]{font-size:7px!important}.sidebar-overlay{position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;right:0;bottom:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);z-index:9998}.sidebar-overlay.active{opacity:1;pointer-events:auto}.user-menu{width:12rem;max-width:calc(100vw - 2rem)}.options-menu{width:10rem!important;max-width:calc(100vw - 3rem);z-index:10002!important}.options-menu a{padding:.35rem .5rem!important;font-size:.7rem!important}.options-menu cide-ele-icon{font-size:.65rem!important;margin-right:.5rem!important}.section-header:focus,.menu-item:focus,.nav-item:focus,.back-button:focus,.options-toggle:focus{outline:none!important;box-shadow:none!important;border-color:transparent!important}.sidebar-section .tw-mb-2{margin-bottom:.125rem!important}.sidebar-section .tw-mb-1\\.5{margin-bottom:.1rem!important}.sidebar-section .tw-mt-1{margin-top:0!important}.sidebar-section{padding:2px!important}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;padding:.25rem .5rem}.notification-panel{width:100%;max-width:100%;padding:.375rem}}@media screen and (max-width: 480px){.cide-lyt-sidebar-menu{width:calc(100% - 32px);min-width:unset}.cide-lyt-stack{width:40px;min-width:40px}.sidebar-content{padding:.375rem}.menu-item{padding:.4rem 0;font-size:.8rem;gap:.35rem}.menu-item cide-ele-icon{width:11px!important;height:11px!important;min-width:11px!important;margin-right:.3rem!important}.nav-item{width:32px;height:32px;margin:4px 0}.user-avatar{width:2rem;height:2rem}.notification-panel{padding:.375rem}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-sidebar-menu{max-width:300px}.sidebar-content{padding:.5rem}.nav-item{margin:4px 0}.menu-item{padding:.625rem 0}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: [
|
|
4653
4653
|
trigger('slideInOut', [
|
|
4654
4654
|
state('in', style({
|
|
4655
4655
|
opacity: 1,
|
|
@@ -5575,8 +5575,8 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
5575
5575
|
}
|
|
5576
5576
|
ngOnInit() {
|
|
5577
5577
|
// Initialize the component map (You'd likely populate this from a config or service)
|
|
5578
|
-
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-
|
|
5579
|
-
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-
|
|
5578
|
+
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-m45NE8mK.mjs').then(m => m.CideLytSidedrawerNotesComponent);
|
|
5579
|
+
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CcutSNX1.mjs').then(m => m.CideLytDrawerThemeComponent);
|
|
5580
5580
|
}
|
|
5581
5581
|
async loadComponent(configFor) {
|
|
5582
5582
|
console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
|
|
@@ -5722,7 +5722,7 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
5722
5722
|
}
|
|
5723
5723
|
}
|
|
5724
5724
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSidedrawerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5725
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n <!-- Resizer Divider -->\r\n <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <!-- Main Icon Area -->\r\n <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n <button (click)=\"onItemClick(item)\"\r\n class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n [circle]=\"true\"></cide-ele-skeleton-loader>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n <div #notesContainer class=\"tw-h-full\">\r\n </div>\r\n </div>\r\n </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
|
|
5725
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n <!-- Resizer Divider -->\r\n <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <!-- Main Icon Area -->\r\n <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n <button (click)=\"onItemClick(item)\"\r\n class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-template #loading>\r\n <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n [circle]=\"true\"></cide-ele-skeleton-loader>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n <div #notesContainer class=\"tw-h-full\">\r\n </div>\r\n </div>\r\n </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: var(--cide-theme-shadow-color, rgba(0, 0, 0, .05));transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch}#cide-lyt-sidedrawer-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;background-color:#fff;box-shadow:-2px 0 8px #0000000d;border-left:1px solid #e5e7eb;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative}.sidedrawer-icon{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0;width:100%}.sidedrawer-icon button{min-width:44px;min-height:44px;touch-action:manipulation}@media screen and (max-width: 768px){#cide-lyt-sidedrawer-wrapper{position:fixed;top:0;right:0;bottom:0;width:0;min-width:0;z-index:45;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 16px #00000026}#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:280px;min-width:280px;max-width:85vw;transform:translate(0)}.sidedrawer-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}.sidedrawer-overlay.active{opacity:1;pointer-events:auto}.sidedrawer-icon{gap:.375rem;padding:.375rem 0}.sidedrawer-icon button{width:48px;height:48px;min-width:48px;min-height:48px;padding:.5rem}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.5rem;font-size:.875rem}.cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:260px;min-width:260px;max-width:90vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}.sidedrawer-icon button{width:44px;height:44px;min-width:44px;min-height:44px}.cide-lyt-sidedrawer-wrapper-child-holder{padding:.375rem;font-size:.8125rem}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-sidedrawer-wrapper{min-width:250px}.sidedrawer-icon{gap:.5rem}.sidedrawer-icon button{width:40px;height:40px;min-width:40px;min-height:40px}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-sidedrawer-wrapper.mobile-open,#cide-lyt-sidedrawer-wrapper.expanded{width:300px;max-width:70vw}.sidedrawer-icon{gap:.25rem;padding:.25rem 0}}@media (hover: none) and (pointer: coarse){.sidedrawer-icon button{min-width:48px;min-height:48px}cide-ele-icon:hover{transform:none}.sidedrawer-icon button:active{transform:scale(.95);background-color:#3b82f61a}}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar{width:6px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb{background-color:#4b5563}:root[data-theme=dark] .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover,:root.dark-mode .cide-lyt-sidedrawer-wrapper-child-holder::-webkit-scrollbar-thumb:hover{background-color:#6b7280}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
|
|
5726
5726
|
}
|
|
5727
5727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSidedrawerWrapperComponent, decorators: [{
|
|
5728
5728
|
type: Component,
|
|
@@ -6038,7 +6038,7 @@ class ShortcutsPanelComponent {
|
|
|
6038
6038
|
}
|
|
6039
6039
|
}
|
|
6040
6040
|
</div>
|
|
6041
|
-
`, isInline: true, styles: [":host{display:block}kbd{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }] });
|
|
6041
|
+
`, isInline: true, styles: [":host{display:block}kbd{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }] });
|
|
6042
6042
|
}
|
|
6043
6043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ShortcutsPanelComponent, decorators: [{
|
|
6044
6044
|
type: Component,
|
|
@@ -6323,7 +6323,7 @@ class SettingsContainerComponent {
|
|
|
6323
6323
|
</div>
|
|
6324
6324
|
</div>
|
|
6325
6325
|
</div>
|
|
6326
|
-
`, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: NotificationSettingsComponent, selector: "cide-lyt-notification-settings" }, { kind: "component", type: ShortcutsPanelComponent, selector: "cide-lyt-shortcuts-panel" }] });
|
|
6326
|
+
`, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: NotificationSettingsComponent, selector: "cide-lyt-notification-settings" }, { kind: "component", type: ShortcutsPanelComponent, selector: "cide-lyt-shortcuts-panel" }] });
|
|
6327
6327
|
}
|
|
6328
6328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SettingsContainerComponent, decorators: [{
|
|
6329
6329
|
type: Component,
|
|
@@ -6463,7 +6463,7 @@ class CideLytFooterWrapperComponent {
|
|
|
6463
6463
|
this.floatingContainerService.bringToFront(containerId);
|
|
6464
6464
|
}
|
|
6465
6465
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6466
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>", styles: [".cide-footer{display:flex;align-items:center;justify-content:space-between;width:100%;height:20px;min-height:20px;padding:0 .5rem;background-color:var(--code-lyt-footer-wrapper-background-color, #f9fafb);border-top:1px solid var(--code-lyt-footer-wrapper-border-color, #e5e7eb);-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.cide-lyt-devider-track{width:100%;height:100%;background-color:transparent;cursor:row-resize;transition:background-color .2s ease}.cide-lyt-devider-track:hover{background-color:#3b82f61a}.cide-footer>div:last-child{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.cide-footer cide-ele-icon{transition:all .2s ease;cursor:pointer}.cide-footer cide-ele-icon:hover{transform:scale(1.1)}@media screen and (max-width: 768px){.cide-footer{height:24px;min-height:24px;padding:0 .5rem;font-size:.75rem}.cide-footer cide-ele-icon{font-size:.875rem}.cide-footer>div:last-child{gap:.5rem}.cide-footer .cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){.cide-footer{height:22px;min-height:22px;padding:0 .375rem}.cide-footer cide-ele-icon{font-size:.75rem}.cide-footer>div:last-child{gap:.375rem}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-footer{padding:0 .75rem}}:root[data-theme=dark] .cide-footer,:root.dark-mode .cide-footer{background-color:var(--code-lyt-footer-wrapper-background-color, #1f2937);border-top-color:var(--code-lyt-footer-wrapper-border-color, #374151)}:root[data-theme=dark] .cide-footer cide-ele-icon,:root.dark-mode .cide-footer cide-ele-icon{color:var(--cide-theme-icon-color, #9ca3af)}:root[data-theme=dark] .cide-footer cide-ele-icon:hover,:root.dark-mode .cide-footer cide-ele-icon:hover{color:var(--cide-theme-color-brand-primary, #60a5fa)}@media screen and (max-width: 768px) and (orientation: landscape){.cide-footer{height:20px;min-height:20px}}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
|
|
6466
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>", styles: [".cide-footer{display:flex;align-items:center;justify-content:space-between;width:100%;height:20px;min-height:20px;padding:0 .5rem;background-color:var(--code-lyt-footer-wrapper-background-color, #f9fafb);border-top:1px solid var(--code-lyt-footer-wrapper-border-color, #e5e7eb);-webkit-user-select:none;user-select:none;flex-shrink:0;box-sizing:border-box}.cide-lyt-devider-track{width:100%;height:100%;background-color:transparent;cursor:row-resize;transition:background-color .2s ease}.cide-lyt-devider-track:hover{background-color:#3b82f61a}.cide-footer>div:last-child{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.cide-footer cide-ele-icon{transition:all .2s ease;cursor:pointer}.cide-footer cide-ele-icon:hover{transform:scale(1.1)}@media screen and (max-width: 768px){.cide-footer{height:24px;min-height:24px;padding:0 .5rem;font-size:.75rem}.cide-footer cide-ele-icon{font-size:.875rem}.cide-footer>div:last-child{gap:.5rem}.cide-footer .cide-lyt-devider-track{display:none}}@media screen and (max-width: 480px){.cide-footer{height:22px;min-height:22px;padding:0 .375rem}.cide-footer cide-ele-icon{font-size:.75rem}.cide-footer>div:last-child{gap:.375rem}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-footer{padding:0 .75rem}}:root[data-theme=dark] .cide-footer,:root.dark-mode .cide-footer{background-color:var(--code-lyt-footer-wrapper-background-color, #1f2937);border-top-color:var(--code-lyt-footer-wrapper-border-color, #374151)}:root[data-theme=dark] .cide-footer cide-ele-icon,:root.dark-mode .cide-footer cide-ele-icon{color:var(--cide-theme-icon-color, #9ca3af)}:root[data-theme=dark] .cide-footer cide-ele-icon:hover,:root.dark-mode .cide-footer cide-ele-icon:hover{color:var(--cide-theme-color-brand-primary, #60a5fa)}@media screen and (max-width: 768px) and (orientation: landscape){.cide-footer{height:20px;min-height:20px}}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
|
|
6467
6467
|
}
|
|
6468
6468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
|
|
6469
6469
|
type: Component,
|
|
@@ -6522,7 +6522,7 @@ class CideLytRequestWrapperComponent {
|
|
|
6522
6522
|
}
|
|
6523
6523
|
}
|
|
6524
6524
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytRequestWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytRequestWrapperComponent, isStandalone: true, selector: "cide-lyt-request-wrapper", viewQueries: [{ propertyName: "requestItemElements", predicate: ["requestItemEl"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"requestItems() as requestItems\">\r\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\r\n <div class=\"request-content\">\r\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\r\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [attr.data-tooltip]=\"item.title\">\r\n <span class=\"request-title\">{{ item.title }}</span>\r\n <button class=\"request-action close-action\" \r\n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\r\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \r\n tabindex=\"0\"\r\n data-tooltip=\"Close this tab\">\r\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n <!-- Only add divider between items -->\r\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.request-content{display:flex;align-items:center;height:100%;width:100%;max-width:100%;position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-sizing:border-box}.request-content::-webkit-scrollbar{height:4px}.request-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.request-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:2px;opacity:.7}.request-content::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4);flex-shrink:0;white-space:nowrap;min-width:fit-content}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media screen and (max-width: 768px){.cide-lyt-request{display:none!important;height:22px;padding:0 .5rem;min-height:22px}.request-item{padding:6px 10px;margin:0 3px;border-radius:.25rem;min-height:20px}.request-title{font-size:.65rem;max-width:100px;margin-right:.375rem}.request-action{width:12px;height:12px;min-width:12px;min-height:12px}.request-divider{height:16px;margin:0 2px}.request-content{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-behavior:smooth}.request-item{min-width:80px;touch-action:manipulation}.request-action,.request-add-action{min-width:28px;min-height:28px;touch-action:manipulation}}@media screen and (max-width: 480px){.cide-lyt-request{height:24px;padding:0 .375rem;min-height:24px}.request-item{padding:5px 8px;margin:0 2px;min-width:70px}.request-title{font-size:.6rem;max-width:80px;margin-right:.25rem}.request-action{width:14px;height:14px}.request-divider{height:14px;margin:0 1px}.request-divider{display:none}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-lyt-request{height:21px;padding:0 .625rem}.request-item{padding:7px 11px}.request-title{font-size:.7rem;max-width:110px}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-request{height:20px;min-height:20px}.request-item{padding:5px 9px}.request-title{max-width:90px}}@media (hover: none) and (pointer: coarse){.request-item{min-height:32px;padding:8px 12px}.request-action,.request-add-action{min-width:32px;min-height:32px}.request-item:hover{transform:none}.request-item:active{transform:scale(.98);background-color:#fffffff2}.request-action:active,.request-add-action:active{transform:scale(.95)}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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"] }] });
|
|
6525
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytRequestWrapperComponent, isStandalone: true, selector: "cide-lyt-request-wrapper", viewQueries: [{ propertyName: "requestItemElements", predicate: ["requestItemEl"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"requestItems() as requestItems\">\r\n <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\r\n <div class=\"request-content\">\r\n <ng-container *ngFor=\"let item of requestItems; let i = index\">\r\n <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\r\n [attr.data-tooltip]=\"item.title\">\r\n <span class=\"request-title\">{{ item.title }}</span>\r\n <button class=\"request-action close-action\" \r\n (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\r\n (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \r\n tabindex=\"0\"\r\n data-tooltip=\"Close this tab\">\r\n <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n <!-- Only add divider between items -->\r\n <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.request-content{display:flex;align-items:center;height:100%;width:100%;max-width:100%;position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-sizing:border-box}.request-content::-webkit-scrollbar{height:4px}.request-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.request-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:2px;opacity:.7}.request-content::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4);flex-shrink:0;white-space:nowrap;min-width:fit-content}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media screen and (max-width: 768px){.cide-lyt-request{display:none!important;height:22px;padding:0 .5rem;min-height:22px}.request-item{padding:6px 10px;margin:0 3px;border-radius:.25rem;min-height:20px}.request-title{font-size:.65rem;max-width:100px;margin-right:.375rem}.request-action{width:12px;height:12px;min-width:12px;min-height:12px}.request-divider{height:16px;margin:0 2px}.request-content{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-behavior:smooth}.request-item{min-width:80px;touch-action:manipulation}.request-action,.request-add-action{min-width:28px;min-height:28px;touch-action:manipulation}}@media screen and (max-width: 480px){.cide-lyt-request{height:24px;padding:0 .375rem;min-height:24px}.request-item{padding:5px 8px;margin:0 2px;min-width:70px}.request-title{font-size:.6rem;max-width:80px;margin-right:.25rem}.request-action{width:14px;height:14px}.request-divider{height:14px;margin:0 1px}.request-divider{display:none}}@media screen and (min-width: 769px) and (max-width: 1024px){.cide-lyt-request{height:21px;padding:0 .625rem}.request-item{padding:7px 11px}.request-title{font-size:.7rem;max-width:110px}}@media screen and (max-width: 768px) and (orientation: landscape){.cide-lyt-request{height:20px;min-height:20px}.request-item{padding:5px 9px}.request-title{max-width:90px}}@media (hover: none) and (pointer: coarse){.request-item{min-height:32px;padding:8px 12px}.request-action,.request-add-action{min-width:32px;min-height:32px}.request-item:hover{transform:none}.request-item:active{transform:scale(.98);background-color:#fffffff2}.request-action:active,.request-add-action:active{transform:scale(.95)}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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", "name"] }] });
|
|
6526
6526
|
}
|
|
6527
6527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytRequestWrapperComponent, decorators: [{
|
|
6528
6528
|
type: Component,
|
|
@@ -7313,7 +7313,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
7313
7313
|
},
|
|
7314
7314
|
{
|
|
7315
7315
|
path: "home",
|
|
7316
|
-
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-
|
|
7316
|
+
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-CvgOSRYL.mjs').then(c => c.CideLytHomeWrapperComponent),
|
|
7317
7317
|
canActivate: [authGuard],
|
|
7318
7318
|
data: {
|
|
7319
7319
|
sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
|
|
@@ -7321,7 +7321,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
7321
7321
|
},
|
|
7322
7322
|
{
|
|
7323
7323
|
path: "dashboard-manager",
|
|
7324
|
-
loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-
|
|
7324
|
+
loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-CLZvHVjK.mjs').then(c => c.DashboardManagerComponent),
|
|
7325
7325
|
canActivate: [authGuard],
|
|
7326
7326
|
data: {
|
|
7327
7327
|
sypg_page_code: "cide_lyt_dashboard_manager"
|
|
@@ -7329,7 +7329,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
7329
7329
|
},
|
|
7330
7330
|
{
|
|
7331
7331
|
path: "api-endpoint-manager",
|
|
7332
|
-
loadComponent: () => import('./cloud-ide-layout-api-endpoint-manager.component-
|
|
7332
|
+
loadComponent: () => import('./cloud-ide-layout-api-endpoint-manager.component-Dw1cxsrx.mjs').then(c => c.ApiEndpointManagerComponent),
|
|
7333
7333
|
canActivate: [authGuard],
|
|
7334
7334
|
data: {
|
|
7335
7335
|
sypg_page_code: "cide_lyt_api_endpoint_manager"
|
|
@@ -8656,7 +8656,7 @@ class CideLytFloatingEntityRightsSharingComponent {
|
|
|
8656
8656
|
}
|
|
8657
8657
|
</div>
|
|
8658
8658
|
</div>
|
|
8659
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, CideInputComponent]] });
|
|
8659
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [CideIconComponent], () => [i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, CideInputComponent]] });
|
|
8660
8660
|
}
|
|
8661
8661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytFloatingEntityRightsSharingComponent, decorators: [{
|
|
8662
8662
|
type: Component,
|
|
@@ -9086,7 +9086,7 @@ class CideLytFloatingEntitySelectionComponent {
|
|
|
9086
9086
|
</cide-shared-org-structure>
|
|
9087
9087
|
</div>
|
|
9088
9088
|
</div>
|
|
9089
|
-
`, isInline: true, styles: [".tw-dashed{border-style:dashed}.tw-bg-gray-300{background-color:#d1d5db}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.connection-line-compact{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSharedOrgStructureComponent, selector: "cide-shared-org-structure", inputs: ["allowSwitching", "showActions", "mode"], outputs: ["entityClick", "entitySelect", "entityView"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9089
|
+
`, isInline: true, styles: [".tw-dashed{border-style:dashed}.tw-bg-gray-300{background-color:#d1d5db}.level-0{border-top-color:#3b82f6!important}.level-1{border-top-color:#f59e0b!important}.level-2{border-top-color:#10b981!important}.level-3{border-top-color:#8b5cf6!important}.level-4{border-top-color:#ef4444!important}.level-5{border-top-color:#06b6d4!important}.connection-line-compact{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideSharedOrgStructureComponent, selector: "cide-shared-org-structure", inputs: ["allowSwitching", "showActions", "mode"], outputs: ["entityClick", "entitySelect", "entityView"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9090
9090
|
}
|
|
9091
9091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytFloatingEntitySelectionComponent, decorators: [{
|
|
9092
9092
|
type: Component,
|
|
@@ -9155,4 +9155,4 @@ var floatingEntitySelection_component = /*#__PURE__*/Object.freeze({
|
|
|
9155
9155
|
*/
|
|
9156
9156
|
|
|
9157
9157
|
export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, RightsService as R, CideLytSidebarService as a, CideLytSidedrawerService as b, CideLytThemeService as c, CloudIdeLayoutService as d, CloudIdeLayoutComponent as e, CideLytSharedService as f, ComponentContextService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, CideLytRequestService as j, AppStateService as k, layoutRoutes as l, CideLytUserStatusService as m, CacheManagerService as n, CideLytFileManagerService as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingComponent as q, CideLytFloatingEntityRightsSharingService as r, setCSSVariable as s, themeFactory as t, CideLytFloatingEntitySelectionComponent as u, CideLytFloatingEntitySelectionService as v };
|
|
9158
|
-
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-
|
|
9158
|
+
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BAI-kDhZ.mjs.map
|