@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/pages/whitelabel-demo.page.ts

@@ -0,0 +1,548 @@
+import { Component, OnInit, inject, signal } 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 { IonContent, IonHeader, IonToolbar, IonTitle, IonButton } from '@ionic/angular/standalone';
+
+/**
+ * Whitelabel Demo Page
+ * 
+ * Demonstrates the whitelabeling system with live color and logo switching.
+ */
+@Component({
+  selector: 'app-whitelabel-demo',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonContent,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonButton,
+    DsLogoComponent,
+    DsAvatarWithBadgeComponent
+  ],
+  styles: [`
+    :host {
+      display: block;
+    }
+    
+    ion-toolbar {
+      --background: var(--color-brand-secondary);
+      --color: white;
+    }
+    
+    ion-content {
+      --background: #f5f5f5;
+    }
+    
+    .demo-container {
+      padding: 20px;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    
+    .demo-section {
+      margin-bottom: 32px;
+    }
+    
+    .demo-section h2 {
+      margin-bottom: 16px;
+      font-size: 20px;
+      font-weight: 600;
+    }
+    
+    .logo-showcase {
+      display: flex;
+      gap: 24px;
+      align-items: center;
+      padding: 24px;
+      background: white;
+      border-radius: 8px;
+    }
+    
+    .avatar-showcase {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      padding: 24px;
+      background: white;
+      border-radius: 8px;
+      flex-wrap: wrap;
+    }
+    
+    .button-group {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    
+    .color-demo {
+      padding: 24px;
+      background: white;
+      border-radius: 8px;
+    }
+    
+    .color-swatch {
+      display: flex;
+      gap: 16px;
+      margin-top: 16px;
+    }
+    
+    .swatch {
+      flex: 1;
+      min-height: 100px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 600;
+    }
+    
+    .swatch--primary {
+      background: var(--color-background-brand);
+    }
+    
+    .swatch--secondary {
+      background: var(--color-brand-secondary);
+    }
+    
+    .current-config {
+      padding: 16px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      margin-top: 16px;
+    }
+    
+    .current-config pre {
+      margin: 0;
+      font-size: 12px;
+      overflow-x: auto;
+    }
+    
+    .color-inputs {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-top: 16px;
+    }
+    
+    .color-input-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .color-input-row label {
+      min-width: 100px;
+      font-weight: 600;
+      font-size: 14px;
+    }
+    
+    .color-input-row input[type="color"] {
+      width: 50px;
+      height: 40px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    
+    .color-input-row input[type="text"] {
+      flex: 1;
+      padding: 8px 12px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    
+    .logo-upload {
+      margin-top: 24px;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+    }
+    
+    .upload-section {
+      margin-bottom: 20px;
+    }
+    
+    .upload-section h3 {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+    
+    .file-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .file-input-wrapper input[type="file"] {
+      display: none;
+    }
+    
+    .upload-button {
+      padding: 10px 16px;
+      background: var(--color-background-brand);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: 600;
+      font-size: 14px;
+    }
+    
+    .upload-button:hover {
+      opacity: 0.9;
+    }
+    
+    .file-name {
+      font-size: 14px;
+      color: #666;
+    }
+    
+    .reset-button {
+      padding: 8px 12px;
+      background: #f5f5f5;
+      color: #666;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+  `],
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Whitelabel Demo</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <div class="demo-container">
+        <!-- Logo Section -->
+        <div class="demo-section">
+          <h2>Logos</h2>
+          <div class="logo-showcase">
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Full Logo (md)</p>
+              <ds-logo variant="full" size="md" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (sm)</p>
+              <ds-logo variant="mark" size="sm" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (md)</p>
+              <ds-logo variant="mark" size="md" />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Logomark (lg)</p>
+              <ds-logo variant="mark" size="lg" />
+            </div>
+          </div>
+          
+          <!-- Logo Upload Section -->
+          <div class="logo-upload">
+            <div class="upload-section">
+              <h3>Upload Full Logo</h3>
+              <div class="file-input-wrapper">
+                <input 
+                  #fullLogoInput
+                  type="file" 
+                  accept="image/*"
+                  (change)="handleFullLogoUpload($event)"
+                />
+                <button class="upload-button" (click)="fullLogoInput.click()">
+                  Choose File
+                </button>
+                @if (uploadedFullLogoName) {
+                  <span class="file-name">{{ uploadedFullLogoName }}</span>
+                }
+                @if (uploadedFullLogoName) {
+                  <button class="reset-button" (click)="resetFullLogo()">Reset</button>
+                }
+              </div>
+            </div>
+            
+            <div class="upload-section">
+              <h3>Upload Logomark</h3>
+              <div class="file-input-wrapper">
+                <input 
+                  #logomarkInput
+                  type="file" 
+                  accept="image/*"
+                  (change)="handleLogomarkUpload($event)"
+                />
+                <button class="upload-button" (click)="logomarkInput.click()">
+                  Choose File
+                </button>
+                @if (uploadedLogomarkName) {
+                  <span class="file-name">{{ uploadedLogomarkName }}</span>
+                }
+                @if (uploadedLogomarkName) {
+                  <button class="reset-button" (click)="resetLogomark()">Reset</button>
+                }
+              </div>
+            </div>
+            
+            <p style="font-size: 12px; color: #999; margin-top: 12px;">
+              Tip: Use SVG or PNG files with transparent backgrounds for best results
+            </p>
+          </div>
+        </div>
+        
+        <!-- Avatar with Badge Section -->
+        <div class="demo-section">
+          <h2>Avatar with Logo Badge</h2>
+          <div class="avatar-showcase">
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Small</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'sm'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Medium</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'md'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">Large</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'lg'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+            <div>
+              <p style="margin-bottom: 8px; font-size: 12px; color: #666;">X-Large</p>
+              <ds-avatar-with-badge
+                [type]="'initials'"
+                [initials]="'JD'"
+                [size]="'xl'"
+                [badgePosition]="'bottom-right'"
+              />
+            </div>
+          </div>
+        </div>
+        
+        <!-- Color Section -->
+        <div class="demo-section">
+          <h2>Brand Colors</h2>
+          <div class="color-demo">
+            <p style="margin-bottom: 8px; color: #666;">Current brand colors:</p>
+            <div class="color-swatch">
+              <div class="swatch swatch--primary">
+                Primary<br/>
+                <span style="font-size: 11px; opacity: 0.9;">{{ whitelabelService.primaryColor() }}</span>
+              </div>
+              <div class="swatch swatch--secondary">
+                Secondary<br/>
+                <span style="font-size: 11px; opacity: 0.9;">{{ whitelabelService.secondaryColor() }}</span>
+              </div>
+            </div>
+            
+            <!-- Custom Color Inputs -->
+            <div class="color-inputs">
+              <div class="color-input-row">
+                <label>Primary:</label>
+                <input 
+                  type="color" 
+                  [(ngModel)]="customPrimaryColor"
+                  (change)="applyCustomColors()"
+                />
+                <input 
+                  type="text" 
+                  [(ngModel)]="customPrimaryColor"
+                  (change)="applyCustomColors()"
+                  placeholder="#6B5FF5"
+                />
+              </div>
+              <div class="color-input-row">
+                <label>Secondary:</label>
+                <input 
+                  type="color" 
+                  [(ngModel)]="customSecondaryColor"
+                  (change)="applyCustomColors()"
+                />
+                <input 
+                  type="text" 
+                  [(ngModel)]="customSecondaryColor"
+                  (change)="applyCustomColors()"
+                  placeholder="#221a4c"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Theme Switcher -->
+        <div class="demo-section">
+          <h2>Switch Organization Theme</h2>
+          <div class="button-group">
+            <ion-button (click)="applyDefaultTheme()">
+              Default (Purple)
+            </ion-button>
+            <ion-button (click)="applyBlueTheme()">
+              Blue Theme
+            </ion-button>
+            <ion-button (click)="applyGreenTheme()">
+              Green Theme
+            </ion-button>
+            <ion-button (click)="applyOrangeTheme()">
+              Orange Theme
+            </ion-button>
+          </div>
+        </div>
+        
+        <!-- Current Config -->
+        <div class="demo-section">
+          <h2>Current Configuration</h2>
+          <div class="current-config">
+            <pre>{{ configJson() }}</pre>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+  `
+})
+export class WhitelabelDemoPage implements OnInit {
+  whitelabelService = inject(WhitelabelService);
+  
+  // Custom color inputs
+  customPrimaryColor = '#6B5FF5';
+  customSecondaryColor = '#221a4c';
+  
+  // Logo upload state
+  uploadedFullLogoName = '';
+  uploadedLogomarkName = '';
+  
+  ngOnInit() {
+    console.log('Whitelabel Demo Page initialized');
+    // Initialize custom colors with current values
+    this.customPrimaryColor = this.whitelabelService.primaryColor();
+    this.customSecondaryColor = this.whitelabelService.secondaryColor();
+  }
+  
+  handleFullLogoUpload(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+      const file = input.files[0];
+      this.uploadedFullLogoName = file.name;
+      
+      // Convert to data URL
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result as string;
+        this.whitelabelService.updateConfig({
+          logoUrl: dataUrl
+        });
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+  
+  handleLogomarkUpload(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+      const file = input.files[0];
+      this.uploadedLogomarkName = file.name;
+      
+      // Convert to data URL
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result as string;
+        this.whitelabelService.updateConfig({
+          logoMarkUrl: dataUrl
+        });
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+  
+  resetFullLogo() {
+    this.uploadedFullLogoName = '';
+    this.whitelabelService.updateConfig({
+      logoUrl: '/assets/logos/propbinder-logo.svg'
+    });
+  }
+  
+  resetLogomark() {
+    this.uploadedLogomarkName = '';
+    this.whitelabelService.updateConfig({
+      logoMarkUrl: '/assets/logos/propbinder-logomark.svg'
+    });
+  }
+  
+  configJson() {
+    return JSON.stringify(this.whitelabelService.config(), null, 2);
+  }
+  
+  applyDefaultTheme() {
+    this.whitelabelService.updateConfig({
+      primaryColor: '#6B5FF5',
+      secondaryColor: '#221a4c',
+      organizationName: 'Propbinder',
+      organizationId: 'default'
+    });
+    this.updateCustomColorInputs();
+  }
+  
+  applyBlueTheme() {
+    this.whitelabelService.updateConfig({
+      primaryColor: '#2563eb',
+      secondaryColor: '#3b82f6',
+      organizationName: 'Blue Corp',
+      organizationId: 'blue-corp'
+    });
+    this.updateCustomColorInputs();
+  }
+  
+  applyGreenTheme() {
+    this.whitelabelService.updateConfig({
+      primaryColor: '#16a34a',
+      secondaryColor: '#22c55e',
+      organizationName: 'Green Industries',
+      organizationId: 'green-industries'
+    });
+    this.updateCustomColorInputs();
+  }
+  
+  applyOrangeTheme() {
+    this.whitelabelService.updateConfig({
+      primaryColor: '#ea580c',
+      secondaryColor: '#f97316',
+      organizationName: 'Orange Solutions',
+      organizationId: 'orange-solutions'
+    });
+    this.updateCustomColorInputs();
+  }
+  
+  applyCustomColors() {
+    this.whitelabelService.updateColors(
+      this.customPrimaryColor,
+      this.customSecondaryColor
+    );
+  }
+  
+  private updateCustomColorInputs() {
+    this.customPrimaryColor = this.whitelabelService.primaryColor();
+    this.customSecondaryColor = this.whitelabelService.secondaryColor();
+  }
+}
+

package/src/public-api.ts

@@ -0,0 +1,5 @@
+/* Auto-generated. Do not edit. */
+export * from './components';
+export * from './pages';
+export * from './animations/page-transitions';
+export * from './services/user.service';

package/src/services/user.service.ts

@@ -0,0 +1,35 @@
+import { Injectable, signal } from '@angular/core';
+
+/**
+ * User service for managing current user data globally
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  // User avatar configuration
+  private _avatarInitials = signal('LM');
+  private _avatarType = signal<'initials' | 'photo' | 'icon'>('initials');
+  private _avatarSrc = signal('');
+  
+  // Readonly computed values
+  readonly avatarInitials = this._avatarInitials.asReadonly();
+  readonly avatarType = this._avatarType.asReadonly();
+  readonly avatarSrc = this._avatarSrc.asReadonly();
+  
+  /**
+   * Update avatar configuration
+   */
+  setAvatarInitials(initials: string) {
+    this._avatarInitials.set(initials);
+  }
+  
+  setAvatarType(type: 'initials' | 'photo' | 'icon') {
+    this._avatarType.set(type);
+  }
+  
+  setAvatarSrc(src: string) {
+    this._avatarSrc.set(src);
+  }
+}
+