@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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