@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/pages/handbook.page.ts

@@ -0,0 +1,388 @@
+import { Component, ViewChild } from '@angular/core';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileSectionComponent } from '../components/section';
+import { DsMobileHandbookFolderComponent } from '../components/handbook-folder';
+import { DsMobileOfflineBannerComponent } from '../components/offline-banner';
+import { UserService } from '../services/user.service';
+import { HandbookItem } from '../components/handbook-detail-modal/ds-mobile-handbook-detail-modal';
+
+@Component({
+  selector: 'app-mobile-handbook-page',
+  standalone: true,
+  imports: [
+    DsMobilePageMainComponent,
+    DsMobileSectionComponent,
+    DsMobileHandbookFolderComponent,
+    DsMobileOfflineBannerComponent,
+  ],
+  styles: [
+    `
+      .folders-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+        justify-items: center;
+      }
+
+      /* 3 columns at tablet breakpoint (md: 768px) and above
+       Content area at this breakpoint is ~864px max */
+      @media (min-width: 768px) {
+        .folders-grid {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+
+      ds-mobile-handbook-folder {
+        width: 100%;
+      }
+    `,
+  ],
+  template: `
+    <ds-mobile-page-main
+      #pageComponent
+      title="Håndbog"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)"
+    >
+      <!-- Offline indicator -->
+      @if (pageComponent.isOffline()) {
+        <ds-mobile-offline-banner 
+          offline-indicator
+          title="Ingen internetforbindelse"
+          message="Nogle funktioner kan være utilgængelige">
+        </ds-mobile-offline-banner>
+      }
+      
+      <ds-mobile-section>
+        <div class="folders-grid">
+          <ds-mobile-handbook-folder
+            [variant]="'pink'"
+            [iconName]="'remixLightbulbLine'"
+            [itemCount]="8"
+            [label]="'Indflytningsmappe'"
+            [items]="utilitiesItems"
+          >
+          </ds-mobile-handbook-folder>
+
+          <ds-mobile-handbook-folder
+            [variant]="'success'"
+            [iconName]="'remixKey2Line'"
+            [itemCount]="4"
+            [label]="'Husorden'"
+            [items]="sikkerhedsudstyrItems"
+          >
+          </ds-mobile-handbook-folder>
+
+          <ds-mobile-handbook-folder
+            [variant]="'blue'"
+            [iconName]="'remixFileList3Line'"
+            [itemCount]="8"
+            [label]="'Parkering'"
+            [items]="serviceContractsItems"
+          >
+          </ds-mobile-handbook-folder>
+
+          <ds-mobile-handbook-folder
+            [variant]="'warning'"
+            [iconName]="'remixToolsLine'"
+            [itemCount]="5"
+            [label]="'Faciliteter'"
+            [items]="equipmentItems"
+          >
+          </ds-mobile-handbook-folder>
+        </div>
+      </ds-mobile-section>
+    </ds-mobile-page-main>
+  `,
+})
+export class MobileHandbookPageComponent {
+  @ViewChild('pageComponent') pageComponent!: DsMobilePageMainComponent;
+  
+  // Utilities folder data
+  utilitiesItems: HandbookItem[] = [
+    {
+      title: 'El',
+      description:
+        'Hovedeltavle placeret i kælderrum B-12. Nødafbryderknap er ved hovedindgangen. Alle kredsløb er mærket.',
+      contacts: [
+        {
+          name: 'ElektroTek ApS',
+          initials: 'E',
+          contactPerson: 'Lars Nielsen',
+          phoneNumber: '+45 23 45 67 89',
+        },
+      ],
+    },
+    {
+      title: 'Elektrisk diagram',
+      description:
+        'Komplet diagram over bygningens elektriske installation med alle kredsløb og afbrydere.',
+      attachments: [{ name: 'Elektrisk_Diagram.pdf', type: 'pdf' }],
+    },
+    {
+      title: 'Vandforsyning',
+      description:
+        'Hovedvandhane er placeret i kælderens tekniske rum. Individuelle lejlighedsafspærringer er i gangpanelerne. Vandtryk overvåges automatisk.',
+      contacts: [
+        {
+          name: 'VVS Hansen',
+          initials: 'V',
+          contactPerson: 'Peter Hansen',
+          phoneNumber: '+45 34 56 78 90',
+        },
+      ],
+    },
+    {
+      title: 'Varmesystem',
+      description:
+        'Fjernvarmetilslutning i kælder. Termostater i hver enhed kan justeres individuelt. Systemet vedligeholdes kvartalsvis af certificerede teknikere.',
+      contacts: [
+        {
+          name: 'Varme Service A/S',
+          initials: 'V',
+          contactPerson: 'Maria Jensen',
+          phoneNumber: '+45 45 67 89 01',
+        },
+      ],
+    },
+    {
+      title: 'Varmeanlæg dokumentation',
+      description:
+        'Teknisk dokumentation og vedligeholdelseshistorik for bygningens varmesystem.',
+      attachments: [
+        { name: 'Varmeplan.pdf', type: 'pdf' },
+        { name: 'Vedligeholdelseslog.pdf', type: 'pdf' },
+      ],
+    },
+    {
+      title: 'Internet & TV',
+      description:
+        'Fiberforbindelse i bygningen. Distributionspanel er i stueetageteknisk rum. Hver lejlighed har ethernet-stik i stue og soveværelser.',
+      contacts: [
+        {
+          name: 'TeleCom Solutions',
+          initials: 'T',
+          contactPerson: 'Anders Petersen',
+          phoneNumber: '+45 56 78 90 12',
+        },
+      ],
+    },
+    {
+      title: 'Netværksopsætning guide',
+      attachments: [{ name: 'Netværksopsætning.pdf', type: 'pdf' }],
+    },
+    {
+      title: 'Affaldshåndtering',
+      description:
+        'Affaldssorteringsstation placeret i gården. Afhentninger: Dagrenovation (man/tor), Genbrug (ons), Organisk (tir/fre). Storskrald kræver booking.',
+      attachments: [{ name: 'Affaldsretningslinjer.pdf', type: 'pdf' }],
+    },
+  ];
+
+  // Safety Equipment folder data
+  sikkerhedsudstyrItems: HandbookItem[] = [
+    {
+      title: 'Fælles områder og sikkerhed',
+      description:
+        'Trappeopgange med nødbelysning og brandsikre døre. Postkasser placeret i indgangspartiet. Hold altid flugtveje fri.',
+      images: [
+        '/Assets/Dummy-photos/staircase.jpg',
+        '/Assets/Dummy-photos/mailboxes.jpg',
+      ],
+    },
+    {
+      title: 'Hjertestarter (AED)',
+      description:
+        'Automatisk hjertestarter placeret i stueetagen ved hovedindgangen. Tilgængelig 24/7. Ingen særlig uddannelse kræves - enheden guider dig gennem processen.',
+      contacts: [
+        {
+          name: 'MediTech Service',
+          initials: 'M',
+          contactPerson: 'John Mortensen',
+          phoneNumber: '+45 12 34 56 78',
+        },
+      ],
+      attachments: [
+        {
+          name: 'Brandplan.pdf',
+          type: 'pdf',
+          url: 'https://portal-api.propbinder.com/Handbook/GetFile/50145267-d9a2-448b-a0e1-1af39d344818',
+        },
+      ],
+    },
+    {
+      title: 'Brandslukningsudstyr',
+      description:
+        'Brandslukkere placeret på hver etage. Eftersyn udføres årligt. Brandalarm aktiveres automatisk ved røg.',
+      attachments: [{ name: 'Brandplan.pdf', type: 'pdf' }],
+    },
+    {
+      title: 'Alarmsystem',
+      description:
+        'Adgangskontrol med kodesystem ved alle indgange. Kode ændres kvartalsvis. Ved indbrud kontakt straks politiet og ejendomsadministrationen.',
+      contacts: [
+        {
+          name: 'SecureHome A/S',
+          initials: 'S',
+          contactPerson: 'Henrik Johansen',
+          phoneNumber: '+45 98 76 54 32',
+        },
+      ],
+    },
+  ];
+
+  // Service Contracts folder data
+  serviceContractsItems: HandbookItem[] = [
+    {
+      title: 'Rengøringsservice',
+      description:
+        'Ugentlig rengøring af fællesarealer inklusiv indgangshal, trapper og elevatorer. Hovedrengøring kvartalsvis. Service leveres mandag-fredag, 6:00-9:00.',
+      contacts: [
+        {
+          name: 'CleanCo Denmark',
+          initials: 'C',
+          contactPerson: 'Anne Kristensen',
+          phoneNumber: '+45 89 01 23 45',
+        },
+      ],
+    },
+    {
+      title: 'Rengøringskontrakt',
+      attachments: [
+        { name: 'Rengøringskontrakt_2024.pdf', type: 'pdf' },
+        { name: 'Rengøringsplan.pdf', type: 'pdf' },
+      ],
+    },
+    {
+      title: 'Udendørs arealer',
+      description:
+        'Fælles grønne områder med bede, siddepladser og terrasse. Beboere må frit benytte området. Respektér planterne og hold området pænt.',
+      images: [
+        '/Assets/Dummy-photos/park.jpg',
+        '/Assets/Dummy-photos/yard.jpg',
+      ],
+    },
+    {
+      title: 'Havevedligeholdelse',
+      description:
+        'Professionel havepleje inklusiv plæneklipning, hækklipning og blomsterbedvedligeholdelse. Vintersnefjerning inkluderet.',
+      contacts: [
+        {
+          name: 'Green Gardens ApS',
+          initials: 'G',
+          contactPerson: 'Michael Olsen',
+          phoneNumber: '+45 90 12 34 56',
+        },
+      ],
+    },
+    {
+      title: 'Haveserviceaftale',
+      attachments: [{ name: 'Haveserviceaftale.pdf', type: 'pdf' }],
+    },
+    {
+      title: 'Vinduespolering',
+      description:
+        'Professionel vinduespoleringsservice for alle udvendige vinduer to gange årligt - forår og efterår.',
+      contacts: [
+        {
+          name: 'Crystal Clear Windows',
+          initials: 'C',
+          contactPerson: 'Lene Schmidt',
+          phoneNumber: '+45 01 23 45 67',
+        },
+      ],
+    },
+    {
+      title: 'Sikkerhedsservice',
+      description:
+        '24/7 overvågningsservice med alarmrespons. Direkte forbindelse til politi og brandvæsen.',
+      contacts: [
+        {
+          name: 'SecureHome A/S',
+          initials: 'S',
+          contactPerson: 'Henrik Johansen',
+          phoneNumber: '+45 12 34 56 78',
+        },
+      ],
+    },
+    {
+      title: 'Sikkerhedskontrakt og procedurer',
+      attachments: [
+        { name: 'Sikkerhedskontrakt.pdf', type: 'pdf' },
+        { name: 'Nødprocedurer.pdf', type: 'pdf' },
+      ],
+    },
+  ];
+
+  // Equipment folder data
+  equipmentItems: HandbookItem[] = [
+    {
+      title: 'Balkon udsigt',
+      description:
+        'Eksempel på udsigt fra øverste etagers balkoner. Flere lejligheder har privat altan med fantastisk udsyn.',
+      images: ['/Assets/Dummy-photos/balcony-view.jpg'],
+    },
+    {
+      title: 'Vaskerum',
+      description:
+        'Fælles vaskerum med 4 vaskemaskiner og 4 tørretumblere. Bookingsystem tilgængeligt via beboerportal. Maskiner accepterer betalingskort. Åbningstider: 7:00-22:00.',
+      contacts: [
+        {
+          name: 'WashTech Service',
+          initials: 'W',
+          contactPerson: 'Kirsten Berg',
+          phoneNumber: '+45 34 56 78 90',
+        },
+      ],
+    },
+    {
+      title: 'Vaskeri instruktioner',
+      attachments: [
+        { name: 'Vaskeinstruktioner.pdf', type: 'pdf' },
+        { name: 'Bookingguide.pdf', type: 'pdf' },
+      ],
+    },
+    {
+      title: 'Vedligeholdelse og reparationer',
+      description:
+        'Ved behov for reparationer eller vedligeholdelse i din lejlighed, kontakt vores hausmeister. Akutte problemer håndteres samme dag.',
+      images: ['/Assets/Dummy-photos/handyman.jpg'],
+      contacts: [
+        {
+          name: 'Hausmeister Service',
+          initials: 'H',
+          contactPerson: 'Erik Sørensen',
+          phoneNumber: '+45 56 78 90 12',
+        },
+      ],
+    },
+    {
+      title: 'Værktøjsudlån',
+      description:
+        'Basis håndværktøj tilgængeligt til beboerbrug. Kvittér for værktøj ved receptionen. Returnér inden for 48 timer.',
+      attachments: [
+        { name: 'Værktøjsliste.pdf', type: 'pdf' },
+        { name: 'Udlånspolitik.pdf', type: 'pdf' },
+      ],
+    },
+  ];
+
+  constructor(public userService: UserService) {}
+
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    
+    // Check if offline and complete immediately
+    if (this.pageComponent?.isOffline()) {
+      console.log('Cannot refresh while offline');
+      event.target.complete();
+      return;
+    }
+    
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+}

package/src/pages/home.page.ts

@@ -0,0 +1,303 @@
+import { Component, computed, signal, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { DsButtonComponent } from '@propbinder/design-system';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileSectionComponent } from '../components/section';
+import { DsMobileIllustrationComponent } from '../components/illustration';
+import { DsMobilePropertyBannerComponent } from '../components/property-banner';
+import { DsMobileInteractiveListItemPostComponent } from '../components/interactive-list-item-post';
+import { DsMobileOfflineBannerComponent } from '../components/offline-banner';
+import {
+  PostContentComponent,
+  PostTextComponent,
+  PostActionsComponent,
+  ActionLikeComponent,
+  ActionCommentComponent
+} from '../components/interactive-list-item-post';
+import { DsMobileInteractiveListItemInquiryComponent } from '../components/interactive-list-item-inquiry';
+import { UserService } from '../services/user.service';
+import { PostsService } from '../services/posts.service';
+import { DsMobilePostDetailModalService } from '../components/post-detail-modal/ds-mobile-post-detail-modal.service';
+
+@Component({
+  selector: 'app-home-page',
+  standalone: true,
+  imports: [
+    DsButtonComponent,
+    DsMobilePageMainComponent,
+    DsMobileSectionComponent,
+    DsMobileIllustrationComponent,
+    DsMobilePropertyBannerComponent,
+    DsMobileInteractiveListItemPostComponent,
+    DsMobileInteractiveListItemInquiryComponent,
+    DsMobileOfflineBannerComponent,
+    PostContentComponent,
+    PostTextComponent,
+    PostActionsComponent,
+    ActionLikeComponent,
+    ActionCommentComponent
+  ],
+  styles: [`
+    /* Posts list wrapper */
+    .posts-list {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* Inquiries list wrapper */
+    .inquiries-list {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* Empty state */
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      text-align: center;
+    }
+    
+    .empty-state ds-button {
+      display: block;
+      margin-top: 16px;
+    }
+    
+    .empty-state ds-button::ng-deep .btn {
+      width: 100%;
+      border-radius: 9999px;
+    }
+    
+    .empty-state-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      color: var(--color-text-primary);
+      margin-top: -16px;
+      z-index: 4;
+    }
+    
+    .empty-state-description {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      color: var(--color-text-secondary);
+      margin: 0;
+    }
+  `],
+  template: `
+    <ds-mobile-page-main
+      #pageComponent
+      title="Hjem"
+      headerTitle="Velkommen, Lars"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Offline indicator -->
+      @if (pageComponent.isOffline()) {
+        <ds-mobile-offline-banner 
+          offline-indicator
+          title="Ingen internetforbindelse"
+          message="Nogle funktioner kan være utilgængelige">
+        </ds-mobile-offline-banner>
+      }
+      
+      <!-- Property Banner in Header -->
+      <ds-mobile-property-banner 
+        header-content
+        address="Toftegårds Allé 5A, 2. tv."
+        photoUrl="/Assets/Dummy-photos/building.jpg">
+      </ds-mobile-property-banner>
+      
+      <!-- Recent Community Posts Section (with content) -->
+      <ds-mobile-section 
+        headline="Seneste opslag"
+        linkText="Se alle"
+        (linkClick)="navigateToCommunity()">
+        
+        <div class="posts-list">
+          @for (post of recentPosts(); track post.id) {
+            <ds-mobile-interactive-list-item-post
+              [authorName]="post.authorName"
+              [authorRole]="post.authorRole"
+              [timestamp]="post.timestamp"
+              [avatarType]="post.avatarType"
+              [avatarSrc]="post.avatarSrc || ''"
+              [avatarInitials]="post.avatarInitials || ''"
+              [showBadge]="post.showBadge || false"
+              [clickable]="true"
+              [enableLongPress]="false"
+              (postClick)="openPost(post.id)"
+              (commentClick)="openPost(post.id, true)">
+              
+              <post-content>
+                @if (post.content) {
+                  <post-text>{{ post.content }}</post-text>
+                }
+              </post-content>
+              
+              <post-actions>
+                <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+              </post-actions>
+            </ds-mobile-interactive-list-item-post>
+          }
+        </div>
+      </ds-mobile-section>
+      
+      <!-- Recent Community Posts Section (empty state) -->
+      <ds-mobile-section>
+        <div class="empty-state">
+          <ds-mobile-illustration variant="post" alt="No posts" />
+          <h3 class="empty-state-title">Ingen opslag endnu</h3>
+          <p class="empty-state-description">Der er ingen opslag i fællesområdet i øjeblikket</p>
+          
+          <ds-button 
+            variant="secondary" 
+            trailingIcon="remixArrowRightSLine"
+            (click)="navigateToCommunity()">
+            Gå til fællesområdet
+          </ds-button>
+        </div>
+      </ds-mobile-section>
+      
+      <!-- Open Inquiries Section (with content) -->
+      <ds-mobile-section 
+        headline="Åbne henvendelser"
+        linkText="Se alle"
+        (linkClick)="navigateToInquiries()">
+        
+        <div class="inquiries-list">
+          @for (inquiry of openInquiries(); track inquiry.id) {
+            <ds-mobile-interactive-list-item-inquiry
+              [title]="inquiry.title"
+              [description]="inquiry.description"
+              [status]="inquiry.status"
+              [timestamp]="inquiry.timestamp"
+              [iconName]="'remixTodoLine'"
+              [clickable]="true"
+              [showChevron]="false"
+              [enableLongPress]="false"
+              (inquiryClick)="openInquiryDetail(inquiry.id)">
+            </ds-mobile-interactive-list-item-inquiry>
+          }
+        </div>
+      </ds-mobile-section>
+      
+      <!-- Open Inquiries Section (empty state) -->
+      <ds-mobile-section>
+        <div class="empty-state">
+          <ds-mobile-illustration variant="inquiry" alt="No inquiries" />
+          <h3 class="empty-state-title">Ingen åbne henvendelser</h3>
+          <p class="empty-state-description">Du har ingen åbne henvendelser i øjeblikket</p>
+          
+          <ds-button 
+            variant="secondary" 
+            trailingIcon="remixArrowRightSLine"
+            (click)="navigateToInquiries()">
+            Gå til henvendelser
+          </ds-button>
+        </div>
+      </ds-mobile-section>
+    </ds-mobile-page-main>
+  `
+})
+
+export class MobileHomePageComponent {
+  @ViewChild('pageComponent') pageComponent!: DsMobilePageMainComponent;
+  
+  // Get recent posts from PostsService - exclude pinned post (post-4) and limit to 3
+  recentPosts = computed(() => 
+    this.postsService.posts()
+      .filter(post => post.id !== 'post-4') // Exclude pinned post
+      .slice(0, 3)
+  );
+  
+  // Mock inquiry data
+  private allInquiries = signal([
+    {
+      id: '1',
+      title: 'Tørretumbler virker ikke',
+      description: 'I de sidste tre dage har jeg oplevet vedvarende problemer med tørretumbleren. Den starter, men stopper efter få minutter.',
+      status: 'open' as const,
+      timestamp: '12 dage siden'
+    },
+    {
+      id: '2',
+      title: 'Problem med vandtryk',
+      description: 'Lavt vandtryk i badeværelseshåndvasken. Det er blevet gradvist værre i løbet af den sidste uge.',
+      status: 'open' as const,
+      timestamp: '5 dage siden'
+    },
+    {
+      id: '3',
+      title: 'Varme virker ikke ordentligt',
+      description: 'Varmesystemet holder ikke den indstillede temperatur. Lejligheden er meget koldere, end den burde være.',
+      status: 'closed' as const,
+      timestamp: '2 måneder siden'
+    }
+  ]);
+  
+  // Filter for open inquiries and limit to 3
+  openInquiries = computed(() => 
+    this.allInquiries()
+      .filter(inquiry => inquiry.status === 'open')
+      .slice(0, 3)
+  );
+  
+  constructor(
+    private router: Router,
+    public userService: UserService,
+    private postsService: PostsService,
+    private postModal: DsMobilePostDetailModalService
+  ) {
+    console.log('MobileHomePageComponent constructor');
+  }
+
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+
+  async openPost(postId: string, focusComment: boolean = false): Promise<void> {
+    console.log('Opening post:', postId, 'Focus comments:', focusComment);
+    
+    const post = this.postsService.getPostById(postId);
+    
+    if (post) {
+      // Convert Post model to modal format (add postId and focusComment)
+      const postData = {
+        ...post,
+        postId: post.id,
+        avatarType: post.avatarType === 'icon' ? undefined : post.avatarType,
+        focusComment
+      };
+      
+      await this.postModal.open(postData, {
+        currentUserName: 'Lars Mikkelsen',
+        currentUserInitials: this.userService.avatarInitials()
+      });
+    }
+  }
+  
+  openInquiryDetail(inquiryId: string): void {
+    console.log('Opening inquiry:', inquiryId);
+    this.router.navigate(['/inquiry-detail', inquiryId]);
+  }
+  
+  navigateToCommunity(): void {
+    console.log('Navigating to community page');
+    this.router.navigate(['/announcements']);
+  }
+  
+  navigateToInquiries(): void {
+    console.log('Navigating to inquiries page');
+    this.router.navigate(['/inquiries']);
+  }
+}
+

package/src/pages/index.ts

@@ -0,0 +1,11 @@
+export * from './community.page';
+export * from './handbook.page';
+export * from './home.page';
+export * from './inquiries.example';
+export * from './inquiry-detail.example';
+export * from './mobile-tabs-example.component';
+export * from './post-create.page';
+export * from './post-detail.page';
+export * from './sign-in.page';
+export * from './whitelabel-demo-modal.component';
+export * from './whitelabel-demo-modal.service';