@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,415 @@
+import { Component, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsIconComponent, DsBadgeComponent } from '@propbinder/design-system';
+import { DsMobilePageDetailsComponent } from '../components/page-details';
+import { DsMobileInteractiveListItemMessageComponent } from '../components/interactive-list-item-message';
+import { DsMobileListItemComponent } from '../components/list-item/ds-mobile-list-item';
+import { DsMobileLightboxService, type LightboxImage } from '../components/lightbox';
+import { DsMobileChatModalService, type ChatModalData } from '../components/chat-modal';
+import { DsAvatarWithBadgeComponent } from '../components/avatar-with-badge';
+import { DsMobileCardInlineBannerComponent } from '../components/card-inline-banner';
+import { DsMobileSectionComponent } from '../components/section';
+import { DsMobileInlinePhotoComponent } from '../components/inline-photo';
+import { UserService } from '../services/user.service';
+import { type InlineTabItem } from '../components/inline-tabs';
+
+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,
+    DsIconComponent,
+    DsAvatarWithBadgeComponent,
+    DsMobilePageDetailsComponent,
+    DsMobileInteractiveListItemMessageComponent,
+    DsMobileListItemComponent,
+    DsBadgeComponent,
+    DsMobileCardInlineBannerComponent,
+    DsMobileSectionComponent,
+    DsMobileInlinePhotoComponent
+  ],
+  host: {
+    class: 'ion-page'
+  },
+  styleUrls: [
+    './inquiry-detail.example.css'
+  ],
+  template: `
+    <ds-mobile-page-details
+      [title]="inquiryTitle"
+      [tabs]="tabItems"
+      [activeTab]="activeTab()"
+      (tabChange)="setActiveTab($event)"
+      (back)="goBack()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Messages Tab Content -->
+      @if (activeTab() === 'messages') {
+        <ds-mobile-section contentGap="0">
+          @for (message of messageThreads; track message.id) {
+            <ds-mobile-interactive-list-item-message
+              [senderName]="message.senderName"
+              [senderRole]="message.role"
+              [timestamp]="message.timestamp"
+              [message]="message.message"
+              [avatarInitials]="message.senderInitials"
+              [unread]="message.unread"
+              (messageClick)="openMessage(message.id)">
+            </ds-mobile-interactive-list-item-message>
+          }
+        </ds-mobile-section>
+      }
+      
+      <!-- Details Tab Content -->
+      @if (activeTab() === 'details') {
+        <!-- Unread Messages Banner -->
+        @if (hasUnreadMessages()) {
+          <ds-mobile-section>
+            <ds-mobile-card-inline-banner
+              [title]="'Du har ulæste beskeder'"
+              [unreadCount]="3"
+              [layout]="'compact'"
+              (bannerClick)="navigateToMessagesTab()">
+            </ds-mobile-card-inline-banner>
+          </ds-mobile-section>
+        }
+        
+        <!-- All Details in One Section -->
+        <ds-mobile-section contentGap="0">
+          <!-- Assignee -->
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+            <div content-leading>
+              <ds-avatar-with-badge
+                [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>
+          
+          <!-- Technician -->
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+            <div content-leading>
+              <ds-avatar-with-badge
+                [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>
+          
+          <!-- Creation Date -->
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true" [align]="'center'">
+            <ds-icon content-leading name="remixTimeLine" size="20px" color="tertiary" />
+            <div content-main>
+              <div class="detail-value">22. feb 2025</div>
+            </div>
+          </ds-mobile-list-item>
+          
+          <!-- Title -->
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true" [align]="'center'">
+            <ds-icon content-leading name="remixTextBlock" size="20px" color="tertiary" />
+            <div content-main>
+              <div class="detail-value">{{ inquiryTitle }}</div>
+            </div>
+          </ds-mobile-list-item>
+          
+          <!-- Description -->
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+            <ds-icon content-leading name="remixAlignLeft" size="20px" color="tertiary" />
+            <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>
+              <ds-badge content="Husholdningsapparater" size="sm"/>
+            </div>
+          </ds-mobile-list-item>
+          
+          <!-- Photos -->
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="false">
+            <ds-icon content-leading name="remixCameraLine" size="20px" color="tertiary" />
+            <div content-main>
+              <ds-mobile-inline-photo 
+                [images]="photoUrls"
+                [useGrid]="false"
+                (photoClick)="openPhotoLightbox($event.index)" />
+            </div>
+          </ds-mobile-list-item>
+        </ds-mobile-section>
+      }
+    </ds-mobile-page-details>
+  `
+})
+export class MobileInquiryDetailPageComponent {
+  inquiryTitle = 'Tørretumbler virker ikke';
+  activeTab = signal<string>('details');
+  
+  tabItems: InlineTabItem[] = [
+    { id: 'details', label: 'Detaljer' },
+    { id: 'messages', label: 'Beskeder', badge: 0 }
+  ];
+  
+  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: 'Martin Smith har overtaget din henvendelse og vil kontakte dig snart.',
+      role: 'Tekniker',
+      timestamp: '',
+      unread: false
+    }
+  ];
+  
+  unreadMessagesCount = computed(() => {
+    const count = this.messageThreads.length;
+    // Update badge in tab items
+    const messagesTab = this.tabItems.find(t => t.id === 'messages');
+    if (messagesTab) {
+      messagesTab.badge = count;
+    }
+    return count;
+  });
+  
+  // Photos for lightbox
+  photos: LightboxImage[] = [
+    { type: 'image', src: '/Assets/Dummy-photos/handyman.jpg', alt: 'Handyman', title: 'Handyman' },
+    { type: 'image', src: '/Assets/Dummy-photos/balcony-view.jpg', alt: 'Balcony view', title: 'Balcony view' },
+    { type: 'image', src: '/Assets/Dummy-photos/staircase.jpg', alt: 'Staircase', title: 'Staircase' },
+    { type: 'image', src: '/Assets/Dummy-photos/yard.jpg', alt: 'Yard', title: 'Yard' },
+    { type: 'image', src: '/Assets/Dummy-photos/mailboxes.jpg', alt: 'Mailboxes', title: 'Mailboxes' }
+  ];
+  
+  // Photo URLs for inline-photo component
+  get photoUrls(): string[] {
+    return this.photos.map(photo => photo.src);
+  }
+  
+  constructor(
+    public userService: UserService,
+    private lightbox: DsMobileLightboxService,
+    private chatModal: DsMobileChatModalService
+  ) {
+    // Trigger initial badge update
+    this.unreadMessagesCount();
+  }
+  
+  setActiveTab(tabId: string): void {
+    this.activeTab.set(tabId);
+  }
+  
+  goBack(): void {
+    // Navigation is handled by ds-mobile-page-details component
+    // This is just for any custom logic if needed
+  }
+  
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+  
+  /**
+   * Check if there are unread messages
+   */
+  hasUnreadMessages(): boolean {
+    return this.messageThreads.some(m => m.unread);
+  }
+  
+  /**
+   * Navigate to messages tab when banner is clicked
+   */
+  navigateToMessagesTab(): void {
+    this.setActiveTab('messages');
+  }
+  
+  async openMessage(messageId: string): Promise<void> {
+    console.log('Opening message:', messageId);
+    
+    // Find the message thread
+    const messageThread = this.messageThreads.find(m => m.id === messageId);
+    if (!messageThread) {
+      console.error('Message thread not found:', messageId);
+      return;
+    }
+    
+    // Check if this is an empty state chat (no timestamp and system message)
+    const isEmptyChat = messageThread.message.includes('har overtaget din henvendelse') && !messageThread.timestamp;
+    
+    // Prepare chat modal data
+    // In a real app, you would fetch the actual messages from your API
+    const chatData: ChatModalData = {
+      participant: {
+        id: messageId,
+        name: messageThread.senderName,
+        role: messageThread.role,
+        avatarInitials: messageThread.senderInitials,
+        avatarType: 'initials'
+      },
+      messages: isEmptyChat ? [] : [
+        // Day 1 - Yesterday morning (9:15 AM)
+        {
+          id: '1',
+          content: 'Godmorgen! Jeg ville lige følge op på din henvendelse vedrørende vedligeholdelsesplanen.',
+          senderId: messageId,
+          senderName: messageThread.senderName,
+          senderRole: messageThread.role,
+          timestamp: new Date(Date.now() - 86400000 - 32700000), // Yesterday 9:15 AM
+          isOwnMessage: false,
+          avatarInitials: messageThread.senderInitials,
+          avatarType: 'initials',
+        },
+        {
+          id: '2',
+          content: 'Vi har gennemgået din sag og identificeret den grundlæggende årsag til problemet.',
+          senderId: messageId,
+          senderName: messageThread.senderName,
+          senderRole: messageThread.role,
+          timestamp: new Date(Date.now() - 86400000 - 32520000), // Yesterday 9:18 AM (grouped with previous)
+          isOwnMessage: false,
+          avatarInitials: messageThread.senderInitials,
+          avatarType: 'initials',
+        },
+        {
+          id: '3',
+          content: 'Tak fordi du kiggede på det! Hvad fandt du?',
+          senderId: 'current-user',
+          senderName: 'You',
+          timestamp: new Date(Date.now() - 86400000 - 32100000), // Yesterday 9:25 AM (new group - 7 min gap)
+          isOwnMessage: true,
+          avatarInitials: this.userService.avatarInitials(),
+          avatarType: 'initials',
+        },
+        {
+          id: '4',
+          content: 'Kan du også sende mig vedligeholdelsesrapporten?',
+          senderId: 'current-user',
+          senderName: 'You',
+          timestamp: new Date(Date.now() - 86400000 - 31980000), // Yesterday 9:27 AM (grouped with previous)
+          isOwnMessage: true,
+          avatarInitials: this.userService.avatarInitials(),
+          avatarType: 'initials',
+        },
+        
+        // Day 1 - Yesterday afternoon (2:30 PM - large time gap)
+        {
+          id: '5',
+          content: messageThread.message,
+          senderId: messageId,
+          senderName: messageThread.senderName,
+          senderRole: messageThread.role,
+          timestamp: new Date(Date.now() - 86400000 - 13800000), // Yesterday 2:30 PM (new group - 5 hour gap)
+          isOwnMessage: false,
+          avatarInitials: messageThread.senderInitials,
+          avatarType: 'initials',
+        },
+        {
+          id: '6',
+          content: 'Jeg har vedhæftet den detaljerede rapport på dit henvendelsesdashboard. Gennemgå den gerne, når du har et øjeblik.',
+          senderId: messageId,
+          senderName: messageThread.senderName,
+          senderRole: messageThread.role,
+          timestamp: new Date(Date.now() - 86400000 - 13620000), // Yesterday 2:33 PM (grouped with previous)
+          isOwnMessage: false,
+          avatarInitials: messageThread.senderInitials,
+          avatarType: 'initials',
+        },
+        
+        // Day 2 - Today morning (10:45 AM - new day)
+        {
+          id: '7',
+          content: 'Perfekt! Jeg har gennemgået rapporten, og alt ser godt ud.',
+          senderId: 'current-user',
+          senderName: 'You',
+          timestamp: new Date(Date.now() - 7500000), // Today 10:45 AM (new group - new day)
+          isOwnMessage: true,
+          avatarInitials: this.userService.avatarInitials(),
+          avatarType: 'initials',
+        },
+        {
+          id: '8',
+          content: 'Hvornår kan vi planlægge vedligeholdelsesarbejdet?',
+          senderId: 'current-user',
+          senderName: 'You',
+          timestamp: new Date(Date.now() - 7320000), // Today 10:48 AM (grouped with previous)
+          isOwnMessage: true,
+          avatarInitials: this.userService.avatarInitials(),
+          avatarType: 'initials',
+        },
+        
+        // Day 2 - Today (just now - 2 minutes ago)
+        {
+          id: '9',
+          content: 'Dejligt at høre! Jeg kan planlægge det til næste tirsdag kl. 09.00. Passer det dig?',
+          senderId: messageId,
+          senderName: messageThread.senderName,
+          senderRole: messageThread.role,
+          timestamp: new Date(Date.now() - 120000), // 2 minutes ago (new group - several hours gap)
+          isOwnMessage: false,
+          avatarInitials: messageThread.senderInitials,
+          avatarType: 'initials',
+        },
+        {
+          id: '10',
+          content: 'Jeg sender dig en kalenderinvitation med alle detaljerne.',
+          senderId: messageId,
+          senderName: messageThread.senderName,
+          senderRole: messageThread.role,
+          timestamp: new Date(Date.now() - 60000), // 1 minute ago (grouped with previous)
+          isOwnMessage: false,
+          avatarInitials: messageThread.senderInitials,
+          avatarType: 'initials',
+        }
+      ],
+      currentUserId: 'current-user',
+      currentUserInitials: this.userService.avatarInitials(),
+      currentUserAvatarType: 'initials',
+      autoFocus: false
+    };
+    
+    // Open the chat modal
+    await this.chatModal.open(chatData);
+  }
+  
+  async openPhotoLightbox(index: number): Promise<void> {
+    await this.lightbox.openImages({
+      images: this.photos,
+      initialIndex: index,
+      showControls: true,
+      enableSwipe: true,
+      enableZoom: true,
+      showInfo: false
+    });
+  }
+}
+

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

@@ -0,0 +1,208 @@
+import { Component, OnInit, computed, effect, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { IonTabs } from '@ionic/angular/standalone';
+import { UserService } from '../services/user.service';
+import { DsMobileTabBarComponent, TabConfig } from '../components/tab-bar';
+import { ActionResult, ActionGroup } from '../components/bottom-sheet';
+import { WhitelabelDemoModalService } from './whitelabel-demo-modal.service';
+import { TrackingPermissionService } from '../services/tracking-permission.service';
+
+/**
+ * MobileTabsExampleComponent
+ *
+ * Example page using the TenantApp pattern:
+ * - Uses ion-tabs as wrapper (required for Angular routing)
+ * - Uses ds-mobile-tab-bar inside (not ds-mobile-tabs)
+ *
+ * This matches the pattern used in TenantApp for consistency.
+ */
+@Component({
+  selector: 'app-mobile-tabs-example',
+  standalone: true,
+  imports: [CommonModule, IonTabs, DsMobileTabBarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 100dvh;
+        width: 100vw;
+        position: relative;
+      }
+    `,
+  ],
+  template: `
+    <ion-tabs class="ds-tabs-wrapper">
+      <!-- Tab bar with slot="top" on desktop, slot="bottom" on mobile -->
+      <!-- Ionic automatically creates ion-tab elements from child routes -->
+      <ds-mobile-tab-bar
+        [tabs]="tabs"
+        [avatarInitials]="userService.avatarInitials()"
+        [avatarType]="userService.avatarType()"
+        [profileMenuItems]="profileMenuItems"
+        (profileActionSelected)="handleProfileAction($event)"
+      >
+      </ds-mobile-tab-bar>
+    </ion-tabs>
+  `,
+})
+export class MobileTabsExampleComponent implements OnInit {
+  private whitelabelDemoModal = inject(WhitelabelDemoModalService);
+  private trackingPermissionService = inject(TrackingPermissionService);
+  private trackedProfileMenuItems = computed<ActionGroup[]>(() => {
+    const accountActions = [
+      {
+        action: 'profile',
+        title: 'Min profil',
+        icon: 'remixUser3Line',
+        destructive: false,
+      },
+      {
+        action: 'settings',
+        title: 'Indstillinger',
+        icon: 'remixSettings3Line',
+        destructive: false,
+      },
+      {
+        action: 'appearance',
+        title: 'Udseende',
+        icon: 'remixPaletteLine',
+        destructive: false,
+      },
+    ];
+
+    if (this.trackingPermissionService.shouldShowSettingsReminder()) {
+      accountActions.push({
+        action: 'tracking-settings',
+        title: 'Sporingsindstillinger',
+        icon: 'remixSettings3Line',
+        destructive: false,
+      });
+    }
+
+    return [
+      {
+        actions: accountActions,
+      },
+      {
+        actions: [
+          {
+            action: 'language',
+            title: 'Sprog',
+            subtitle: 'Dansk',
+            flagIcon: '/Assets/country-flags/denmark.svg',
+            icon: 'remixGlobalLine',
+            destructive: false,
+            showChevron: true,
+          },
+        ],
+      },
+      {
+        actions: [
+          {
+            action: 'logout',
+            title: 'Log ud',
+            icon: 'remixLogoutBoxLine',
+            destructive: true,
+          },
+        ],
+      },
+    ];
+  });
+
+  constructor(
+    public userService: UserService,
+    private router: Router,
+  ) {
+    console.log('MobileTabsExampleComponent constructor');
+    effect(() => {
+      this.userService.setProfileMenuItems(this.trackedProfileMenuItems());
+    });
+  }
+
+  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');
+
+    // Initial status refresh ensures menu reflects past ATT choice.
+    void this.trackingPermissionService.refreshTrackingStatus();
+  }
+
+  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: 'booking',
+      label: 'Booking',
+      route: 'booking',
+      icon: 'remixCalendarCheckLine',
+      iconActive: 'remixCalendarCheckFill',
+    },
+    {
+      id: 'handbook',
+      label: 'Håndbog',
+      route: 'handbook',
+      icon: 'remixBook2Line',
+      iconActive: 'remixBook2Fill',
+    },
+  ];
+
+  /**
+   * Profile menu items configuration.
+   * Define once here - this is set globally in UserService in ngOnInit(),
+   * so it will be used by both ds-mobile-tab-bar and ds-mobile-page-main components
+   * throughout the entire application.
+   */
+  get profileMenuItems(): ActionGroup[] {
+    return this.trackedProfileMenuItems();
+  }
+
+  /**
+   * Handle profile menu action selection.
+   * The tab bar component handles the UI (opening/closing menu),
+   * this method handles the business logic.
+   *
+   * NOTE: Desktop only - called directly from tab bar.
+   * Mobile actions are handled globally in AppComponent via UserService.
+   */
+  handleProfileAction(result: ActionResult): void {
+    console.log('Profile action selected (desktop tab bar):', result.action);
+
+    // Handle appearance action here (opens modal)
+    if (result.action === 'appearance') {
+      console.log('Opening whitelabel demo...');
+      // Small delay to ensure bottom sheet is fully dismissed
+      setTimeout(async () => {
+        try {
+          await this.whitelabelDemoModal.open();
+        } catch (error) {
+          console.error('Failed to open whitelabel demo modal:', error);
+        }
+      }, 100);
+    }
+
+    // Notify globally so AppComponent can handle navigation
+    this.userService.notifyProfileAction(result);
+  }
+}