@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/pages/handbook.page.ts

@@ -0,0 +1,298 @@
+import { Component } from '@angular/core';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { 
+  DsMobileContentComponent,
+  DsMobileContentSectionComponent,
+  SectionHeaderComponent,
+  ContentRowComponent
+} from '../components/content';
+import { DsMobileHandbookFolderComponent } from '../components/handbook-folder';
+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,
+    DsMobileContentComponent,
+    DsMobileContentSectionComponent,
+    SectionHeaderComponent,
+    ContentRowComponent,
+    DsMobileHandbookFolderComponent
+  ],
+  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
+      title="Håndbog"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <ds-mobile-content>
+        <ds-mobile-content-section>
+          <div class="folders-grid">
+            <ds-mobile-handbook-folder
+              [variant]="'pink'"
+              [iconName]="'remixLightbulbLine'"
+              [itemCount]="8"
+              [label]="'Forsyninger'"
+              [items]="utilitiesItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'success'"
+              [iconName]="'remixKey2Line'"
+              [itemCount]="4"
+              [label]="'Sikkerhedsudstyr'"
+              [items]="sikkerhedsudstyrItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'blue'"
+              [iconName]="'remixFileList3Line'"
+              [itemCount]="8"
+              [label]="'Servicekontrakter'"
+              [items]="serviceContractsItems">
+            </ds-mobile-handbook-folder>
+
+            <ds-mobile-handbook-folder
+              [variant]="'warning'"
+              [iconName]="'remixToolsLine'"
+              [itemCount]="5"
+              [label]="'Udstyr'"
+              [items]="equipmentItems">
+            </ds-mobile-handbook-folder>
+          </div>
+        </ds-mobile-content-section>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `
+})
+export class MobileHandbookPageComponent {
+  // 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' }
+      ]
+    },
+    {
+      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');
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+}
+

package/src/pages/home.page.ts

@@ -0,0 +1,192 @@
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular/standalone';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { 
+  DsMobileHeaderContentComponent,
+  DsMobileHeaderContentTileComponent,
+  TileIconComponent,
+  TileContentComponent,
+  TileLabelComponent,
+  TileValueComponent
+} from '../components/header-content';
+import { 
+  DsMobileContentComponent,
+  DsMobileContentSectionComponent,
+  SectionHeaderComponent,
+  ContentRowComponent
+} from '../components/content';
+import { UserService } from '../services/user.service';
+
+@Component({
+  selector: 'app-home-page',
+  standalone: true,
+  imports: [
+    DsIconComponent,
+    DsMobilePageMainComponent,
+    DsMobileHeaderContentComponent,
+    DsMobileHeaderContentTileComponent,
+    TileIconComponent,
+    TileContentComponent,
+    TileLabelComponent,
+    TileValueComponent,
+    DsMobileContentComponent,
+    DsMobileContentSectionComponent,
+    SectionHeaderComponent,
+    ContentRowComponent
+  ],
+  styles: [`
+    /* Placeholder grey boxes for content */
+    .grey-box {
+      height: 120px;
+      border-radius: 12px;
+      background: var(--color-background-neutral-tertiary);
+      flex: 1;
+    }
+
+    .grey-box.clickable {
+      background: var(--color-background-brand);
+      cursor: pointer;
+      transition: transform var(--transition-duration-fast) var(--ease-smooth);
+    }
+
+    .grey-box.clickable:active {
+      transform: scale(0.98);
+    }
+  `],
+  template: `
+    <ds-mobile-page-main
+      title="Hjem"
+      headerTitle="Velkommen, Lars"
+      headerSubtitle="Din lejebolig på et øjeblik."
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Property info tiles in header -->
+      <ds-mobile-header-content header-content>
+        <ds-mobile-header-content-tile>
+          <tile-icon>
+              <ds-icon name="remixHome4Line" size="20px" color="#DFE4FF" />
+          </tile-icon>
+          <tile-content>
+            <tile-label>Areal</tile-label>
+            <tile-value>120 m²</tile-value>
+          </tile-content>
+        </ds-mobile-header-content-tile>
+
+        <ds-mobile-header-content-tile>
+          <tile-icon>
+              <ds-icon name="remixCollageLine" size="20px" color="#DFE4FF" />
+          </tile-icon>
+          <tile-content>
+            <tile-label>Værelser</tile-label>
+            <tile-value>3 værelser</tile-value>
+          </tile-content>
+        </ds-mobile-header-content-tile>
+      </ds-mobile-header-content>
+      
+      <!-- Main page content -->
+      <ds-mobile-content>
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <!-- Purple box - clickable with brand background -->
+        <content-row>
+          <div class="grey-box clickable" (click)="navigateToDetail()"></div>
+        </content-row>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="half"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+          </content-row>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+
+        <ds-mobile-content-section>
+          <section-header width="third"></section-header>
+          <content-row>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+            <div class="grey-box"></div>
+          </content-row>
+        </ds-mobile-content-section>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `
+})
+export class MobileHomePageComponent {
+  constructor(
+    private navCtrl: NavController,
+    public userService: UserService
+  ) {
+    console.log('MobileHomePageComponent constructor');
+  }
+
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+
+  navigateToDetail(): void {
+    // Navigation removed - home/detail page was deleted
+    console.log('Navigate to detail (page removed)');
+  }
+}
+

package/src/pages/index.ts

@@ -0,0 +1,9 @@
+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 './whitelabel-demo.page';