@propbinder/mobile-design 0.0.2 → 0.0.21

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

@@ -1,548 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/* 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

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