cloud-ide-layout 1.0.64 → 1.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{cloud-ide-layout-cloud-ide-layout-8S-2Ir2T.mjs → cloud-ide-layout-cloud-ide-layout-B6GmMuGs.mjs} +99 -10
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-B6GmMuGs.mjs.map +1 -0
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-j59G67L1.mjs → cloud-ide-layout-drawer-theme.component-CuGm3ZnU.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-j59G67L1.mjs.map → cloud-ide-layout-drawer-theme.component-CuGm3ZnU.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-Bv5s966h.mjs → cloud-ide-layout-floating-entity-selection.component-Dny7ygEb.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-Bv5s966h.mjs.map → cloud-ide-layout-floating-entity-selection.component-Dny7ygEb.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-home-wrapper.component-CI7dPMxZ.mjs → cloud-ide-layout-home-wrapper.component-BjZwFaSK.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-home-wrapper.component-CI7dPMxZ.mjs.map → cloud-ide-layout-home-wrapper.component-BjZwFaSK.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-Br9LCZ7q.mjs → cloud-ide-layout-sidedrawer-notes.component-DnT1QLA7.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-Br9LCZ7q.mjs.map → cloud-ide-layout-sidedrawer-notes.component-DnT1QLA7.mjs.map} +1 -1
- package/fesm2022/cloud-ide-layout.mjs +1 -1
- package/package.json +1 -1
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-8S-2Ir2T.mjs.map +0 -1
|
@@ -1266,7 +1266,7 @@ class CideLytFloatingEntitySelectionService {
|
|
|
1266
1266
|
}
|
|
1267
1267
|
try {
|
|
1268
1268
|
// Use relative import to avoid circular dependency
|
|
1269
|
-
const module = await import('./cloud-ide-layout-floating-entity-selection.component-
|
|
1269
|
+
const module = await import('./cloud-ide-layout-floating-entity-selection.component-Dny7ygEb.mjs');
|
|
1270
1270
|
if (module.CideLytFloatingEntitySelectionComponent) {
|
|
1271
1271
|
this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
|
|
1272
1272
|
console.log('✅ Entity selection component registered successfully');
|
|
@@ -1350,6 +1350,7 @@ class CideLytHeaderWrapperComponent {
|
|
|
1350
1350
|
financialYearTriggerTemplate;
|
|
1351
1351
|
academicYearTriggerTemplate;
|
|
1352
1352
|
notificationTriggerTemplate;
|
|
1353
|
+
notificationDropdown; // Dropdown component reference
|
|
1353
1354
|
// Inject app state service to get active entity
|
|
1354
1355
|
appStateService = inject(AppStateService);
|
|
1355
1356
|
// Inject floating entity selection service
|
|
@@ -1755,13 +1756,98 @@ class CideLytHeaderWrapperComponent {
|
|
|
1755
1756
|
const hours = Math.floor(minutes / 60);
|
|
1756
1757
|
const days = Math.floor(hours / 24);
|
|
1757
1758
|
if (days > 0)
|
|
1758
|
-
return `${days}
|
|
1759
|
+
return `${days} ${days === 1 ? 'day' : 'days'} ago`;
|
|
1759
1760
|
if (hours > 0)
|
|
1760
|
-
return `${hours}
|
|
1761
|
+
return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
|
|
1761
1762
|
if (minutes > 0)
|
|
1762
|
-
return `${minutes}
|
|
1763
|
+
return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
|
|
1763
1764
|
return 'Just now';
|
|
1764
1765
|
}
|
|
1766
|
+
/**
|
|
1767
|
+
* Get full time string (e.g., "Friday 3:12 PM")
|
|
1768
|
+
*/
|
|
1769
|
+
getFullTime(timestamp) {
|
|
1770
|
+
const date = new Date(timestamp);
|
|
1771
|
+
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
|
1772
|
+
const dayName = days[date.getDay()];
|
|
1773
|
+
const hours = date.getHours();
|
|
1774
|
+
const minutes = date.getMinutes();
|
|
1775
|
+
const ampm = hours >= 12 ? 'PM' : 'AM';
|
|
1776
|
+
const displayHours = hours % 12 || 12;
|
|
1777
|
+
const displayMinutes = minutes.toString().padStart(2, '0');
|
|
1778
|
+
return `${dayName} ${displayHours}:${displayMinutes} ${ampm}`;
|
|
1779
|
+
}
|
|
1780
|
+
/**
|
|
1781
|
+
* Get notification name (from data or title)
|
|
1782
|
+
*/
|
|
1783
|
+
getNotificationName(notification) {
|
|
1784
|
+
if (notification.data?.user_name)
|
|
1785
|
+
return notification.data.user_name;
|
|
1786
|
+
if (notification.data?.name)
|
|
1787
|
+
return notification.data.name;
|
|
1788
|
+
// Extract name from title if format is "Name action..."
|
|
1789
|
+
const titleParts = notification.title.split(' ');
|
|
1790
|
+
if (titleParts.length > 1) {
|
|
1791
|
+
return titleParts[0];
|
|
1792
|
+
}
|
|
1793
|
+
return 'System';
|
|
1794
|
+
}
|
|
1795
|
+
/**
|
|
1796
|
+
* Get notification action text
|
|
1797
|
+
*/
|
|
1798
|
+
getNotificationAction(notification) {
|
|
1799
|
+
const title = notification.title;
|
|
1800
|
+
const name = this.getNotificationName(notification);
|
|
1801
|
+
// Remove the name from title to get action
|
|
1802
|
+
return title.replace(name, '').trim();
|
|
1803
|
+
}
|
|
1804
|
+
/**
|
|
1805
|
+
* Get notification avatar (from data or created_by)
|
|
1806
|
+
*/
|
|
1807
|
+
getNotificationAvatar(notification) {
|
|
1808
|
+
if (notification.data?.user_photo_id_cyfm)
|
|
1809
|
+
return notification.data.user_photo_id_cyfm;
|
|
1810
|
+
if (notification.data?.photo_id)
|
|
1811
|
+
return notification.data.photo_id;
|
|
1812
|
+
// Try to get from created_by if it's a populated object
|
|
1813
|
+
const createdBy = notification.not_id_created_by;
|
|
1814
|
+
if (createdBy && typeof createdBy === 'object' && createdBy.user_photo_id_cyfm) {
|
|
1815
|
+
return createdBy.user_photo_id_cyfm;
|
|
1816
|
+
}
|
|
1817
|
+
return null;
|
|
1818
|
+
}
|
|
1819
|
+
/**
|
|
1820
|
+
* Get file icon based on file type
|
|
1821
|
+
*/
|
|
1822
|
+
getFileIcon(fileType) {
|
|
1823
|
+
if (!fileType)
|
|
1824
|
+
return 'description';
|
|
1825
|
+
const type = fileType.toLowerCase();
|
|
1826
|
+
if (type.includes('pdf'))
|
|
1827
|
+
return 'PDF';
|
|
1828
|
+
if (type.includes('mp4') || type.includes('video'))
|
|
1829
|
+
return 'MP4';
|
|
1830
|
+
if (type.includes('image'))
|
|
1831
|
+
return 'IMG';
|
|
1832
|
+
if (type.includes('word') || type.includes('doc'))
|
|
1833
|
+
return 'DOC';
|
|
1834
|
+
if (type.includes('excel') || type.includes('xls'))
|
|
1835
|
+
return 'XLS';
|
|
1836
|
+
return 'FILE';
|
|
1837
|
+
}
|
|
1838
|
+
/**
|
|
1839
|
+
* Close notification dropdown
|
|
1840
|
+
*/
|
|
1841
|
+
closeNotificationDropdown(event) {
|
|
1842
|
+
event.stopPropagation();
|
|
1843
|
+
// Close the dropdown by toggling it if it's open
|
|
1844
|
+
if (this.notificationDropdown && typeof this.notificationDropdown.toggleDropdown === 'function') {
|
|
1845
|
+
// If dropdown is open, toggle to close it
|
|
1846
|
+
if (this.notificationDropdown.isOpen && this.notificationDropdown.isOpen()) {
|
|
1847
|
+
this.notificationDropdown.toggleDropdown(event);
|
|
1848
|
+
}
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1765
1851
|
/**
|
|
1766
1852
|
* Get notification icon color class
|
|
1767
1853
|
*/
|
|
@@ -2345,12 +2431,12 @@ class CideLytHeaderWrapperComponent {
|
|
|
2345
2431
|
}
|
|
2346
2432
|
}
|
|
2347
2433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n [items]=\"notificationItems\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"notification-dropdown-menu\">\n <!-- Header -->\n <div class=\"notification-dropdown-header\">\n <h3 class=\"notification-dropdown-title\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"notification-unread-badge\">{{ unreadCount() }} unread</span>\n }\n </div>\n\n <!-- Notifications List -->\n <div class=\"notification-dropdown-body\">\n @if (notifications().length === 0) {\n <div class=\"notification-empty-state\">\n <cide-ele-icon class=\"notification-empty-icon\">notifications_off</cide-ele-icon>\n <p class=\"notification-empty-text\">No notifications</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 10); track notif.id) {\n <div \n class=\"notification-item\" \n [class.unread]=\"!isNotificationRead(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <div class=\"notification-item-icon\">\n <cide-ele-icon [class]=\"getNotificationIconColorClass(notif.type)\">\n {{ getNotificationIcon(notif.type) }}\n </cide-ele-icon>\n </div>\n <div class=\"notification-item-content\">\n <div class=\"notification-item-header\">\n <h4 class=\"notification-item-title\">{{ notif.title }}</h4>\n <span class=\"notification-item-time\">{{ getTimeAgo(notif.timestamp) }}</span>\n </div>\n <p class=\"notification-item-message\">{{ notif.message }}</p>\n @if (notif.priority === 'urgent') {\n <span class=\"notification-priority-badge urgent\">Urgent</span>\n }\n </div>\n @if (!isNotificationRead(notif)) {\n <div class=\"notification-unread-indicator\"></div>\n }\n </div>\n }\n }\n </div>\n\n <!-- Footer Actions -->\n @if (notifications().length > 0) {\n <div class=\"notification-dropdown-footer\">\n <div class=\"notification-actions\">\n @if (unreadCount() > 0) {\n <button \n type=\"button\" \n class=\"notification-action-btn\"\n (click)=\"markAllAsRead()\">\n <cide-ele-icon>done_all</cide-ele-icon>\n <span>Mark all read</span>\n </button>\n }\n <button \n type=\"button\" \n class=\"notification-action-btn\"\n (click)=\"clearAllNotifications()\">\n <cide-ele-icon>clear_all</cide-ele-icon>\n <span>Clear all</span>\n </button>\n <button \n type=\"button\" \n class=\"notification-action-btn primary\"\n (click)=\"loadAllNotifications()\">\n <cide-ele-icon>list</cide-ele-icon>\n <span>View all</span>\n </button>\n </div>\n </div>\n }\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.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:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-dropdown-menu{width:100%;max-width:400px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;overflow:hidden;display:flex;flex-direction:column;max-height:600px}.notification-dropdown-header{padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.notification-dropdown-title{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.01em}.notification-unread-badge{background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;border:1px solid rgba(255,255,255,.3)}.notification-dropdown-body{flex:1;overflow-y:auto;max-height:450px;padding:8px 0}.notification-dropdown-body::-webkit-scrollbar{width:6px}.notification-dropdown-body::-webkit-scrollbar-track{background:#f1f1f1}.notification-dropdown-body::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.notification-dropdown-body::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.notification-empty-state{padding:40px 20px;text-align:center;color:#9ca3af}.notification-empty-icon{font-size:3rem!important;color:#d1d5db!important;margin-bottom:12px}.notification-empty-text{margin:0;font-size:.9rem;color:#6b7280}.notification-item{display:flex;align-items:flex-start;padding:12px 20px;cursor:pointer;transition:all .2s ease;border-left:3px solid transparent;position:relative;gap:12px}.notification-item:hover{background:#f9fafb;border-left-color:#3b82f6}.notification-item.unread{background:#eff6ff;border-left-color:#3b82f6}.notification-item.unread:hover{background:#dbeafe}.notification-item-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.notification-item.unread .notification-item-icon{background:#dbeafe}.notification-item-icon cide-ele-icon{font-size:1.25rem!important}.notification-item-content{flex:1;min-width:0}.notification-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}.notification-item-title{margin:0;font-size:.9rem;font-weight:600;color:#111827;line-height:1.4;flex:1}.notification-item-time{font-size:.75rem;color:#6b7280;white-space:nowrap;flex-shrink:0}.notification-item-message{margin:0;font-size:.85rem;color:#4b5563;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.notification-priority-badge{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.notification-priority-badge.urgent{background:#fee2e2;color:#dc2626}.notification-unread-indicator{position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2px #fff}.notification-dropdown-footer{padding:12px 20px;background:#f9fafb;border-top:1px solid #e5e7eb}.notification-actions{display:flex;gap:8px;justify-content:flex-end}.notification-action-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:.8rem;color:#4b5563;cursor:pointer;transition:all .2s ease;font-weight:500}.notification-action-btn:hover{background:#f3f4f6;border-color:#d1d5db;color:#111827}.notification-action-btn.primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.notification-action-btn.primary:hover{background:#2563eb;border-color:#2563eb}.notification-action-btn cide-ele-icon{font-size:1rem!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", "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"] }] });
|
|
2434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: true }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n #notificationDropdown\n [items]=\"notificationItems\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"notification-panel\">\n <!-- Header -->\n <div class=\"notification-panel-header\">\n <div class=\"notification-panel-header-left\">\n <h3 class=\"notification-panel-title\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"notification-panel-unread-count\">{{ unreadCount() }}</span>\n }\n </div>\n <button \n type=\"button\" \n class=\"notification-panel-close\"\n (click)=\"closeNotificationDropdown($event)\">\n <cide-ele-icon>close</cide-ele-icon>\n </button>\n </div>\n\n <!-- Notifications List -->\n <div class=\"notification-panel-body\">\n @if (notifications().length === 0) {\n <div class=\"notification-empty-state\">\n <cide-ele-icon class=\"notification-empty-icon\">notifications_off</cide-ele-icon>\n <p class=\"notification-empty-text\">No notifications</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div \n class=\"notification-panel-item\" \n [class.unread]=\"!isNotificationRead(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Profile Avatar -->\n <div class=\"notification-avatar\">\n @if (getNotificationAvatar(notif)) {\n <img \n cideEleFileImage \n [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\"\n class=\"notification-avatar-img\">\n } @else {\n <div class=\"notification-avatar-placeholder\">\n <cide-ele-icon>{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n </div>\n }\n </div>\n\n <!-- Content -->\n <div class=\"notification-panel-content\">\n <div class=\"notification-panel-text\">\n <span class=\"notification-panel-name\">{{ getNotificationName(notif) }}</span>\n <span class=\"notification-panel-action\">{{ getNotificationAction(notif) }}</span>\n </div>\n <div class=\"notification-panel-time\">\n <span class=\"notification-time-full\">{{ getFullTime(notif.timestamp) }}</span>\n <span class=\"notification-time-ago\">{{ getTimeAgo(notif.timestamp) }}</span>\n </div>\n @if (notif.message && notif.message !== notif.title) {\n <div class=\"notification-panel-message\">\n {{ notif.message }}\n </div>\n }\n @if (notif.data?.comment) {\n <div class=\"notification-comment-bubble\">\n {{ notif.data.comment }}\n </div>\n }\n @if (notif.data?.file) {\n <div class=\"notification-file-preview\">\n <div class=\"notification-file-icon\">{{ getFileIcon(notif.data.file.type) }}</div>\n <div class=\"notification-file-info\">\n <div class=\"notification-file-name\">{{ notif.data.file.name }}</div>\n <div class=\"notification-file-size\">{{ notif.data.file.size }}</div>\n </div>\n <cide-ele-icon class=\"notification-file-download\">download</cide-ele-icon>\n </div>\n }\n @if (notif.action_label) {\n <div class=\"notification-actions-inline\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\" class=\"notification-action-btn-inline decline\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\" class=\"notification-action-btn-inline accept\">Accept</button>\n }\n </div>\n }\n </div>\n\n <!-- Unread Indicator -->\n @if (!isNotificationRead(notif)) {\n <div class=\"notification-panel-unread-dot\"></div>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.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:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-panel{width:100%;max-width:420px;background:#fff;border-radius:0;box-shadow:-2px 0 20px #0000001a;overflow:hidden;display:flex;flex-direction:column;max-height:80vh;border-left:1px solid #e5e7eb}.notification-panel-header{padding:20px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;background:#fff}.notification-panel-header-left{display:flex;align-items:center;gap:12px}.notification-panel-title{margin:0;font-size:1.25rem;font-weight:600;color:#111827;letter-spacing:-.02em}.notification-panel-unread-count{background:#3b82f6;color:#fff;padding:2px 10px;border-radius:12px;font-size:.875rem;font-weight:600;min-width:24px;text-align:center}.notification-panel-close{background:transparent;border:none;padding:4px;cursor:pointer;color:#6b7280;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;width:32px;height:32px}.notification-panel-close:hover{background:#f3f4f6;color:#111827}.notification-panel-close cide-ele-icon{font-size:1.25rem!important}.notification-panel-body{flex:1;overflow-y:auto;padding:0}.notification-panel-body::-webkit-scrollbar{width:8px}.notification-panel-body::-webkit-scrollbar-track{background:#f9fafb}.notification-panel-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.notification-panel-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.notification-empty-state{padding:60px 24px;text-align:center;color:#9ca3af}.notification-empty-icon{font-size:4rem!important;color:#d1d5db!important;margin-bottom:16px}.notification-empty-text{margin:0;font-size:1rem;color:#6b7280;font-weight:500}.notification-panel-item{display:flex;align-items:flex-start;padding:16px 24px;cursor:pointer;transition:all .2s ease;position:relative;gap:16px;border-bottom:1px solid #f3f4f6}.notification-panel-item:hover{background:#f9fafb}.notification-panel-item.unread{background:#f8fafc}.notification-panel-item.unread:hover{background:#f1f5f9}.notification-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#e5e7eb;display:flex;align-items:center;justify-content:center}.notification-avatar-img{width:100%;height:100%;object-fit:cover}.notification-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center}.notification-avatar-placeholder cide-ele-icon{font-size:1.5rem!important;color:#fff!important}.notification-panel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.notification-panel-text{font-size:.9375rem;color:#111827;line-height:1.5}.notification-panel-name{font-weight:600;color:#111827}.notification-panel-action{color:#4b5563;font-weight:400}.notification-panel-time{display:flex;gap:8px;align-items:center;font-size:.8125rem;color:#6b7280}.notification-time-full{font-weight:500}.notification-time-ago{color:#9ca3af}.notification-panel-message{margin-top:4px;font-size:.875rem;color:#4b5563;line-height:1.5}.notification-comment-bubble{margin-top:8px;padding:12px 16px;background:#f3f4f6;border-radius:12px;border-left:3px solid #3b82f6;font-size:.875rem;color:#374151;line-height:1.6;font-style:italic}.notification-file-preview{margin-top:8px;padding:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;display:flex;align-items:center;gap:12px}.notification-file-icon{width:40px;height:40px;background:#e5e7eb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#6b7280;flex-shrink:0}.notification-file-info{flex:1;min-width:0}.notification-file-name{font-size:.875rem;font-weight:500;color:#111827;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-file-size{font-size:.75rem;color:#6b7280}.notification-file-download{color:#6b7280;cursor:pointer;transition:color .2s ease;flex-shrink:0}.notification-file-download:hover{color:#3b82f6}.notification-actions-inline{margin-top:8px;display:flex;gap:8px}.notification-action-btn-inline{padding:6px 16px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.notification-action-btn-inline.decline{color:#6b7280}.notification-action-btn-inline.decline:hover{background:#f3f4f6;border-color:#d1d5db}.notification-action-btn-inline.accept{background:#3b82f6;color:#fff;border-color:#3b82f6}.notification-action-btn-inline.accept:hover{background:#2563eb;border-color:#2563eb}.notification-panel-unread-dot{position:absolute;top:20px;right:24px;width:10px;height:10px;border-radius:50%;background:#3b82f6;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
2349
2435
|
}
|
|
2350
2436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
|
|
2351
2437
|
type: Component,
|
|
2352
2438
|
args: [{ selector: 'cide-lyt-header-wrapper', imports: [CideInputComponent, CommonModule, CideIconComponent,
|
|
2353
|
-
CideEleDropdownComponent, CideEleFileImageDirective], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n [items]=\"notificationItems\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"notification-dropdown-menu\">\n <!-- Header -->\n <div class=\"notification-dropdown-header\">\n <h3 class=\"notification-dropdown-title\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"notification-unread-badge\">{{ unreadCount() }} unread</span>\n }\n </div>\n\n <!-- Notifications List -->\n <div class=\"notification-dropdown-body\">\n @if (notifications().length === 0) {\n <div class=\"notification-empty-state\">\n <cide-ele-icon class=\"notification-empty-icon\">notifications_off</cide-ele-icon>\n <p class=\"notification-empty-text\">No notifications</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 10); track notif.id) {\n <div \n class=\"notification-item\" \n [class.unread]=\"!isNotificationRead(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <div class=\"notification-item-icon\">\n <cide-ele-icon [class]=\"getNotificationIconColorClass(notif.type)\">\n {{ getNotificationIcon(notif.type) }}\n </cide-ele-icon>\n </div>\n <div class=\"notification-item-content\">\n <div class=\"notification-item-header\">\n <h4 class=\"notification-item-title\">{{ notif.title }}</h4>\n <span class=\"notification-item-time\">{{ getTimeAgo(notif.timestamp) }}</span>\n </div>\n <p class=\"notification-item-message\">{{ notif.message }}</p>\n @if (notif.priority === 'urgent') {\n <span class=\"notification-priority-badge urgent\">Urgent</span>\n }\n </div>\n @if (!isNotificationRead(notif)) {\n <div class=\"notification-unread-indicator\"></div>\n }\n </div>\n }\n }\n </div>\n\n <!-- Footer Actions -->\n @if (notifications().length > 0) {\n <div class=\"notification-dropdown-footer\">\n <div class=\"notification-actions\">\n @if (unreadCount() > 0) {\n <button \n type=\"button\" \n class=\"notification-action-btn\"\n (click)=\"markAllAsRead()\">\n <cide-ele-icon>done_all</cide-ele-icon>\n <span>Mark all read</span>\n </button>\n }\n <button \n type=\"button\" \n class=\"notification-action-btn\"\n (click)=\"clearAllNotifications()\">\n <cide-ele-icon>clear_all</cide-ele-icon>\n <span>Clear all</span>\n </button>\n <button \n type=\"button\" \n class=\"notification-action-btn primary\"\n (click)=\"loadAllNotifications()\">\n <cide-ele-icon>list</cide-ele-icon>\n <span>View all</span>\n </button>\n </div>\n </div>\n }\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.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:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-dropdown-menu{width:100%;max-width:400px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;overflow:hidden;display:flex;flex-direction:column;max-height:600px}.notification-dropdown-header{padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.notification-dropdown-title{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.01em}.notification-unread-badge{background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;border:1px solid rgba(255,255,255,.3)}.notification-dropdown-body{flex:1;overflow-y:auto;max-height:450px;padding:8px 0}.notification-dropdown-body::-webkit-scrollbar{width:6px}.notification-dropdown-body::-webkit-scrollbar-track{background:#f1f1f1}.notification-dropdown-body::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.notification-dropdown-body::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.notification-empty-state{padding:40px 20px;text-align:center;color:#9ca3af}.notification-empty-icon{font-size:3rem!important;color:#d1d5db!important;margin-bottom:12px}.notification-empty-text{margin:0;font-size:.9rem;color:#6b7280}.notification-item{display:flex;align-items:flex-start;padding:12px 20px;cursor:pointer;transition:all .2s ease;border-left:3px solid transparent;position:relative;gap:12px}.notification-item:hover{background:#f9fafb;border-left-color:#3b82f6}.notification-item.unread{background:#eff6ff;border-left-color:#3b82f6}.notification-item.unread:hover{background:#dbeafe}.notification-item-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.notification-item.unread .notification-item-icon{background:#dbeafe}.notification-item-icon cide-ele-icon{font-size:1.25rem!important}.notification-item-content{flex:1;min-width:0}.notification-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}.notification-item-title{margin:0;font-size:.9rem;font-weight:600;color:#111827;line-height:1.4;flex:1}.notification-item-time{font-size:.75rem;color:#6b7280;white-space:nowrap;flex-shrink:0}.notification-item-message{margin:0;font-size:.85rem;color:#4b5563;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.notification-priority-badge{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.notification-priority-badge.urgent{background:#fee2e2;color:#dc2626}.notification-unread-indicator{position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2px #fff}.notification-dropdown-footer{padding:12px 20px;background:#f9fafb;border-top:1px solid #e5e7eb}.notification-actions{display:flex;gap:8px;justify-content:flex-end}.notification-action-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:.8rem;color:#4b5563;cursor:pointer;transition:all .2s ease;font-weight:500}.notification-action-btn:hover{background:#f3f4f6;border-color:#d1d5db;color:#111827}.notification-action-btn.primary{background:#3b82f6;color:#fff;border-color:#3b82f6}.notification-action-btn.primary:hover{background:#2563eb;border-color:#2563eb}.notification-action-btn cide-ele-icon{font-size:1rem!important}\n"] }]
|
|
2439
|
+
CideEleDropdownComponent, CideEleFileImageDirective], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n <!-- Logo Section -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm || '')\"\n [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n } @else {\n <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n }\n\n </div>\n @if (appStateService.activeEntity()?.syen_name) {\n <span\n class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n {{ appStateService.activeEntity()?.syen_name }}\n </span>\n }\n </div>\n <!-- Search Section -->\n <div class=\"header-search-container\">\n <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n size=\"md\"></cide-ele-input>\n </div>\n\n <!-- Icons Section -->\n <div class=\"header-icons-container\">\n <!-- Financial Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n [triggerTemplate]=\"financialYearTriggerTemplate\"\n (itemClick)=\"onFinancialYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Financial Year</div>\n </div>\n \n <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Academic Year Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n [triggerTemplate]=\"academicYearTriggerTemplate\"\n (itemClick)=\"onAcademicYearClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Academic Year</div>\n </div>\n \n <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-year-pill\">\n <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n </div>\n </ng-template>\n\n <!-- Notifications Dropdown -->\n <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown \n #notificationDropdown\n [items]=\"notificationItems\" \n [config]=\"notificationConfig\"\n [triggerTemplate]=\"notificationTriggerTemplate\"\n [menuTemplate]=\"notificationMenuTemplate\"\n (itemClick)=\"onNotificationClick($event)\">\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">Notifications</div>\n </div>\n \n <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n <cide-ele-icon>notifications</cide-ele-icon>\n @if (unreadCount() > 0) {\n <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n }\n </div>\n </ng-template>\n\n <!-- Custom Notification Menu Template -->\n <ng-template #notificationMenuTemplate let-items=\"items\">\n <div class=\"notification-panel\">\n <!-- Header -->\n <div class=\"notification-panel-header\">\n <div class=\"notification-panel-header-left\">\n <h3 class=\"notification-panel-title\">Notifications</h3>\n @if (unreadCount() > 0) {\n <span class=\"notification-panel-unread-count\">{{ unreadCount() }}</span>\n }\n </div>\n <button \n type=\"button\" \n class=\"notification-panel-close\"\n (click)=\"closeNotificationDropdown($event)\">\n <cide-ele-icon>close</cide-ele-icon>\n </button>\n </div>\n\n <!-- Notifications List -->\n <div class=\"notification-panel-body\">\n @if (notifications().length === 0) {\n <div class=\"notification-empty-state\">\n <cide-ele-icon class=\"notification-empty-icon\">notifications_off</cide-ele-icon>\n <p class=\"notification-empty-text\">No notifications</p>\n </div>\n } @else {\n @for (notif of notifications().slice(0, 15); track notif.id) {\n <div \n class=\"notification-panel-item\" \n [class.unread]=\"!isNotificationRead(notif)\"\n (click)=\"onNotificationItemClick(notif)\">\n <!-- Profile Avatar -->\n <div class=\"notification-avatar\">\n @if (getNotificationAvatar(notif)) {\n <img \n cideEleFileImage \n [fileId]=\"getNotificationAvatar(notif) || ''\"\n [altText]=\"getNotificationName(notif)\"\n class=\"notification-avatar-img\">\n } @else {\n <div class=\"notification-avatar-placeholder\">\n <cide-ele-icon>{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n </div>\n }\n </div>\n\n <!-- Content -->\n <div class=\"notification-panel-content\">\n <div class=\"notification-panel-text\">\n <span class=\"notification-panel-name\">{{ getNotificationName(notif) }}</span>\n <span class=\"notification-panel-action\">{{ getNotificationAction(notif) }}</span>\n </div>\n <div class=\"notification-panel-time\">\n <span class=\"notification-time-full\">{{ getFullTime(notif.timestamp) }}</span>\n <span class=\"notification-time-ago\">{{ getTimeAgo(notif.timestamp) }}</span>\n </div>\n @if (notif.message && notif.message !== notif.title) {\n <div class=\"notification-panel-message\">\n {{ notif.message }}\n </div>\n }\n @if (notif.data?.comment) {\n <div class=\"notification-comment-bubble\">\n {{ notif.data.comment }}\n </div>\n }\n @if (notif.data?.file) {\n <div class=\"notification-file-preview\">\n <div class=\"notification-file-icon\">{{ getFileIcon(notif.data.file.type) }}</div>\n <div class=\"notification-file-info\">\n <div class=\"notification-file-name\">{{ notif.data.file.name }}</div>\n <div class=\"notification-file-size\">{{ notif.data.file.size }}</div>\n </div>\n <cide-ele-icon class=\"notification-file-download\">download</cide-ele-icon>\n </div>\n }\n @if (notif.action_label) {\n <div class=\"notification-actions-inline\">\n @if (notif.action_label.toLowerCase().includes('decline')) {\n <button type=\"button\" class=\"notification-action-btn-inline decline\">Decline</button>\n }\n @if (notif.action_label.toLowerCase().includes('accept')) {\n <button type=\"button\" class=\"notification-action-btn-inline accept\">Accept</button>\n }\n </div>\n }\n </div>\n\n <!-- Unread Indicator -->\n @if (!isNotificationRead(notif)) {\n <div class=\"notification-panel-unread-dot\"></div>\n }\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n\n <div class=\"header-divider\"></div>\n\n <!-- Profile with Dropdown -->\n <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n [triggerTemplate]=\"triggerTemplate\"\n (itemClick)=\"onProfileClick($event)\">\n <ng-template #triggerTemplate>\n @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n <div class=\"profile-avatar\">\n <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n </div>\n } @else {\n <div class=\"profile-avatar\">\n <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n </div>\n }\n </ng-template>\n </cide-ele-dropdown>\n <div class=\"header-tooltip\">My Account</div>\n </div>\n </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.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:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-panel{width:100%;max-width:420px;background:#fff;border-radius:0;box-shadow:-2px 0 20px #0000001a;overflow:hidden;display:flex;flex-direction:column;max-height:80vh;border-left:1px solid #e5e7eb}.notification-panel-header{padding:20px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;background:#fff}.notification-panel-header-left{display:flex;align-items:center;gap:12px}.notification-panel-title{margin:0;font-size:1.25rem;font-weight:600;color:#111827;letter-spacing:-.02em}.notification-panel-unread-count{background:#3b82f6;color:#fff;padding:2px 10px;border-radius:12px;font-size:.875rem;font-weight:600;min-width:24px;text-align:center}.notification-panel-close{background:transparent;border:none;padding:4px;cursor:pointer;color:#6b7280;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;width:32px;height:32px}.notification-panel-close:hover{background:#f3f4f6;color:#111827}.notification-panel-close cide-ele-icon{font-size:1.25rem!important}.notification-panel-body{flex:1;overflow-y:auto;padding:0}.notification-panel-body::-webkit-scrollbar{width:8px}.notification-panel-body::-webkit-scrollbar-track{background:#f9fafb}.notification-panel-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.notification-panel-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.notification-empty-state{padding:60px 24px;text-align:center;color:#9ca3af}.notification-empty-icon{font-size:4rem!important;color:#d1d5db!important;margin-bottom:16px}.notification-empty-text{margin:0;font-size:1rem;color:#6b7280;font-weight:500}.notification-panel-item{display:flex;align-items:flex-start;padding:16px 24px;cursor:pointer;transition:all .2s ease;position:relative;gap:16px;border-bottom:1px solid #f3f4f6}.notification-panel-item:hover{background:#f9fafb}.notification-panel-item.unread{background:#f8fafc}.notification-panel-item.unread:hover{background:#f1f5f9}.notification-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#e5e7eb;display:flex;align-items:center;justify-content:center}.notification-avatar-img{width:100%;height:100%;object-fit:cover}.notification-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center}.notification-avatar-placeholder cide-ele-icon{font-size:1.5rem!important;color:#fff!important}.notification-panel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.notification-panel-text{font-size:.9375rem;color:#111827;line-height:1.5}.notification-panel-name{font-weight:600;color:#111827}.notification-panel-action{color:#4b5563;font-weight:400}.notification-panel-time{display:flex;gap:8px;align-items:center;font-size:.8125rem;color:#6b7280}.notification-time-full{font-weight:500}.notification-time-ago{color:#9ca3af}.notification-panel-message{margin-top:4px;font-size:.875rem;color:#4b5563;line-height:1.5}.notification-comment-bubble{margin-top:8px;padding:12px 16px;background:#f3f4f6;border-radius:12px;border-left:3px solid #3b82f6;font-size:.875rem;color:#374151;line-height:1.6;font-style:italic}.notification-file-preview{margin-top:8px;padding:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;display:flex;align-items:center;gap:12px}.notification-file-icon{width:40px;height:40px;background:#e5e7eb;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#6b7280;flex-shrink:0}.notification-file-info{flex:1;min-width:0}.notification-file-name{font-size:.875rem;font-weight:500;color:#111827;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-file-size{font-size:.75rem;color:#6b7280}.notification-file-download{color:#6b7280;cursor:pointer;transition:color .2s ease;flex-shrink:0}.notification-file-download:hover{color:#3b82f6}.notification-actions-inline{margin-top:8px;display:flex;gap:8px}.notification-action-btn-inline{padding:6px 16px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.notification-action-btn-inline.decline{color:#6b7280}.notification-action-btn-inline.decline:hover{background:#f3f4f6;border-color:#d1d5db}.notification-action-btn-inline.accept{background:#3b82f6;color:#fff;border-color:#3b82f6}.notification-action-btn-inline.accept:hover{background:#2563eb;border-color:#2563eb}.notification-panel-unread-dot{position:absolute;top:20px;right:24px;width:10px;height:10px;border-radius:50%;background:#3b82f6;flex-shrink:0}\n"] }]
|
|
2354
2440
|
}], ctorParameters: () => [], propDecorators: { triggerTemplate: [{
|
|
2355
2441
|
type: ViewChild,
|
|
2356
2442
|
args: ['triggerTemplate']
|
|
@@ -2363,6 +2449,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
2363
2449
|
}], notificationTriggerTemplate: [{
|
|
2364
2450
|
type: ViewChild,
|
|
2365
2451
|
args: ['notificationTriggerTemplate']
|
|
2452
|
+
}], notificationDropdown: [{
|
|
2453
|
+
type: ViewChild,
|
|
2454
|
+
args: ['notificationDropdown']
|
|
2366
2455
|
}] } });
|
|
2367
2456
|
|
|
2368
2457
|
class CideLytUserStatusService {
|
|
@@ -3565,8 +3654,8 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
3565
3654
|
}
|
|
3566
3655
|
ngOnInit() {
|
|
3567
3656
|
// Initialize the component map (You'd likely populate this from a config or service)
|
|
3568
|
-
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-
|
|
3569
|
-
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-
|
|
3657
|
+
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-DnT1QLA7.mjs').then(m => m.CideLytSidedrawerNotesComponent);
|
|
3658
|
+
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CuGm3ZnU.mjs').then(m => m.CideLytDrawerThemeComponent);
|
|
3570
3659
|
}
|
|
3571
3660
|
async loadComponent(configFor) {
|
|
3572
3661
|
console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
|
|
@@ -4089,7 +4178,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
4089
4178
|
},
|
|
4090
4179
|
{
|
|
4091
4180
|
path: "home",
|
|
4092
|
-
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-
|
|
4181
|
+
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-BjZwFaSK.mjs').then(c => c.CideLytHomeWrapperComponent),
|
|
4093
4182
|
canActivate: [authGuard],
|
|
4094
4183
|
data: {
|
|
4095
4184
|
reuseTab: true, // For CustomRouteReuseStrategy
|
|
@@ -5657,4 +5746,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
|
|
|
5657
5746
|
*/
|
|
5658
5747
|
|
|
5659
5748
|
export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
|
|
5660
|
-
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-
|
|
5749
|
+
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-B6GmMuGs.mjs.map
|