cloud-ide-element 1.1.26 → 1.1.28

package/fesm2022/cloud-ide-element.mjs

@@ -6,10 +6,11 @@ import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, Observable, retry, catchError, finalize, throwError, map, of } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
-import { HttpClient, HttpEventType, HttpRequest } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpParams, HttpRequest } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { generateStringFromObject, coreRoutesUrl, cidePath, hostManagerRoutesUrl } from 'cloud-ide-lms-model';
+import { generateStringFromObject, coreRoutesUrl, cidePath as cidePath$1, hostManagerRoutesUrl as hostManagerRoutesUrl$1 } from 'cloud-ide-lms-model';
 import * as i2$1 from '@angular/router';
+import { io } from 'socket.io-client';
 import { tap, catchError as catchError$1 } from 'rxjs/operators';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 
@@ -300,40 +301,42 @@ class PortalService {
         let top;
         let position = 'bottom'; // Default to bottom
         // Determine if we should open above or below
+        // Note: Using fixed positioning, so positions are relative to viewport (no scroll offset needed)
         if (config.position === 'auto' || !config.position) {
             // Auto-detect: prefer bottom, but use top if not enough space below
             if (spaceBelow < estimatedHeight && spaceAbove > estimatedHeight) {
                 position = 'top';
-                top = rect.top + window.scrollY - estimatedHeight - offsetY;
+                top = rect.top - estimatedHeight - offsetY;
             }
             else {
                 position = 'bottom';
-                top = rect.bottom + window.scrollY + offsetY;
+                top = rect.bottom + offsetY;
             }
         }
         else if (config.position === 'top') {
             position = 'top';
-            top = rect.top + window.scrollY - estimatedHeight - offsetY;
+            top = rect.top - estimatedHeight - offsetY;
         }
         else {
             position = 'bottom';
-            top = rect.bottom + window.scrollY + offsetY;
+            top = rect.bottom + offsetY;
         }
-        let left = rect.left + window.scrollX + offsetX;
+        let left = rect.left + offsetX;
         // Auto-detect horizontal alignment
+        // Note: Using fixed positioning, so positions are relative to viewport (no scroll offset needed)
         if (config.align === 'auto' || !config.align) {
             const spaceRight = viewport.width - rect.left;
             const spaceLeft = rect.right;
             if (spaceRight < estimatedWidth && spaceLeft > estimatedWidth) {
                 // Align to right edge of trigger
-                left = rect.right + window.scrollX - estimatedWidth;
+                left = rect.right - estimatedWidth;
             }
         }
         else if (config.align === 'right') {
-            left = rect.right + window.scrollX - estimatedWidth;
+            left = rect.right - estimatedWidth;
         }
         else if (config.align === 'center') {
-            left = rect.left + window.scrollX + (rect.width / 2) - (estimatedWidth / 2);
+            left = rect.left + (rect.width / 2) - (estimatedWidth / 2);
         }
         return {
             top,
@@ -352,11 +355,12 @@ class PortalService {
         let adjustedLeft = parseInt(portal.style.left);
         let adjustedTop = parseInt(portal.style.top);
         // Adjust horizontal position if portal goes outside viewport
+        // Note: Using fixed positioning, so positions are relative to viewport (no scroll offset needed)
         if (portalRect.right > viewport.width) {
-            adjustedLeft = triggerRect.right + window.scrollX - portalRect.width;
+            adjustedLeft = triggerRect.right - portalRect.width;
         }
         if (portalRect.left < 0) {
-            adjustedLeft = window.scrollX + 4; // Small margin from edge
+            adjustedLeft = 4; // Small margin from edge
         }
         // Smart vertical adjustment - flip to opposite side if needed
         const spaceBelow = viewport.height - triggerRect.bottom;
@@ -364,19 +368,19 @@ class PortalService {
         const portalHeight = portalRect.height;
         // If portal goes below viewport and there's more space above, flip to top
         if (portalRect.bottom > viewport.height && spaceAbove > portalHeight) {
-            adjustedTop = triggerRect.top + window.scrollY - portalHeight - 4;
+            adjustedTop = triggerRect.top - portalHeight - 4;
         }
         // If portal goes above viewport and there's more space below, flip to bottom
         else if (portalRect.top < 0 && spaceBelow > portalHeight) {
-            adjustedTop = triggerRect.bottom + window.scrollY + 4;
+            adjustedTop = triggerRect.bottom + 4;
         }
         // If still outside viewport, adjust to fit within bounds
         else {
             if (portalRect.bottom > viewport.height) {
-                adjustedTop = viewport.height + window.scrollY - portalHeight - 4;
+                adjustedTop = viewport.height - portalHeight - 4;
             }
             if (portalRect.top < 0) {
-                adjustedTop = window.scrollY + 4; // Small margin from top
+                adjustedTop = 4; // Small margin from top
             }
         }
         portal.style.left = `${adjustedLeft}px`;
@@ -6883,6 +6887,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: ['mousedown', ['$event']]
             }] } });
 
+/**
+ * Path Helper Utility
+ * Cloned from cloud-ide-lms-model to avoid dependencies
+ */
+const cidePath = {
+    join: (path) => {
+        return path.join("/");
+    }
+};
+
+/**
+ * Host Manager Routes
+ * Cloned from cloud-ide-lms-model to avoid dependencies
+ *
+ * Base path for host name to interceptor and replace with actual URL
+ * for more details refer https://docs.google.com/document/d/1CwB4evLsQuatG4jI0U1faRtmqtNmIfZOE4fDWiz9-sQ/edit?pli=1#bookmark=id.j3vzaryhajl1
+ * __version__ need to add in future
+ */
+const hostManagerRoutesUrl = {
+    cideSuiteHost: "__cloud_ide_suite_layout__"
+};
+Object.freeze(hostManagerRoutesUrl);
+
 /**
  * Advanced Angular button component that provides a comprehensive button implementation
  * with loading state, styling variants, animations, tooltips, and other features.
@@ -7131,6 +7158,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
+/**
+ * Notification API Service
+ * HTTP client for notification API endpoints
+ */
+class NotificationApiService {
+    http = inject(HttpClient);
+    apiUrl = cidePath.join([
+        hostManagerRoutesUrl.cideSuiteHost,
+        'api',
+        'notifications'
+    ]);
+    /**
+     * Get user notifications
+     */
+    getNotifications(params) {
+        let httpParams = new HttpParams();
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                if (value !== undefined && value !== null) {
+                    httpParams = httpParams.set(key, value.toString());
+                }
+            });
+        }
+        return this.http.get(this.apiUrl, { params: httpParams });
+    }
+    /**
+     * Get notification by ID
+     */
+    getNotificationById(id) {
+        return this.http.get(`${this.apiUrl}/${id}`);
+    }
+    /**
+     * Get unread count
+     */
+    getUnreadCount() {
+        return this.http.get(`${this.apiUrl}/unread-count`);
+    }
+    /**
+     * Create notification
+     */
+    createNotification(payload) {
+        return this.http.post(this.apiUrl, payload);
+    }
+    /**
+     * Mark notification as read
+     */
+    markAsRead(id) {
+        return this.http.put(`${this.apiUrl}/${id}/read`, {});
+    }
+    /**
+     * Mark all notifications as read
+     */
+    markAllAsRead() {
+        return this.http.put(`${this.apiUrl}/read-all`, {});
+    }
+    /**
+     * Archive notification
+     */
+    archiveNotification(id) {
+        return this.http.put(`${this.apiUrl}/${id}/archive`, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * WebSocket Notification Service
+ * Socket.IO client for real-time notifications
+ */
+class WebSocketNotificationService {
+    socket = null;
+    notificationSubject = new Subject();
+    connectionStatusSubject = new BehaviorSubject({
+        connected: false
+    });
+    // Signals for reactive state
+    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    unreadNotifications = signal([], ...(ngDevMode ? [{ debugName: "unreadNotifications" }] : []));
+    // Public observables
+    notification$ = this.notificationSubject.asObservable();
+    connectionStatus$ = this.connectionStatusSubject.asObservable();
+    // Computed signals
+    allNotifications = computed(() => this.notifications(), ...(ngDevMode ? [{ debugName: "allNotifications" }] : []));
+    unreadNotificationsCount = computed(() => this.unreadNotifications().length, ...(ngDevMode ? [{ debugName: "unreadNotificationsCount" }] : []));
+    isConnected = computed(() => this.connectionStatusSubject.value.connected, ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
+    /**
+     * Connect to Socket.IO server
+     */
+    connect(token, userId) {
+        if (this.socket?.connected) {
+            console.log('Socket already connected');
+            return;
+        }
+        // Get API URL from host manager (same pattern as other services)
+        const apiUrl = hostManagerRoutesUrl.cideSuiteHost || 'http://localhost:3000';
+        this.socket = io(apiUrl, {
+            path: '/notifications-socket',
+            transports: ['websocket', 'polling'],
+            auth: {
+                token: token
+            },
+            reconnection: true,
+            reconnectionDelay: 1000,
+            reconnectionAttempts: 5,
+            reconnectionDelayMax: 5000
+        });
+        this.setupEventHandlers(userId);
+    }
+    /**
+     * Setup Socket.IO event handlers
+     */
+    setupEventHandlers(userId) {
+        if (!this.socket)
+            return;
+        // Connection established
+        this.socket.on('connect', () => {
+            console.log('Socket.IO connected:', this.socket?.id);
+            this.connectionStatusSubject.next({
+                connected: true,
+                socketId: this.socket?.id,
+                userId: userId,
+                timestamp: new Date()
+            });
+        });
+        // Connection confirmation
+        this.socket.on('connected', (data) => {
+            console.log('Notification service connected:', data);
+            this.connectionStatusSubject.next({
+                connected: true,
+                socketId: data.socketId,
+                userId: data.userId,
+                timestamp: data.timestamp
+            });
+        });
+        // Receive notification
+        this.socket.on('notification', (notification) => {
+            console.log('Received notification:', notification);
+            // Add to notifications list
+            this.notifications.update(notifications => [notification, ...notifications]);
+            // Add to unread list
+            this.unreadNotifications.update(unread => [notification, ...unread]);
+            // Emit to subscribers
+            this.notificationSubject.next(notification);
+            // Acknowledge receipt
+            this.acknowledgeNotification(notification.id);
+        });
+        // Disconnect
+        this.socket.on('disconnect', (reason) => {
+            console.log('Socket.IO disconnected:', reason);
+            this.connectionStatusSubject.next({
+                connected: false,
+                timestamp: new Date()
+            });
+        });
+        // Connection error
+        this.socket.on('connect_error', (error) => {
+            console.error('Socket.IO connection error:', error);
+            this.connectionStatusSubject.next({
+                connected: false,
+                timestamp: new Date()
+            });
+        });
+    }
+    /**
+     * Acknowledge notification receipt
+     */
+    acknowledgeNotification(notificationId) {
+        if (this.socket?.connected) {
+            this.socket.emit('notification:ack', { notificationId });
+        }
+    }
+    /**
+     * Mark notification as read
+     */
+    markAsRead(notificationId) {
+        if (this.socket?.connected) {
+            this.socket.emit('notification:read', { notificationId });
+            // Remove from unread list
+            this.unreadNotifications.update(unread => unread.filter(n => n.id !== notificationId));
+        }
+    }
+    /**
+     * Mark all as read
+     */
+    markAllAsRead() {
+        const unreadIds = this.unreadNotifications().map(n => n.id);
+        unreadIds.forEach(id => this.markAsRead(id));
+    }
+    /**
+     * Disconnect from server
+     */
+    disconnect() {
+        if (this.socket) {
+            this.socket.disconnect();
+            this.socket = null;
+            this.connectionStatusSubject.next({
+                connected: false,
+                timestamp: new Date()
+            });
+        }
+    }
+    /**
+     * Clear all notifications
+     */
+    clearNotifications() {
+        this.notifications.set([]);
+        this.unreadNotifications.set([]);
+    }
+    /**
+     * Remove notification from list
+     */
+    removeNotification(notificationId) {
+        this.notifications.update(notifications => notifications.filter(n => n.id !== notificationId));
+        this.unreadNotifications.update(unread => unread.filter(n => n.id !== notificationId));
+    }
+    ngOnDestroy() {
+        this.disconnect();
+        this.notificationSubject.complete();
+        this.connectionStatusSubject.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: WebSocketNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class CideCoreFileManagerService {
     http;
     apiUrl = `${coreRoutesUrl?.fileManager}`;
@@ -7145,7 +7409,7 @@ class CideCoreFileManagerService {
      */
     getFileList(body) {
         const query = generateStringFromObject(body);
-        return this.http?.get(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]))
+        return this.http?.get(cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]))
             .pipe(tap((response) => {
             if (response?.success) {
                 this.fileListSubject.next(response?.data || []);
@@ -7178,7 +7442,7 @@ class CideCoreFileManagerService {
         formData.append('tags', JSON.stringify(request.tags || []));
         formData.append('permissions', JSON.stringify(request.permissions || []));
         formData.append('userId', request.userId || '');
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'upload']);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'upload']);
         const req = new HttpRequest('POST', url, formData, {
             reportProgress: true
         });
@@ -7196,7 +7460,7 @@ class CideCoreFileManagerService {
      */
     updateFile(request) {
         console.log('Updating file:', request);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager]);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager]);
         return this.http.post(url, request)
             .pipe(tap((response) => {
             if (response.success) {
@@ -7210,7 +7474,7 @@ class CideCoreFileManagerService {
     deleteFile(id) {
         const payload = { cyfm_id: id };
         const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
         return this.http.delete(url)
             .pipe(tap((response) => {
             if (response.success) {
@@ -7225,7 +7489,7 @@ class CideCoreFileManagerService {
         console.log('Deleting multiple files:', ids);
         const payload = { ids };
         const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
         return this.http.delete(url)
             .pipe(tap((response) => {
             if (response.success) {
@@ -7240,7 +7504,7 @@ class CideCoreFileManagerService {
         console.log('Toggling file status:', id);
         const payload = { id };
         const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, query]);
         return this.http.put(url, {})
             .pipe(tap((response) => {
             if (response.success) {
@@ -7255,7 +7519,7 @@ class CideCoreFileManagerService {
         console.log('Getting file by ID:', id);
         const payload = { cyfm_id: id };
         const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'byId', query]);
+        const url = cidePath$1?.join([hostManagerRoutesUrl$1?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.fileManager, 'byId', query]);
         return this.http.get(url)
             .pipe(catchError$1(this.handleError));
     }
@@ -13119,5 +13383,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, PortalService, TooltipDirective };
+export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map