@propbinder/mobile-design 0.0.2 → 0.0.21

package/src/services/whitelabel.service.ts

@@ -1,171 +0,0 @@
-import { Injectable, signal, effect } from '@angular/core';
-
-export interface WhitelabelConfig {
-  // Logo assets
-  logoUrl: string;           // Full logo for header (typically horizontal)
-  logoMarkUrl: string;       // Compact logo mark for avatars/badges
-  logoAlt: string;           // Alt text for accessibility
-  
-  // Logo dimensions (optional, for optimization)
-  logoWidth?: number;
-  logoHeight?: number;
-  logoMarkWidth?: number;
-  logoMarkHeight?: number;
-  
-  // Brand colors - these will update CSS custom properties
-  primaryColor: string;      // Maps to --color-background-brand
-  secondaryColor: string;    // Maps to --color-brand-secondary
-  
-  // Organization info
-  organizationName: string;
-  organizationId: string;
-}
-
-const DEFAULT_CONFIG: WhitelabelConfig = {
-  logoUrl: '/assets/logos/propbinder-logo.svg',
-  logoMarkUrl: '/assets/logos/propbinder-logomark.svg',
-  logoAlt: 'Propbinder',
-  primaryColor: '#6B5FF5',       // Propbinder brand purple (--color-background-brand)
-  secondaryColor: '#221a4c',     // Propbinder dark purple for headers (--color-brand-secondary)
-  organizationName: 'Propbinder',
-  organizationId: 'default'
-};
-
-/**
- * WhitelabelService
- * 
- * Manages whitelabel configuration including logos and brand colors.
- * Automatically updates CSS custom properties when colors change.
- * 
- * @example
- * Initialize with custom config:
- * ```typescript
- * whitelabelService.initialize({
- *   logoUrl: '/assets/logos/acme-logo.svg',
- *   logoMarkUrl: '/assets/logos/acme-mark.svg',
- *   primaryColor: '#2563eb',
- *   secondaryColor: '#3b82f6',
- *   organizationName: 'Acme Corp'
- * });
- * ```
- * 
- * Load from API:
- * ```typescript
- * await whitelabelService.loadFromApi('acme-corp');
- * ```
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class WhitelabelService {
-  private _config = signal<WhitelabelConfig>(DEFAULT_CONFIG);
-  
-  // Readonly getters for accessing config values
-  readonly logoUrl = () => this._config().logoUrl;
-  readonly logoMarkUrl = () => this._config().logoMarkUrl;
-  readonly logoAlt = () => this._config().logoAlt;
-  readonly primaryColor = () => this._config().primaryColor;
-  readonly secondaryColor = () => this._config().secondaryColor;
-  readonly organizationName = () => this._config().organizationName;
-  readonly organizationId = () => this._config().organizationId;
-  
-  // Full config accessor
-  readonly config = this._config.asReadonly();
-  
-  constructor() {
-    // Apply default colors on initialization
-    this.applyColors(DEFAULT_CONFIG.primaryColor, DEFAULT_CONFIG.secondaryColor);
-    
-    // Watch for config changes and update CSS custom properties
-    effect(() => {
-      const config = this._config();
-      this.applyColors(config.primaryColor, config.secondaryColor);
-    });
-  }
-  
-  /**
-   * Initialize whitelabel configuration
-   * Call this early in app initialization (app.config.ts or app.component.ts)
-   */
-  initialize(config: Partial<WhitelabelConfig>) {
-    this._config.update(current => ({
-      ...current,
-      ...config
-    }));
-  }
-  
-  /**
-   * Load whitelabel config from API
-   * Typically called on app startup based on subdomain, user tenant, etc.
-   * 
-   * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
-   */
-  async loadFromApi(organizationId?: string): Promise<void> {
-    try {
-      // Example API call structure
-      // const response = await fetch(`/api/whitelabel/${organizationId || 'default'}`);
-      // const config = await response.json();
-      // this.initialize(config);
-      
-      console.log('Loading whitelabel config from API for:', organizationId);
-      
-      // Example: Different configs for different organizations
-      if (organizationId === 'demo-client') {
-        this.initialize({
-          logoUrl: '/assets/logos/demo-logo.svg',
-          logoMarkUrl: '/assets/logos/demo-mark.svg',
-          logoAlt: 'Demo Client',
-          primaryColor: '#2563eb',    // Blue
-          secondaryColor: '#3b82f6',  // Lighter blue
-          organizationName: 'Demo Client',
-          organizationId: 'demo-client'
-        });
-      }
-      // Add more organization-specific configs as needed
-      
-    } catch (error) {
-      console.error('Failed to load whitelabel config:', error);
-      // Fallback to defaults already set
-    }
-  }
-  
-  /**
-   * Update config dynamically (e.g., when user switches organizations)
-   */
-  updateConfig(updates: Partial<WhitelabelConfig>) {
-    this.initialize(updates);
-  }
-  
-  /**
-   * Update only the brand colors
-   */
-  updateColors(primaryColor: string, secondaryColor: string) {
-    this._config.update(current => ({
-      ...current,
-      primaryColor,
-      secondaryColor
-    }));
-  }
-  
-  /**
-   * Reset to default configuration
-   */
-  resetToDefault() {
-    this._config.set(DEFAULT_CONFIG);
-  }
-  
-  /**
-   * Apply colors to CSS custom properties
-   * This updates the actual CSS variables used throughout the app
-   */
-  private applyColors(primaryColor: string, secondaryColor: string) {
-    if (typeof document !== 'undefined') {
-      const root = document.documentElement;
-      root.style.setProperty('--color-background-brand', primaryColor);
-      root.style.setProperty('--color-brand-secondary', secondaryColor);
-      
-      console.log('Applied whitelabel colors:', { primaryColor, secondaryColor });
-    }
-  }
-}
-