@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/pages/handbook.page.ts

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

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

@@ -1,11 +0,0 @@
-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';