@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/pages/inquiries.example.ts

@@ -0,0 +1,212 @@
+import { Component, signal, computed, effect } from '@angular/core';
+import { NavController } from '@ionic/angular/standalone';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileContentComponent } from '../components/content';
+import { DsMobileInteractiveListItemInquiryComponent } from '../components/interactive-list-item-inquiry';
+import { DsIconComponent } from '@propbinder/design-system';
+import { UserService } from '../services/user.service';
+import { customPageTransition } from '../animations/page-transitions';
+import { DsMobileTabBarComponent, type TabItem } from '../components/tab-bar';
+
+interface Inquiry {
+  id: string;
+  title: string;
+  description: string;
+  status: 'open' | 'closed';
+  timestamp: string;
+  category: 'maintenance' | 'plumbing' | 'electrical' | 'heating' | 'security' | 'appliance' | 'other';
+}
+
+@Component({
+  selector: 'app-mobile-inquiries-page',
+  standalone: true,
+  imports: [
+    DsMobilePageMainComponent,
+    DsMobileContentComponent,
+    DsMobileInteractiveListItemInquiryComponent,
+    DsIconComponent,
+    DsMobileTabBarComponent
+  ],
+  host: {
+    class: 'ion-page'
+  },
+  styles: [`
+    .inquiries-container {
+      display: flex;
+      flex-direction: column;
+      max-width: 640px;
+    }
+    
+    .inquiry-list-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* Remove custom dividers - now handled by ds-mobile-list-item */
+    
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      text-align: center;
+    }
+    
+    .empty-state-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      color: var(--color-text-primary);
+      margin: 16px 0 8px 0;
+    }
+    
+    .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
+      title="Henvendelser"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()">
+      
+      <!-- Filter tabs in header -->
+      <div header-content>
+        <ds-mobile-tab-bar
+          [tabs]="tabItems"
+          [activeTab]="filterStatus()"
+          (tabChange)="setFilter($any($event))">
+        </ds-mobile-tab-bar>
+      </div>
+      
+      <ds-mobile-content>
+        <div class="inquiries-container">
+          @if (filteredInquiries().length > 0) {
+              <div class="inquiry-list-wrapper">
+              @for (inquiry of filteredInquiries(); track inquiry.id; let idx = $index) {
+                  <ds-mobile-interactive-list-item-inquiry
+                    [title]="inquiry.title"
+                    [description]="inquiry.description"
+                  [status]="inquiry.status"
+                    [timestamp]="inquiry.timestamp"
+                    [iconName]="getInquiryIcon(inquiry.category)"
+                    [clickable]="true"
+                    [showChevron]="false"
+                    (inquiryClick)="openInquiryDetail(inquiry.id)"
+                    (longPress)="showInquiryActions(inquiry.id)">
+                  </ds-mobile-interactive-list-item-inquiry>
+
+                }
+              </div>
+          } @else {
+            <!-- Empty state -->
+            <div class="empty-state">
+              <ds-icon name="remixInboxLine" size="48px" color="tertiary" />
+              <h3 class="empty-state-title">Ingen henvendelser endnu</h3>
+              <p class="empty-state-description">
+                @if (filterStatus() === 'open') {
+                  Du har ingen åbne henvendelser
+                } @else if (filterStatus() === 'closed') {
+                  Du har ingen lukkede henvendelser
+                } @else {
+                  Du har ikke oprettet nogen henvendelser endnu
+                }
+              </p>
+            </div>
+          }
+        </div>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `
+})
+export class MobileInquiriesPageComponent {
+  constructor(
+    public userService: UserService,
+    private navCtrl: NavController
+  ) {}
+  
+  filterStatus = signal<'all' | 'open' | 'closed'>('all');
+  
+  tabItems: TabItem[] = [
+    { id: 'all', label: 'Alle' },
+    { id: 'open', label: 'Åben' },
+    { id: 'closed', label: 'Lukket' }
+  ];
+  
+  inquiries = signal<Inquiry[]>([
+    {
+      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',
+      timestamp: '12 dage siden',
+      category: 'appliance'
+    },
+    {
+      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',
+      timestamp: '5 dage siden',
+      category: 'plumbing'
+    },
+    {
+      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',
+      timestamp: '2 måneder siden',
+      category: 'heating'
+    }
+  ]);
+  
+  // Computed signals that automatically update when dependencies change
+  filteredInquiries = computed(() => {
+    const all = this.inquiries();
+    const status = this.filterStatus();
+    
+    if (status === 'all') {
+      return all;
+    } else if (status === 'open') {
+      return all.filter(i => i.status === 'open');
+    } else {
+      return all.filter(i => i.status === 'closed');
+    }
+  });
+  
+  openInquiries = computed(() => {
+    return this.inquiries().filter(i => i.status === 'open');
+  });
+  
+  closedInquiries = computed(() => {
+    return this.inquiries().filter(i => i.status === 'closed');
+  });
+  
+  setFilter(status: 'all' | 'open' | 'closed'): void {
+    this.filterStatus.set(status);
+  }
+  
+  getInquiryIcon(category: string): string {
+    return 'remixTodoLine';
+  }
+  
+  openInquiryDetail(inquiryId: string): void {
+    console.log('Opening inquiry:', inquiryId);
+    // Navigate to inquiry detail page with custom transition (absolute path outside tabs for animations)
+    this.navCtrl.navigateForward([`/inquiry-detail/${inquiryId}`], {
+      animation: customPageTransition
+    });
+  }
+  
+  showInquiryActions(inquiryId: string): void {
+    console.log('Showing actions for inquiry:', inquiryId);
+    // Show bottom sheet with actions (edit, delete, etc.)
+  }
+}
+

package/src/pages/inquiry-detail.example.css

@@ -0,0 +1,434 @@
+/* ============================================
+   FIXED HEADER
+   ============================================ */
+
+ion-header {
+  --background: var(--color-brand-secondary, #5d5fef);
+  height: 72px;
+  min-height: 72px;
+}
+
+ion-toolbar {
+  --background: var(--color-brand-secondary, #5d5fef);
+  --color: white;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --min-height: 72px;
+  height: 100%;
+  min-height: 72px;
+}
+
+ion-toolbar ion-title {
+  transition: transform 0.2s ease, opacity 0.2s ease !important;
+}
+
+.header-detail {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 20px;
+  height: 100%;
+}
+
+.back-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  color: white;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.back-button:active {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.header-detail__title {
+  position: absolute;
+  left: 64px;
+  transform: translateY(-100%);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: white;
+  opacity: 0 !important;
+  pointer-events: none;
+  transition: transform 0.2s ease, opacity 0.2s ease !important;
+  margin: 0;
+  padding: 0;
+  --color: white;
+  text-align: left !important;
+}
+
+/* Show title when scrolled */
+.header-scrolled .header-detail__title {
+  opacity: 1 !important;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+@media (min-width: 768px) {
+  .header-detail {
+    padding: 16px 24px;
+  }
+}
+
+/* ============================================
+   ION-CONTENT
+   ============================================ */
+
+ion-content {
+  --background: var(--color-brand-secondary);
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  border-radius: 24px 24px 0 0;
+  overflow: hidden;
+}
+
+/* iOS-specific: White background for bottom overshoot */
+.plt-ios ion-content {
+  --background: var(--color-background-neutral-primary);
+}
+
+/* Desktop only: remove bottom radius */
+@media (min-width: 768px) {
+  ion-content {
+    border-radius: 24px 24px 0 0;
+  }
+}
+
+ion-content::part(scroll) {
+  -webkit-overflow-scrolling: touch;
+  /* Flex container for content to expand properly */
+  display: flex;
+  flex-direction: column;
+}
+
+/* ============================================
+   REFRESHER
+   ============================================ */
+
+ion-refresher {
+  z-index: 0;
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* ============================================
+   HEADER EXPANDABLE - Purple Header Section
+   ============================================ */
+
+.header-expandable {
+  background: var(--color-brand-secondary);
+  padding: 32px 20px 24px 20px;
+  color: white;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+}
+
+.header-expandable-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 640px;
+}
+
+.header-expandable__text {
+  margin-bottom: 0;
+}
+
+.header-expandable__title {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  margin: 0;
+  color: white;
+}
+
+/* Desktop */
+@media (min-width: 768px) {
+  .header-expandable {
+    padding: 40px var(--content-padding-md) 32px var(--content-padding-md);
+  }
+
+  .header-expandable__title {
+    font-size: var(--font-size-3xl);
+  }
+}
+
+@media (min-width: 992px) {
+  .header-expandable {
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
+  }
+}
+
+@media (min-width: 1440px) {
+  .header-expandable {
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
+  }
+}
+
+@media (min-width: 1768px) {
+  .header-expandable {
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .header-expandable {
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
+  }
+}
+
+/* ============================================
+   CONTENT WRAPPER - White Rounded Area
+   ============================================ */
+
+.content-wrapper {
+  background: var(--color-background-neutral-primary, white);
+  border-radius: 24px 24px 0 0;
+  /* Ensure content fills available space and extends to bottom */
+  flex: 1 1 auto;
+  min-height: 100%;
+  position: relative;
+  z-index: 10;
+  /* Extend white background below for iOS overshoot using box-shadow */
+  box-shadow: 0 200vh 0 0 var(--color-background-neutral-primary);
+}
+
+.content-inner {
+  padding: 24px 20px 40px 20px;
+}
+
+@media (min-width: 768px) {
+  .content-inner {
+    padding: 32px;
+  }
+}
+
+/* ============================================
+   TAB CONTENT
+   ============================================ */
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.activity-item {
+  display: flex;
+  gap: 12px;
+  position: relative;
+}
+
+.activity-item::after {
+  content: '';
+  position: absolute;
+  bottom: -16px;
+  left: 44px;
+  right: 8px;
+  height: 1px;
+  background: var(--border-color-default, #e5e5e5);
+}
+
+.activity-item:last-child::after {
+  display: none;
+}
+
+.activity-icon-wrapper {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--color-background-neutral-secondary, #f5f5f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.avatar-badge {
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 8px;
+  background: var(--color-brand-secondary, #5d5fef);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--color-background-primary, #ffffff);
+}
+
+.avatar-badge svg {
+  width: 10px;
+  position: relative;
+  top: 1px;
+  fill: white;
+}
+
+.activity-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.activity-title {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-primary, #202227);
+  margin: 0;
+}
+
+.activity-title .actor-name {
+  font-weight: 600;
+  color: var(--text-color-default-primary, #202227);
+}
+
+.activity-title .activity-text {
+  color: var(--text-color-default-secondary, #545B66);
+  font-weight: 400;
+}
+
+.activity-description {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-secondary, #545B66);
+  margin: 0;
+}
+
+.activity-timestamp {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.26px;
+  color: var(--text-color-default-tertiary, #737373);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: -8px;
+}
+
+.details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.detail-label {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-tertiary, #737373);
+}
+
+.detail-value {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.3px;
+  color: var(--text-color-default-primary, #202227);
+}
+
+.detail-value.description-text {
+  padding: 8px 0;
+}
+
+.detail-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 12px;
+  background: var(--color-background-neutral-secondary, #f5f5f5);
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-color-default-secondary, #525866);
+  margin-top: 4px;
+  margin-bottom: 10px;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.photo-grid {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  overflow-x: auto;
+}
+
+.photo-add {
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  border: 1px dashed var(--border-color-default, #e5e5e5);
+  background: var(--color-background-neutral-secondary, #f5f5f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.photo-item {
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  background: var(--color-background-neutral-secondary, #e5e5e5);
+  flex-shrink: 0;
+}
+