cloud-ide-element 1.1.70 → 1.1.71

package/fesm2022/cloud-ide-element.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, ContentChildren, signal, DestroyRef, computed, effect, input, HostListener, ChangeDetectionStrategy, Directive, ElementRef, viewChild } from '@angular/core';
+import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, ContentChildren, signal, DestroyRef, computed, effect, input, HostListener, ChangeDetectionStrategy, Directive, PLATFORM_ID, ElementRef, viewChild } from '@angular/core';
 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';
@@ -8154,6 +8154,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * CIDE Element Library - Theme Service
+ * Independent theme management for the element library
+ * Can be used standalone without parent application theme dependencies
+ */
+class CideThemeService {
+    platformId = inject(PLATFORM_ID);
+    isBrowser;
+    currentTheme$ = new BehaviorSubject('light');
+    effectiveTheme$ = new BehaviorSubject('light');
+    config = {
+        theme: 'light',
+        targetElement: null,
+        persistPreference: true,
+        storageKey: 'cide-theme',
+        useDataAttribute: true,
+        useClassName: true
+    };
+    constructor() {
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        if (this.isBrowser) {
+            this.config.targetElement = document.documentElement;
+        }
+    }
+    /**
+     * Initialize the theme service with configuration
+     * This should be called once in the application, typically in main.ts or app config
+     */
+    initialize(config) {
+        if (!this.isBrowser) {
+            return;
+        }
+        // Merge configuration
+        if (config) {
+            this.config = {
+                ...this.config,
+                ...config,
+                targetElement: config.targetElement || document.documentElement
+            };
+        }
+        // Load saved theme preference
+        const savedTheme = this.loadThemePreference();
+        const initialTheme = savedTheme || this.config.theme;
+        // Apply initial theme
+        this.setTheme(initialTheme);
+        // Listen for system theme changes if theme is set to 'auto'
+        if (initialTheme === 'auto') {
+            this.listenToSystemTheme();
+        }
+    }
+    /**
+     * Set the current theme
+     */
+    setTheme(theme) {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.currentTheme$.next(theme);
+        // Save preference if persistence is enabled
+        if (this.config.persistPreference) {
+            this.saveThemePreference(theme);
+        }
+        // Determine effective theme
+        let effectiveTheme;
+        if (theme === 'auto') {
+            effectiveTheme = this.getSystemTheme();
+            this.listenToSystemTheme();
+        }
+        else {
+            effectiveTheme = theme;
+        }
+        this.effectiveTheme$.next(effectiveTheme);
+        this.applyTheme(effectiveTheme);
+    }
+    /**
+     * Get the current theme preference
+     */
+    getCurrentTheme() {
+        return this.currentTheme$.value;
+    }
+    /**
+     * Get the effective theme (actual theme being displayed)
+     */
+    getEffectiveTheme() {
+        return this.effectiveTheme$.value;
+    }
+    /**
+     * Observable for current theme changes
+     */
+    getCurrentTheme$() {
+        return this.currentTheme$.asObservable();
+    }
+    /**
+     * Observable for effective theme changes
+     */
+    getEffectiveTheme$() {
+        return this.effectiveTheme$.asObservable();
+    }
+    /**
+     * Toggle between light and dark themes
+     */
+    toggleTheme() {
+        const currentEffective = this.effectiveTheme$.value;
+        const newTheme = currentEffective === 'light' ? 'dark' : 'light';
+        this.setTheme(newTheme);
+    }
+    /**
+     * Check if dark mode is currently active
+     */
+    isDarkMode() {
+        return this.effectiveTheme$.value === 'dark';
+    }
+    /**
+     * Apply theme to target element
+     */
+    applyTheme(theme) {
+        if (!this.isBrowser || !this.config.targetElement) {
+            return;
+        }
+        const element = this.config.targetElement;
+        // Apply data-theme attribute
+        if (this.config.useDataAttribute) {
+            element.setAttribute('data-theme', theme);
+        }
+        // Apply class name
+        if (this.config.useClassName) {
+            if (theme === 'dark') {
+                element.classList.add('dark-mode');
+                element.classList.remove('light-mode');
+            }
+            else {
+                element.classList.add('light-mode');
+                element.classList.remove('dark-mode');
+            }
+        }
+        // Also apply to body for better compatibility
+        if (element === document.documentElement && document.body) {
+            if (this.config.useDataAttribute) {
+                document.body.setAttribute('data-theme', theme);
+            }
+            if (this.config.useClassName) {
+                if (theme === 'dark') {
+                    document.body.classList.add('dark-mode');
+                    document.body.classList.remove('light-mode');
+                }
+                else {
+                    document.body.classList.add('light-mode');
+                    document.body.classList.remove('dark-mode');
+                }
+            }
+        }
+    }
+    /**
+     * Get system theme preference
+     */
+    getSystemTheme() {
+        if (!this.isBrowser) {
+            return 'light';
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    }
+    /**
+     * Listen to system theme changes
+     */
+    listenToSystemTheme() {
+        if (!this.isBrowser || !window.matchMedia) {
+            return;
+        }
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handler = (e) => {
+            if (this.currentTheme$.value === 'auto') {
+                const effectiveTheme = e.matches ? 'dark' : 'light';
+                this.effectiveTheme$.next(effectiveTheme);
+                this.applyTheme(effectiveTheme);
+            }
+        };
+        // Modern browsers
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handler);
+        }
+        else if (mediaQuery.addListener) {
+            // Legacy browsers
+            mediaQuery.addListener(handler);
+        }
+    }
+    /**
+     * Save theme preference to localStorage
+     */
+    saveThemePreference(theme) {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            localStorage.setItem(this.config.storageKey, theme);
+        }
+        catch (error) {
+            console.warn('Failed to save theme preference to localStorage:', error);
+        }
+    }
+    /**
+     * Load theme preference from localStorage
+     */
+    loadThemePreference() {
+        if (!this.isBrowser) {
+            return null;
+        }
+        try {
+            const saved = localStorage.getItem(this.config.storageKey);
+            if (saved && ['light', 'dark', 'auto'].includes(saved)) {
+                return saved;
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load theme preference from localStorage:', error);
+        }
+        return null;
+    }
+    /**
+     * Clear saved theme preference
+     */
+    clearThemePreference() {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            localStorage.removeItem(this.config.storageKey);
+        }
+        catch (error) {
+            console.warn('Failed to clear theme preference from localStorage:', error);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Directive to display images from file manager by ID
  * Usage: <img cideEleFileImage [fileId]="yourFileId" [altText]="'Image'" class="your-css-classes" />
@@ -13476,5 +13720,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, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
+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, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map