@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/examples/whitelabel-demo-modal.component.ts

@@ -1,1094 +0,0 @@
-import { Component, OnInit, inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { WhitelabelService } from '../services/whitelabel.service';
-import { DsLogoComponent } from '../components/logo/ds-logo';
-import { DsAvatarWithBadgeComponent } from '../components/avatar-with-badge/ds-avatar-with-badge';
-import { DsAppIconComponent } from '../components/app-icon/ds-app-icon';
-import { DsIconButtonComponent } from '@propbinder/design-system';
-import { IonContent, ModalController } from '@ionic/angular/standalone';
-
-/**
- * Whitelabel Demo Modal Component
- * 
- * Demonstrates the whitelabeling system with theme selection, brand colors, and logo previews.
- * Opens as a full-screen modal similar to post details.
- */
-@Component({
-  selector: 'ds-whitelabel-demo-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonContent,
-    DsLogoComponent,
-    DsAvatarWithBadgeComponent,
-    DsAppIconComponent,
-    DsIconButtonComponent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  styles: [`
-    /* Host fills the modal with flex layout */
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      width: 100%;
-      background: var(--color-background-neutral-primary, #ffffff);
-    }
-    
-    /* Fixed header at top */
-    .modal-header {
-      flex-shrink: 0;
-      background: var(--color-background-neutral-primary, #ffffff);
-      border-bottom: 1px solid var(--border-color-default, #e0e0e0);
-      padding: 0 16px;
-    }
-    
-    /* ion-content fills remaining space and scrolls */
-    ion-content,
-    .modal-content {
-      --background: #ffffff;
-      flex: 1;
-      width: 100%;
-    }
-    
-    .header-content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      min-height: 56px;
-    }
-    
-    .header-title {
-      font-family: 'Brockmann', sans-serif;
-      font-size: 17px;
-      font-weight: 600;
-      color: var(--color-text-primary, #1a1a1a);
-      flex: 1;
-    }
-    
-    .close-button {
-      flex-shrink: 0;
-      border-radius: 50%;
-    }
-    
-    .close-button::ng-deep button {
-      border-radius: 50% !important;
-      width: 36px !important;
-      height: 36px !important;
-      min-width: 36px !important;
-      min-height: 36px !important;
-      padding: 0 !important;
-      display: flex !important;
-      align-items: center !important;
-      justify-content: center !important;
-      background: var(--color-background-neutral-secondary, #f5f5f5) !important;
-      color: var(--color-text-primary, #1a1a1a) !important;
-    }
-    
-    .demo-container {
-      padding: 20px;
-      max-width: 600px;
-      margin: 0 auto;
-      width: 100%;
-    }
-    
-    .demo-section {
-      margin-bottom: 32px;
-    }
-    
-    .demo-section h2 {
-      margin-bottom: 16px;
-      font-size: 18px;
-      font-weight: 600;
-      color: #333;
-    }
-    
-    /* Theme Selection */
-    .theme-buttons {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-    
-    .theme-btn {
-      padding: 8px 16px;
-      border-radius: 8px;
-      font-size: 14px;
-      font-weight: 500;
-      border: none;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      background: #e0e0e0;
-      color: #333;
-    }
-    
-    .theme-btn:active {
-      transform: scale(0.98);
-    }
-    
-    .theme-btn.active {
-      background: var(--color-secondary-surface);
-      color: var(--color-secondary-content);
-    }
-    
-    /* Logo Preview */
-    .logo-preview {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      background: var(--color-brand-secondary);
-      border-radius: 12px;
-      min-height: 80px;
-    }
-    
-    .logomark-preview {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      background: white;
-      border: 1px solid #e0e0e0;
-      border-radius: 12px;
-      min-height: 80px;
-    }
-    
-    .preview-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
-    }
-    
-    .preview-tile {
-      background: white;
-      border-radius: 12px;
-    }
-    
-    .preview-tile h3 {
-      font-size: 13px;
-      font-weight: 600;
-      color: #666;
-      margin-top: 0;
-      margin-bottom: 12px;
-    }
-    
-    /* App Icon Sizes */
-    .app-icon-sizes {
-      display: flex;
-      gap: 24px;
-      align-items: flex-end;
-      justify-content: center;
-      padding: 24px;
-      background: white;
-      border-radius: 12px;
-      border: 1px solid var(--border-color-default, #e0e0e0);
-      flex-wrap: wrap;
-    }
-    
-    .app-icon-demo {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 12px;
-      /* Use app icon surface color as app icon background */
-      --app-icon-background: var(--color-app-icon-surface);
-    }
-    
-    .app-icon-demo span {
-      font-size: 12px;
-      color: #666;
-      font-family: monospace;
-    }
-    
-    /* Brand Colors */
-    .color-section {
-      background: white;
-      border-radius: 12px;
-    }
-    
-    .color-swatches {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
-      margin-bottom: 24px;
-    }
-    
-    .swatch {
-      padding: 16px;
-      border-radius: 8px;
-      text-align: center;
-    }
-    
-    .swatch-label {
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 4px;
-    }
-    
-    .swatch-value {
-      font-size: 11px;
-      opacity: 0.8;
-      font-family: monospace;
-    }
-    
-    .swatch--app-icon-surface {
-      background: var(--color-app-icon-surface);
-      color: var(--color-app-icon-content);
-    }
-    
-    .swatch--app-icon-content {
-      background: var(--color-app-icon-content);
-      color: var(--color-app-icon-surface);
-      border: 1px solid #e0e0e0;
-    }
-    
-    .swatch--accent {
-      background: var(--color-accent);
-      color: var(--color-on-accent);
-    }
-    
-    .swatch--on-accent {
-      background: var(--color-on-accent);
-      color: var(--color-accent);
-      border: 1px solid #e0e0e0;
-    }
-    
-    .swatch--header-surface {
-      background: var(--color-header-surface);
-      color: var(--color-header-content);
-    }
-    
-    .swatch--header-content {
-      background: var(--color-header-content);
-      color: var(--color-header-surface);
-      border: 1px solid #e0e0e0;
-    }
-    
-    /* Color Inputs */
-    .color-inputs {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    
-    .color-group-label {
-      font-size: 13px;
-      font-weight: 600;
-      color: #333;
-      margin-top: 8px;
-    }
-    
-    .color-row {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    
-    .color-row label {
-      min-width: 70px;
-      font-size: 13px;
-      color: #666;
-    }
-    
-    .color-row input[type="color"] {
-      width: 40px;
-      height: 32px;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      padding: 0;
-    }
-    
-    .color-row input[type="text"] {
-      flex: 1;
-      padding: 8px 12px;
-      border: 1px solid #ddd;
-      border-radius: 6px;
-      font-family: monospace;
-      font-size: 13px;
-    }
-
-    /* Toggle switch styling */
-    .toggle-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 12px 0;
-    }
-    
-    .toggle-row label {
-      font-size: 14px;
-      color: #333;
-      font-weight: 500;
-    }
-    
-    .toggle-row input[type="checkbox"] {
-      width: 48px;
-      height: 28px;
-      -webkit-appearance: none;
-      appearance: none;
-      background: #ddd;
-      border-radius: 14px;
-      position: relative;
-      cursor: pointer;
-      transition: background 0.2s ease;
-      flex-shrink: 0;
-    }
-    
-    .toggle-row input[type="checkbox"]:checked {
-      background: var(--color-accent);
-    }
-    
-    .toggle-row input[type="checkbox"]::before {
-      content: '';
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background: white;
-      top: 2px;
-      left: 2px;
-      transition: transform 0.2s ease;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    }
-    
-    .toggle-row input[type="checkbox"]:checked::before {
-      transform: translateX(20px);
-    }
-
-    /* Radio button styling */
-    .radio-group {
-      display: flex;
-      gap: 16px;
-      margin-bottom: 16px;
-    }
-    
-    .radio-option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-    }
-    
-    .radio-option input[type="radio"] {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-      accent-color: var(--color-accent);
-    }
-    
-    .radio-option label {
-      font-size: 14px;
-      color: #333;
-      cursor: pointer;
-      font-weight: 500;
-    }
-
-    /* Background preview */
-    .bg-preview {
-      height: 80px;
-      border-radius: 8px;
-      margin-bottom: 16px;
-      border: 1px solid #e0e0e0;
-      position: relative;
-      overflow: hidden;
-    }
-    
-    .bg-preview::after {
-      content: 'Preview';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 12px;
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.3);
-      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
-    }
-
-    /* Safe area support */
-    @supports (padding: env(safe-area-inset-bottom)) {
-      .demo-container {
-        padding-bottom: calc(20px + env(safe-area-inset-bottom));
-      }
-    }
-  `],
-  template: `
-    <!-- Fixed Header -->
-    <div class="modal-header">
-      <div class="header-content">
-        <span class="header-title">Whitelabel</span>
-        <ds-icon-button
-          icon="remixCloseLine"
-          variant="secondary"
-          size="lg"
-          (click)="close()"
-          class="close-button"
-          aria-label="Close">
-        </ds-icon-button>
-      </div>
-    </div>
-    
-    <!-- Scrollable Content -->
-    <ion-content [scrollY]="true" class="modal-content">
-      <div class="demo-container">
-          <!-- Theme Selection -->
-          <div class="demo-section">
-            <h2>Theme</h2>
-            <div class="theme-buttons">
-              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
-                Propbinder
-              </button>
-              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
-                CEJ
-              </button>
-              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
-                PKA
-              </button>
-              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
-                Clave
-              </button>
-              <button class="theme-btn" (click)="applyFreedomTheme()" [class.active]="currentTheme === 'freedom'">
-                Freedom
-              </button>
-              <button class="theme-btn" (click)="applyCobblestoneTheme()" [class.active]="currentTheme === 'cobblestone'">
-                Cobblestone
-              </button>
-            </div>
-          </div>
-          
-          <!-- Sign-in Page Options -->
-          <div class="demo-section">
-            <h2>Sign-in Page</h2>
-            <div class="color-section">
-              <div class="toggle-row">
-                <label>Show City Illustration</label>
-                <input
-                  type="checkbox"
-                  [checked]="whitelabelService.showCityIllustration()"
-                  [disabled]="currentTheme !== 'default'"
-                  (change)="toggleCityIllustration()"
-                  [style.opacity]="currentTheme !== 'default' ? '0.5' : '1'"
-                  [style.cursor]="currentTheme !== 'default' ? 'not-allowed' : 'pointer'"
-                />
-              </div>
-              
-              <div style="margin-top: 24px;">
-                <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Background</h3>
-                
-                <!-- Background type selector -->
-                <div class="radio-group">
-                  <div class="radio-option">
-                    <input 
-                      type="radio" 
-                      id="bg-solid"
-                      name="bgType"
-                      value="solid"
-                      [checked]="whitelabelService.signInBgType() === 'solid'"
-                      (change)="updateSignInBgType('solid')"
-                    />
-                    <label for="bg-solid">Solid</label>
-                  </div>
-                  <div class="radio-option">
-                    <input 
-                      type="radio" 
-                      id="bg-gradient"
-                      name="bgType"
-                      value="gradient"
-                      [checked]="whitelabelService.signInBgType() === 'gradient'"
-                      (change)="updateSignInBgType('gradient')"
-                    />
-                    <label for="bg-gradient">Gradient</label>
-                  </div>
-                </div>
-                
-                <!-- Background preview -->
-                <div class="bg-preview" [style.background]="whitelabelService.signInBgStyle()"></div>
-                
-                <!-- Solid color input -->
-                @if (whitelabelService.signInBgType() === 'solid') {
-                  <div class="color-row">
-                    <label>Color</label>
-                    <input 
-                      type="color" 
-                      [(ngModel)]="customSignInBgSolid"
-                      (change)="applySignInBackground()"
-                    />
-                    <input 
-                      type="text" 
-                      [(ngModel)]="customSignInBgSolid"
-                      (change)="applySignInBackground()"
-                    />
-                  </div>
-                }
-                
-                <!-- Gradient color inputs -->
-                @if (whitelabelService.signInBgType() === 'gradient') {
-                  <div class="color-row">
-                    <label>Start</label>
-                    <input 
-                      type="color" 
-                      [(ngModel)]="customSignInBgGradientStart"
-                      (change)="applySignInBackground()"
-                    />
-                    <input 
-                      type="text" 
-                      [(ngModel)]="customSignInBgGradientStart"
-                      (change)="applySignInBackground()"
-                    />
-                  </div>
-                  <div class="color-row">
-                    <label>End</label>
-                    <input 
-                      type="color" 
-                      [(ngModel)]="customSignInBgGradientEnd"
-                      (change)="applySignInBackground()"
-                    />
-                    <input 
-                      type="text" 
-                      [(ngModel)]="customSignInBgGradientEnd"
-                      (change)="applySignInBackground()"
-                    />
-                  </div>
-                }
-                
-                <!-- Sign-in content color -->
-                <div style="margin-top: 24px;">
-                  <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Content Color</h3>
-                  <div class="color-row">
-                    <label>Text</label>
-                    <input 
-                      type="color" 
-                      [(ngModel)]="customSignInContentColor"
-                      (change)="applySignInContentColor()"
-                    />
-                    <input 
-                      type="text" 
-                      [(ngModel)]="customSignInContentColor"
-                      (change)="applySignInContentColor()"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Logo & Logomark Preview -->
-          <div class="demo-section">
-            <h2>Logo Preview</h2>
-            
-            <!-- Logo Size Selector -->
-            <div style="margin-bottom: 16px;">
-              <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Header Logo Size</h3>
-              <div class="theme-buttons">
-                <button
-                  class="theme-btn"
-                  (click)="updateLogoSize('sm')"
-                  [class.active]="whitelabelService.logoSize() === 'sm'">
-                  Small (24px)
-                </button>
-                <button
-                  class="theme-btn"
-                  (click)="updateLogoSize('md')"
-                  [class.active]="whitelabelService.logoSize() === 'md'">
-                  Medium (28px)
-                </button>
-                <button
-                  class="theme-btn"
-                  (click)="updateLogoSize('lg')"
-                  [class.active]="whitelabelService.logoSize() === 'lg'">
-                  Large (32px)
-                </button>
-                <button
-                  class="theme-btn"
-                  (click)="updateLogoSize('xl')"
-                  [class.active]="whitelabelService.logoSize() === 'xl'">
-                  XLarge (36px)
-                </button>
-              </div>
-            </div>
-            
-            <div class="preview-grid">
-              <div class="preview-tile">
-                <h3>Logo</h3>
-                <div class="logo-preview">
-                  <ds-logo variant="full" />
-                </div>
-              </div>
-              <div class="preview-tile">
-                <h3>Logomark</h3>
-                <div class="logomark-preview">
-                  <ds-avatar-with-badge
-                    [type]="'initials'"
-                    [initials]="'KN'"
-                    [size]="'md'"
-                    [badgePosition]="'bottom-right'"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- App Icon -->
-          <div class="demo-section">
-            <h2>App Icon</h2>
-            <div class="app-icon-sizes">
-              <div class="app-icon-demo">
-                <ds-app-icon size="xl" />
-              </div>
-            </div>
-          </div>
-          
-          <!-- Brand Colors -->
-          <div class="demo-section">
-            <h2>Brand Colors</h2>
-            <div class="color-section">
-              <div class="color-swatches">
-                <div class="swatch swatch--app-icon-surface">
-                  <div class="swatch-label">App Icon Surface</div>
-                  <div class="swatch-value">{{ whitelabelService.appIconSurface() }}</div>
-                </div>
-                <div class="swatch swatch--app-icon-content">
-                  <div class="swatch-label">App Icon Content</div>
-                  <div class="swatch-value">{{ whitelabelService.appIconContent() }}</div>
-                </div>
-                <div class="swatch swatch--accent">
-                  <div class="swatch-label">Accent</div>
-                  <div class="swatch-value">{{ whitelabelService.accent() }}</div>
-                </div>
-                <div class="swatch swatch--on-accent">
-                  <div class="swatch-label">On Accent</div>
-                  <div class="swatch-value">{{ whitelabelService.onAccent() }}</div>
-                </div>
-                <div class="swatch swatch--header-surface">
-                  <div class="swatch-label">Header Surface</div>
-                  <div class="swatch-value">{{ whitelabelService.headerSurface() }}</div>
-                </div>
-                <div class="swatch swatch--header-content">
-                  <div class="swatch-label">Header Content</div>
-                  <div class="swatch-value">{{ whitelabelService.headerContent() }}</div>
-                </div>
-              </div>
-              
-              <div class="color-inputs">
-                <div class="color-group-label">App Icon</div>
-                <div class="color-row">
-                  <label>Surface</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customAppIconSurface"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customAppIconSurface"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Content</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customAppIconContent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customAppIconContent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                
-                <div class="color-group-label">Accent</div>
-                <div class="color-row">
-                  <label>Base</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customAccent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customAccent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>On Accent</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customOnAccent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customOnAccent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                
-                <div class="color-group-label">Header</div>
-                <div class="color-row">
-                  <label>Surface</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customHeaderSurface"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customHeaderSurface"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Content</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customHeaderContent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customHeaderContent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>Accent</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customHeaderAccent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customHeaderAccent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-                <div class="color-row">
-                  <label>On Accent</label>
-                  <input 
-                    type="color" 
-                    [(ngModel)]="customOnHeaderAccent"
-                    (change)="applyCustomColors()"
-                  />
-                  <input 
-                    type="text" 
-                    [(ngModel)]="customOnHeaderAccent"
-                    (change)="applyCustomColors()"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-    </ion-content>
-  `
-})
-export class WhitelabelDemoModalComponent implements OnInit {
-  whitelabelService = inject(WhitelabelService);
-  
-  private modalController = inject(ModalController);
-  
-  // Current active theme
-  currentTheme = 'default';
-  
-  // Custom color inputs
-  customAppIconSurface = '#6B5FF5';
-  customAppIconContent = '#FFFFFF';
-  customAccent = '#6B5FF5';
-  customOnAccent = '#FFFFFF';
-  customHeaderSurface = '#221a4c';
-  customHeaderContent = '#FFFFFF';
-  customHeaderAccent = 'rgba(255, 255, 255, 0.15)';
-  customOnHeaderAccent = '#FFFFFF';
-  
-  // Sign-in background inputs
-  customSignInBgSolid = '#D6C7FF';
-  customSignInBgGradientStart = '#D6C7FF';
-  customSignInBgGradientEnd = '#8A9BFF';
-  customSignInContentColor = '#1a1a1a';
-  
-  ngOnInit() {
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-    this.detectCurrentTheme();
-  }
-  
-  /**
-   * Detect the current active theme based on colors
-   */
-  private detectCurrentTheme() {
-    const headerSurface = this.whitelabelService.headerSurface().toUpperCase();
-    
-    if (headerSurface === '#A70923') {
-      this.currentTheme = 'cej';
-    } else if (headerSurface === '#660036') {
-      this.currentTheme = 'pka';
-    } else if (headerSurface === '#262424') {
-      this.currentTheme = 'clave';
-    } else if (headerSurface === '#1D4A49') {
-      this.currentTheme = 'freedom';
-    } else if (headerSurface === '#2C3E50') {
-      this.currentTheme = 'cobblestone';
-    } else {
-      this.currentTheme = 'default';
-    }
-  }
-  
-  /**
-   * Close the modal
-   */
-  close(): void {
-    this.modalController.dismiss();
-  }
-  
-  applyDefaultTheme() {
-    this.currentTheme = 'default';
-    this.whitelabelService.updateConfig({
-      logoUrl: '/Assets/logos/propbinder-logomark.svg',
-      logoMarkUrl: '/Assets/logos/propbinder-logomark.svg',
-      logoAlt: 'Propbinder',
-      logoSize: 'md',
-      appIconSurface: '#6B5FF5',
-      appIconContent: '#FFFFFF',
-      accent: '#6B5FF5',
-      onAccent: '#FFFFFF',
-      headerSurface: '#221a4c',
-      headerContent: '#FFFFFF',
-      headerAccent: '#6B5FF5',
-      onHeaderAccent: '#FFFFFF',
-      showCityIllustration: true,
-      signInBgType: 'gradient',
-      signInBgSolid: '#D6C7FF',
-      signInBgGradientStart: '#D6C7FF',
-      signInBgGradientEnd: '#8A9BFF',
-      signInContentColor: '#1a1a1a',
-      organizationName: 'Propbinder',
-      organizationId: 'default'
-    });
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-  }
-  
-  applyCejTheme() {
-    this.currentTheme = 'cej';
-    this.whitelabelService.updateConfig({
-      logoUrl: '/Assets/logos/cej-logo.png',
-      logoMarkUrl: '/Assets/logos/cej-logo.png',
-      logoAlt: 'CEJ',
-      logoSize: 'xl',
-      appIconSurface: '#A70923',
-      appIconContent: '#FFFFFF',
-      accent: '#dc092c',
-      onAccent: '#FFFFFF',
-      headerSurface: '#A70923',
-      headerContent: '#FFFFFF',
-      headerAccent: '#dc092c',
-      onHeaderAccent: '#FFFFFF',
-      showCityIllustration: false,
-      signInBgType: 'gradient',
-      signInBgSolid: '#FFE5E8',
-      signInBgGradientStart: '#FFE5E8',
-      signInBgGradientEnd: '#FFC7CE',
-      signInContentColor: '#1a1a1a',
-      organizationName: 'CEJ',
-      organizationId: 'cej'
-    });
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-  }
-  
-  applyPkaTheme() {
-    this.currentTheme = 'pka';
-    this.whitelabelService.updateConfig({
-      logoUrl: '/Assets/logos/pka-logo.svg',
-      logoMarkUrl: '/Assets/logos/pka-logo.svg',
-      logoAlt: 'PKA',
-      logoSize: 'md',
-      appIconSurface: '#CC006C',
-      appIconContent: '#FFFFFF',
-      accent: '#CC006C',
-      onAccent: '#FFFFFF',
-      headerSurface: '#660036',
-      headerContent: '#FFFFFF',
-      headerAccent: '#CC006C',
-      onHeaderAccent: '#FFFFFF',
-      showCityIllustration: false,
-      signInBgType: 'gradient',
-      signInBgSolid: '#FFE0F0',
-      signInBgGradientStart: '#FFE0F0',
-      signInBgGradientEnd: '#FFB3D9',
-      signInContentColor: '#1a1a1a',
-      organizationName: 'PKA',
-      organizationId: 'pka'
-    });
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-  }
-  
-  applyClaveTheme() {
-    this.currentTheme = 'clave';
-    this.whitelabelService.updateConfig({
-      logoUrl: '/Assets/logos/clave-logo.svg',
-      logoMarkUrl: '/Assets/logos/clave-logo.svg',
-      logoAlt: 'Clave',
-      logoSize: 'lg',
-      appIconSurface: '#262424',
-      appIconContent: '#FFFFFF',
-      accent: '#868764',
-      onAccent: '#FFFFFF',
-      headerSurface: '#262424',
-      headerContent: '#FFFFFF',
-      headerAccent: '#868764',
-      onHeaderAccent: '#FFFFFF',
-      showCityIllustration: false,
-      signInBgType: 'gradient',
-      signInBgSolid: '#E8E8E0',
-      signInBgGradientStart: '#E8E8E0',
-      signInBgGradientEnd: '#D4D4C3',
-      signInContentColor: '#1a1a1a',
-      organizationName: 'Clave',
-      organizationId: 'clave'
-    });
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-  }
-  
-  applyFreedomTheme() {
-    this.currentTheme = 'freedom';
-    this.whitelabelService.updateConfig({
-      logoUrl: '/Assets/logos/freedom-logo.svg',
-      logoMarkUrl: '/Assets/logos/freedom-logomark.svg',
-      logoAlt: 'Freedom',
-      logoSize: 'md',
-      appIconSurface: '#1D4A49',
-      appIconContent: '#FFFFFF',
-      accent: '#1D4A49',
-      onAccent: '#FFFFFF',
-      headerSurface: '#1D4A49',
-      headerContent: '#FFFFFF',
-      headerAccent: '#AACFC3',
-      onHeaderAccent: '#1D4A49',
-      showCityIllustration: false,
-      signInBgType: 'gradient',
-      signInBgSolid: '#D5E8E6',
-      signInBgGradientStart: '#D5E8E6',
-      signInBgGradientEnd: '#AACFC3',
-      signInContentColor: '#FFFFFF',
-      organizationName: 'Freedom',
-      organizationId: 'freedom'
-    });
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-  }
-  
-  applyCobblestoneTheme() {
-    this.currentTheme = 'cobblestone';
-    this.whitelabelService.updateConfig({
-      logoUrl: '/Assets/logos/cobblestone-logo.svg',
-      logoMarkUrl: '/Assets/logos/cobblestone-logomark.svg',
-      logoAlt: 'Cobblestone',
-      logoSize: 'sm',
-      appIconSurface: '#2C3E50',
-      appIconContent: '#FFFFFF',
-      accent: '#3498DB',
-      onAccent: '#FFFFFF',
-      headerSurface: '#2C3E50',
-      headerContent: '#FFFFFF',
-      headerAccent: '#3498DB',
-      onHeaderAccent: '#FFFFFF',
-      showCityIllustration: false,
-      signInBgType: 'gradient',
-      signInBgSolid: '#E8EEF2',
-      signInBgGradientStart: '#E8EEF2',
-      signInBgGradientEnd: '#BDC3C7',
-      signInContentColor: '#1a1a1a',
-      organizationName: 'Cobblestone',
-      organizationId: 'cobblestone'
-    });
-    this.updateCustomColorInputs();
-    this.updateSignInBgInputs();
-    this.updateSignInContentColorInput();
-  }
-  
-  applyCustomColors() {
-    this.whitelabelService.updateColors({
-      appIconSurface: this.customAppIconSurface,
-      appIconContent: this.customAppIconContent,
-      accent: this.customAccent,
-      onAccent: this.customOnAccent,
-      headerSurface: this.customHeaderSurface,
-      headerContent: this.customHeaderContent,
-      headerAccent: this.customHeaderAccent,
-      onHeaderAccent: this.customOnHeaderAccent
-    });
-  }
-  
-  toggleCityIllustration() {
-    this.whitelabelService.updateConfig({
-      showCityIllustration: !this.whitelabelService.showCityIllustration()
-    });
-  }
-  
-  updateSignInBgType(type: 'solid' | 'gradient') {
-    this.whitelabelService.updateConfig({
-      signInBgType: type
-    });
-  }
-  
-  updateLogoSize(size: 'sm' | 'md' | 'lg' | 'xl') {
-    this.whitelabelService.updateConfig({
-      logoSize: size,
-      logoHeight: undefined  // Clear custom height to use size-based calculation
-    });
-  }
-  
-  applySignInBackground() {
-    this.whitelabelService.updateConfig({
-      signInBgSolid: this.customSignInBgSolid,
-      signInBgGradientStart: this.customSignInBgGradientStart,
-      signInBgGradientEnd: this.customSignInBgGradientEnd
-    });
-  }
-  
-  applySignInContentColor() {
-    this.whitelabelService.updateConfig({
-      signInContentColor: this.customSignInContentColor
-    });
-  }
-  
-  private updateSignInBgInputs() {
-    this.customSignInBgSolid = this.whitelabelService.signInBgSolid();
-    this.customSignInBgGradientStart = this.whitelabelService.signInBgGradientStart();
-    this.customSignInBgGradientEnd = this.whitelabelService.signInBgGradientEnd();
-  }
-  
-  private updateSignInContentColorInput() {
-    this.customSignInContentColor = this.whitelabelService.signInContentColor();
-  }
-  
-  private updateCustomColorInputs() {
-    this.customAppIconSurface = this.whitelabelService.appIconSurface();
-    this.customAppIconContent = this.whitelabelService.appIconContent();
-    this.customAccent = this.whitelabelService.accent();
-    this.customOnAccent = this.whitelabelService.onAccent();
-    this.customHeaderSurface = this.whitelabelService.headerSurface();
-    this.customHeaderContent = this.whitelabelService.headerContent();
-    this.customHeaderAccent = this.whitelabelService.headerAccent();
-    this.customOnHeaderAccent = this.whitelabelService.onHeaderAccent();
-  }
-}
-