@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/pages/inquiry-detail.example.ts

@@ -0,0 +1,416 @@
+import { Component, signal, computed, ElementRef, ViewChild, AfterViewInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavController, Platform } from '@ionic/angular/standalone';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle,
+  IonContent, 
+  IonRefresher, 
+  IonRefresherContent 
+} from '@ionic/angular/standalone';
+import { DsIconComponent, DsAvatarComponent } from '@propbinder/design-system';
+import { DsMobileTabBarComponent, type TabItem } from '../components/tab-bar';
+import { DsMobileListItemStaticComponent } from '../components/list-item-static';
+import { DsMobileInteractiveListItemMessageComponent } from '../components/interactive-list-item-message';
+import { UserService } from '../services/user.service';
+import { MobilePageBase } from '../components/shared/mobile-page-base';
+import { customBackTransition } from '../animations/page-transitions';
+
+interface ActivityItem {
+  id: string;
+  type: 'assignment' | 'status_change' | 'creation';
+  actor?: string;
+  actorInitials?: string;
+  title: string;
+  description?: string;
+  timestamp: string;
+  date: string;
+  iconName: string;
+  iconBgColor?: string;
+}
+
+interface MessageThread {
+  id: string;
+  senderName: string;
+  senderAvatar: string;
+  senderInitials: string;
+  message: string;
+  role: string;
+  timestamp: string;
+  unread: boolean;
+}
+
+@Component({
+  selector: 'app-mobile-inquiry-detail-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonRefresher,
+    IonRefresherContent,
+    DsIconComponent,
+    DsAvatarComponent,
+    DsMobileTabBarComponent,
+    DsMobileListItemStaticComponent,
+    DsMobileInteractiveListItemMessageComponent
+  ],
+  host: {
+    class: 'ion-page'
+  },
+  styleUrls: ['./inquiry-detail.example.css'],
+  template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-detail">
+          <!-- Back Button -->
+          <button class="back-button" (click)="goBack()" [attr.aria-label]="'Go back'">
+            <ds-icon name="remixArrowLeftSLine" size="24px" color="white" />
+          </button>
+          
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-detail__title">{{ inquiryTitle }}</ion-title>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (isNativePlatform()) {
+        <ion-refresher 
+          slot="fixed" 
+          (ionRefresh)="handleRefresh($event)"
+          [pullFactor]="0.4" 
+          [pullMin]="80" 
+          [pullMax]="240"
+          closeDuration="600ms">
+          <ion-refresher-content
+            pullingIcon="chevron-down-circle-outline"
+            refreshingSpinner="lines">
+          </ion-refresher-content>
+        </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">{{ inquiryTitle }}</h1>
+          </div>
+          
+          <!-- Tabs in header -->
+          <ds-mobile-tab-bar
+            [tabs]="tabItems"
+            [activeTab]="activeTab()"
+            (tabChange)="setActiveTab($event)">
+          </ds-mobile-tab-bar>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        <div class="content-inner">
+          <!-- Activity Tab Content -->
+          @if (activeTab() === 'activity') {
+            <div class="activity-list">
+              @for (activity of activities; track activity.id) {
+                <div class="activity-item">
+                  @if (activity.actor) {
+                    <!-- Avatar with badge for actor activities -->
+                    <div class="avatar-wrapper">
+                      <ds-avatar 
+                        [type]="'initials'"
+                        [initials]="activity.actorInitials || ''"
+                        size="md" />
+                      
+                      <div class="avatar-badge">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32" fill="none">
+                          <path d="M33.9862 5.51709H23.1724V8.82743H26.0413C26.2841 8.82743 26.4827 9.02606 26.4827 9.26881V12.7998C26.4827 13.0426 26.2841 13.2412 26.0413 13.2412H23.1724V14.3447H26.0413C26.2841 14.3447 26.4827 14.5433 26.4827 14.7861V18.3171C26.4827 18.5598 26.2841 18.7585 26.0413 18.7585H23.1724V19.8619H26.0413C26.2841 19.8619 26.4827 20.0605 26.4827 20.3033V23.8343C26.4827 24.0771 26.2841 24.2757 26.0413 24.2757H23.1724V26.2619C23.1724 26.7496 23.0267 27.2043 22.7773 27.5861H27.5862L32 31.9999V27.5861H33.9862C34.7167 27.5861 35.3103 26.9924 35.3103 26.2619V6.84123C35.3103 6.11075 34.7167 5.51709 33.9862 5.51709ZM32 23.8343C32 24.0771 31.8013 24.2757 31.5586 24.2757H28.0276C27.7848 24.2757 27.5862 24.0771 27.5862 23.8343V20.3033C27.5862 20.0605 27.7848 19.8619 28.0276 19.8619H31.5586C31.8013 19.8619 32 20.0605 32 20.3033V23.8343ZM32 18.3171C32 18.5598 31.8013 18.7585 31.5586 18.7585H28.0276C27.7848 18.7585 27.5862 18.5598 27.5862 18.3171V14.7861C27.5862 14.5433 27.7848 14.3447 28.0276 14.3447H31.5586C31.8013 14.3447 32 14.5433 32 14.7861V18.3171ZM32 12.7998C32 13.0426 31.8013 13.2412 31.5586 13.2412H28.0276C27.7848 13.2412 27.5862 13.0426 27.5862 12.7998V9.26881C27.5862 9.02606 27.7848 8.82743 28.0276 8.82743H31.5586C31.8013 8.82743 32 9.02606 32 9.26881V12.7998Z" fill="white"/>
+                          <path d="M20.7448 0H1.32414C0.593655 0 0 0.593655 0 1.32414V26.2621C0 26.9926 0.593655 27.5862 1.32414 27.5862H3.31034V32L7.72414 27.5862H20.7448C21.4753 27.5862 22.069 26.9926 22.069 26.2621V1.32414C22.069 0.593655 21.4753 0 20.7448 0ZM7.72414 23.8345C7.72414 24.0772 7.52552 24.2759 7.28276 24.2759H3.75172C3.50897 24.2759 3.31034 24.0772 3.31034 23.8345V20.3034C3.31034 20.0607 3.50897 19.8621 3.75172 19.8621H7.28276C7.52552 19.8621 7.72414 20.0607 7.72414 20.3034V23.8345ZM7.72414 18.3172C7.72414 18.56 7.52552 18.7586 7.28276 18.7586H3.75172C3.50897 18.7586 3.31034 18.56 3.31034 18.3172V14.7862C3.31034 14.5434 3.50897 14.3448 3.75172 14.3448H7.28276C7.52552 14.3448 7.72414 14.5434 7.72414 14.7862V18.3172ZM7.72414 12.8C7.72414 13.0428 7.52552 13.2414 7.28276 13.2414H3.75172C3.50897 13.2414 3.31034 13.0428 3.31034 12.8V9.26897C3.31034 9.02621 3.50897 8.82759 3.75172 8.82759H7.28276C7.52552 8.82759 7.72414 9.02621 7.72414 9.26897V12.8ZM7.72414 7.28276C7.72414 7.52552 7.52552 7.72414 7.28276 7.72414H3.75172C3.50897 7.72414 3.31034 7.52552 3.31034 7.28276V3.75172C3.31034 3.50897 3.50897 3.31034 3.75172 3.31034H7.28276C7.52552 3.31034 7.72414 3.50897 7.72414 3.75172V7.28276ZM13.2414 23.8345C13.2414 24.0772 13.0428 24.2759 12.8 24.2759H9.26897C9.02621 24.2759 8.82759 24.0772 8.82759 23.8345V20.3034C8.82759 20.0607 9.02621 19.8621 9.26897 19.8621H12.8C13.0428 19.8621 13.2414 20.0607 13.2414 20.3034V23.8345ZM13.2414 18.3172C13.2414 18.56 13.0428 18.7586 12.8 18.7586H9.26897C9.02621 18.7586 8.82759 18.56 8.82759 18.3172V14.7862C8.82759 14.5434 9.02621 14.3448 9.26897 14.3448H12.8C13.0428 14.3448 13.2414 14.5434 13.2414 14.7862V18.3172ZM13.2414 12.8C13.2414 13.0428 13.0428 13.2414 12.8 13.2414H9.26897C9.02621 13.2414 8.82759 13.0428 8.82759 12.8V9.26897C8.82759 9.02621 9.02621 8.82759 9.26897 8.82759H12.8C13.0428 8.82759 13.2414 9.02621 13.2414 9.26897V12.8ZM13.2414 6.84138V7.28276C13.2414 7.52552 13.0428 7.72414 12.8 7.72414H9.26897C9.02621 7.72414 8.82759 7.52552 8.82759 7.28276V3.75172C8.82759 3.50897 9.02621 3.31034 9.26897 3.31034H12.8C13.0428 3.31034 13.2414 3.50897 13.2414 3.75172V6.84138ZM18.7586 23.8345C18.7586 24.0772 18.56 24.2759 18.3172 24.2759H14.7862C14.5434 24.2759 14.3448 24.0772 14.3448 23.8345V20.3034C14.3448 20.0607 14.5434 19.8621 14.7862 19.8621H18.3172C18.56 19.8621 18.7586 20.0607 18.7586 20.3034V23.8345ZM18.7586 18.3172C18.7586 18.56 18.56 18.7586 18.3172 18.7586H14.7862C14.5434 18.7586 14.3448 18.56 14.3448 18.3172V14.7862C14.3448 14.5434 14.5434 14.3448 14.7862 14.3448H18.3172C18.56 14.3448 18.7586 14.5434 18.7586 14.7862V18.3172ZM18.7586 12.8C18.7586 13.0428 18.56 13.2414 18.3172 13.2414H14.7862C14.5434 13.2414 14.3448 13.0428 14.3448 12.8V9.26897C14.3448 9.02621 14.5434 8.82759 14.7862 8.82759H18.3172C18.56 8.82759 18.7586 9.02621 18.7586 9.26897V12.8ZM18.7586 5.51724V7.28276C18.7586 7.52552 18.56 7.72414 18.3172 7.72414H14.7862C14.5434 7.72414 14.3448 7.52552 14.3448 7.28276V3.75172C14.3448 3.50897 14.5434 3.31034 14.7862 3.31034H18.3172C18.56 3.31034 18.7586 3.50897 18.7586 3.75172V5.51724Z" fill="white"/>
+                        </svg>
+                      </div>
+                    </div>
+                  } @else {
+                    <!-- Icon wrapper for non-actor activities -->
+                    <div class="activity-icon-wrapper">
+                      <ds-icon 
+                        [name]="activity.iconName"
+                        size="18px"
+                        color="secondary" />
+                    </div>
+                  }
+                  
+                  <div class="activity-content">
+                    <p class="activity-title">
+                      @if (activity.actor) {
+                        <span class="actor-name">{{ activity.actor }}</span>
+                        <span class="activity-text"> {{ activity.title }}</span>
+                      } @else {
+                        <span class="actor-name">{{ activity.title }}</span>
+                      }
+                    </p>
+                    @if (activity.description) {
+                      <p class="activity-description">{{ activity.description }}</p>
+                    }
+                    <div class="activity-timestamp">
+                      <ds-icon name="remixCalendarLine" size="12px" color="--color-text-tertiary" />
+                      <span>{{ activity.date }}</span>
+                    </div>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+          
+          <!-- Messages Tab Content -->
+          @if (activeTab() === 'messages') {
+            <div class="messages-list">
+              @for (message of messageThreads; track message.id) {
+                <ds-mobile-interactive-list-item-message
+                  [senderName]="message.senderName"
+                  [senderRole]="message.role"
+                  [message]="message.message"
+                  [avatarInitials]="message.senderInitials"
+                  [unread]="message.unread"
+                  (messageClick)="openMessage(message.id)">
+                </ds-mobile-interactive-list-item-message>
+              }
+            </div>
+          }
+          
+          <!-- Details Tab Content -->
+          @if (activeTab() === 'details') {
+            <div class="details-list">
+              <!-- Assignee -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-avatar
+                    [size]="'sm'"
+                    [type]="'initials'"
+                    [initials]="'R'" />
+                </div>
+                <div content-main>
+                  <div class="detail-label">Sagsbehandler</div>
+                  <div class="detail-value">Ricki Meihlen</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Technician -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-avatar
+                    [size]="'sm'"
+                    [type]="'initials'"
+                    [initials]="'M'" />
+                </div>
+                <div content-main>
+                  <div class="detail-label">Tekniker</div>
+                  <div class="detail-value">Martin Smith</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Title -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixTextBlock" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="detail-value">{{ inquiryTitle }}</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Description -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixAlignLeft" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="detail-value description-text">
+                    I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
+                  </div>
+                  <div class="detail-tag">Husholdningsapparater</div>
+                </div>
+              </ds-mobile-list-item-static>
+              
+              <!-- Photos -->
+              <ds-mobile-list-item-static [leadingSize]="'32px'">
+                <div content-leading>
+                  <ds-icon name="remixCameraLine" size="20px" color="tertiary" />
+                </div>
+                <div content-main>
+                  <div class="photo-grid">
+                    <button class="photo-add">
+                      <ds-icon name="remixAddLine" size="20px" color="tertiary" />
+                    </button>
+                    <!-- Placeholder photos -->
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                    <div class="photo-item"></div>
+                  </div>
+                </div>
+              </ds-mobile-list-item-static>
+            </div>
+          }
+        </div>
+      </div>
+    </ion-content>
+  `
+})
+export class MobileInquiryDetailPageComponent extends MobilePageBase implements AfterViewInit {
+  @ViewChild(IonContent) ionContent?: IonContent;
+  
+  // Platform detection
+  private platform = inject(Platform);
+  
+  // Computed property to check if running on native platform
+  isNativePlatform = computed(() => 
+    this.platform.is('ios') || 
+    this.platform.is('android') || 
+    this.platform.is('capacitor')
+  );
+  
+  inquiryTitle = 'Tørretumbler virker ikke';
+  activeTab = signal<string>('activity');
+  
+  tabItems: TabItem[] = [
+    { id: 'activity', label: 'Aktivitet' },
+    { id: 'messages', label: 'Beskeder', badge: 0 },
+    { id: 'details', label: 'Detaljer' }
+  ];
+  
+  activities: ActivityItem[] = [
+    {
+      id: '1',
+      type: 'assignment',
+      actor: 'Martin Smith',
+      actorInitials: 'MS',
+      title: 'er blevet tildelt som din dedikerede tekniker.',
+      timestamp: '2 dage siden',
+      date: '28. feb 2025',
+      iconName: 'remixUserAddLine'
+    },
+    {
+      id: '2',
+      type: 'assignment',
+      actor: 'Ricki Meihlen',
+      actorInitials: 'RM',
+      title: 'er blevet tildelt til at håndtere din henvendelse.',
+      timestamp: '8 dage siden',
+      date: '22. feb 2025',
+      iconName: 'remixUserLine'
+    },
+    {
+      id: '3',
+      type: 'creation',
+      title: 'Henvendelse oprettet',
+      timestamp: '8 dage siden',
+      date: '22. feb 2025',
+      iconName: 'remixAddCircleLine'
+    }
+  ];
+  
+  messageThreads: MessageThread[] = [
+    {
+      id: '1',
+      senderName: 'Ove Hindborg',
+      senderAvatar: '',
+      senderInitials: 'OH',
+      message: 'Dejligt at høre! Jeg venter på din teknikerbesøg tidsplan.',
+      role: 'Sagsbehandler',
+      timestamp: '2t siden',
+      unread: true
+    },
+    {
+      id: '2',
+      senderName: 'Martin Smith',
+      senderAvatar: '',
+      senderInitials: 'MS',
+      message: 'Dejligt at høre! Jeg venter på din teknikerbesøg tidsplan.',
+      role: 'Tekniker',
+      timestamp: '4t siden',
+      unread: true
+    }
+  ];
+  
+  unreadMessagesCount = computed(() => {
+    const count = this.messageThreads.filter(m => m.unread).length;
+    // Update badge in tab items
+    const messagesTab = this.tabItems.find(t => t.id === 'messages');
+    if (messagesTab) {
+      messagesTab.badge = count;
+    }
+    return count;
+  });
+  
+  constructor(
+    public userService: UserService,
+    private navCtrl: NavController,
+    private elementRef: ElementRef
+  ) {
+    super();
+    // Trigger initial badge update
+    this.unreadMessagesCount();
+  }
+  
+  ngAfterViewInit(): void {
+    // Initial setup if needed
+  }
+  
+  setActiveTab(tabId: string): void {
+    this.activeTab.set(tabId);
+  }
+  
+  goBack(): void {
+    this.navCtrl.back({ animation: customBackTransition });
+  }
+  
+  handleScroll(event: any): void {
+    const scrollTop = event.detail.scrollTop;
+    const threshold = 160;
+    const fadeDistance = 200;
+    const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
+    const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
+    
+    // Show title in fixed header when scrolled past threshold
+    if (scrollTop > threshold) {
+      header?.classList.add('header-scrolled');
+    } else {
+      header?.classList.remove('header-scrolled');
+    }
+    
+    // Fade out header-expandable content based on scroll
+    if (headerExpandable) {
+      const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
+      
+      // Calculate opacity (1 to 0)
+      const opacity = 1 - fadeProgress;
+      
+      // Calculate transform (0px to -20px upward)
+      const translateY = fadeProgress * -20;
+      
+      // Apply styles
+      headerExpandable.style.opacity = opacity.toString();
+      headerExpandable.style.transform = `translateY(${translateY}px)`;
+    }
+  }
+  
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+  
+  openMessage(messageId: string): void {
+    console.log('Opening message:', messageId);
+    // Navigate to message thread detail
+  }
+}
+

package/src/pages/mobile-tabs-example.component.ts

@@ -0,0 +1,146 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { UserService } from '../services/user.service';
+import { DsMobileTabsComponent, TabConfig } from '../components/ds-mobile-tabs';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsMobileActionsBottomSheetComponent, ActionResult } from '../components/bottom-sheet';
+
+@Component({
+  selector: 'app-mobile-tabs-example',
+  standalone: true,
+  imports: [DsMobileTabsComponent],
+  styles: [`
+    :host {
+      display: block;
+      height: 100vh;
+      width: 100vw;
+      position: relative;
+    }
+  `],
+  template: `
+      <ds-mobile-tabs
+        [tabs]="tabs"
+        [avatarInitials]="userService.avatarInitials()"
+        (avatarClick)="handleAvatarClick()"
+      />
+  `
+})
+export class MobileTabsExampleComponent implements OnInit {
+  constructor(
+    public userService: UserService,
+    private modalController: ModalController,
+    private router: Router
+  ) {
+    console.log('MobileTabsExampleComponent constructor');
+  }
+  
+  ngOnInit() {
+    console.log('MobileTabsExampleComponent ngOnInit');
+    // Configure user avatar globally - this is now the single source of truth
+    this.userService.setAvatarInitials('LM');
+    this.userService.setAvatarType('initials');
+  }
+  
+  tabs: TabConfig[] = [
+    {
+      id: 'home',
+      label: 'Hjem',
+      route: 'home',
+      icon: 'remixHomeSmile2Line',
+      iconActive: 'remixHomeSmile2Fill'
+    },
+    {
+      id: 'inquiries',
+      label: 'Henvendelser',
+      route: 'inquiries',
+      icon: 'remixFileList3Line',
+      iconActive: 'remixFileList3Fill'
+    },
+    {
+      id: 'announcements',
+      label: 'Fællesskab',
+      route: 'announcements',
+      icon: 'remixCommunityLine',
+      iconActive: 'remixCommunityFill'
+    },
+    {
+      id: 'handbook',
+      label: 'Håndbog',
+      route: 'handbook',
+      icon: 'remixBook2Line',
+      iconActive: 'remixBook2Fill'
+    }
+  ];
+  
+  async handleAvatarClick(): Promise<void> {
+    console.log('Avatar clicked - opening profile bottom sheet');
+    
+    const sheet = await this.modalController.create({
+      component: DsMobileActionsBottomSheetComponent,
+      componentProps: {
+        customActionGroups: [
+          {
+            actions: [
+              {
+                action: 'profile',
+                title: 'Min profil',
+                icon: 'remixUser3Line',
+                destructive: false
+              },
+              {
+                action: 'settings',
+                title: 'Indstillinger',
+                icon: 'remixSettings3Line',
+                destructive: false
+              },
+              {
+                action: 'whitelabel-demo',
+                title: 'Whitelabel Demo',
+                icon: 'remixPaletteLine',
+                destructive: false
+              }
+            ]
+          },
+          {
+            actions: [
+              {
+                action: 'logout',
+                title: 'Log ud',
+                icon: 'remixLogoutBoxLine',
+                destructive: true
+              }
+            ]
+          }
+        ]
+      },
+      // Auto-height: no breakpoints, no handle
+      cssClass: 'ds-bottom-sheet auto-height'
+    });
+    
+    await sheet.present();
+    
+    const result = await sheet.onWillDismiss<ActionResult>();
+    if (result.data?.action) {
+      console.log('Profile action selected:', result.data.action);
+      
+      switch (result.data.action) {
+        case 'logout':
+          console.log('Logging out...');
+          // TODO: Implement logout logic
+          break;
+        case 'profile':
+          console.log('Opening profile...');
+          // TODO: Navigate to profile page
+          break;
+        case 'settings':
+          console.log('Opening settings...');
+          // TODO: Navigate to settings page
+          break;
+        case 'whitelabel-demo':
+          console.log('Opening whitelabel demo...');
+          this.router.navigate(['/whitelabel-demo']);
+          break;
+      }
+    }
+  }
+}