@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,1094 @@
+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();
+  }
+}
+