@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/examples/inquiries.example.ts

@@ -0,0 +1,273 @@
+import { Component, signal, computed, ViewChild } from '@angular/core';
+import { NavController } from '@ionic/angular/standalone';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileSectionComponent } from '../components/section';
+import { DsMobileIllustrationComponent } from '../components/illustration';
+import { DsMobileInteractiveListItemInquiryComponent } from '../components/interactive-list-item-inquiry';
+import { DsMobileFabComponent } from '../components/fab';
+import { DsMobileOfflineBannerComponent } from '../components/offline-banner';
+import { DsMobileNewInquiryModalService, NewInquiryData } from '../components/new-inquiry-modal';
+import { UserService } from '../services/user.service';
+import { customPageTransition } from '../animations/page-transitions';
+import { DsMobileInlineTabsComponent, type InlineTabItem } from '../components/inline-tabs';
+
+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,
+    DsMobileSectionComponent,
+    DsMobileIllustrationComponent,
+    DsMobileInteractiveListItemInquiryComponent,
+    DsMobileInlineTabsComponent,
+    DsMobileOfflineBannerComponent,
+    DsMobileFabComponent
+  ],
+  host: {
+    class: 'ion-page'
+  },
+  styles: [`
+    .inquiry-list-wrapper {
+      display: flex;
+      flex-direction: column;
+      margin-top: -12px;
+    }
+    
+    .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-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="Henvendelser"
+      [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>
+      }
+      
+      <!-- Filter tabs in header -->
+      <div header-content>
+        <ds-mobile-inline-tabs
+          [tabs]="tabItems"
+          [activeTab]="filterStatus()"
+          (tabChange)="setFilter($any($event))">
+        </ds-mobile-inline-tabs>
+      </div>
+      
+      <ds-mobile-section>
+        @if (filteredInquiries().length > 0) {
+          <div class="inquiry-list-wrapper">
+            @for (inquiry of filteredInquiries(); track inquiry.id) {
+              <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"
+                [enableLongPress]="false"
+                (inquiryClick)="openInquiryDetail(inquiry.id)">
+              </ds-mobile-interactive-list-item-inquiry>
+            }
+          </div>
+        } @else {
+          <!-- Empty state -->
+          <div class="empty-state">
+            <ds-mobile-illustration variant="inquiry" alt="No inquiries" />
+            <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>
+        }
+      </ds-mobile-section>
+    </ds-mobile-page-main>
+
+    <!-- FAB for creating new inquiry -->
+    <ds-mobile-fab
+      icon="remixAddLine"
+      position="bottom-right"
+      ariaLabel="Create new inquiry"
+      (clicked)="createNewInquiry()">
+    </ds-mobile-fab>
+  `
+})
+export class MobileInquiriesPageComponent {
+  @ViewChild('pageComponent') pageComponent!: DsMobilePageMainComponent;
+  
+  constructor(
+    public userService: UserService,
+    private navCtrl: NavController,
+    private newInquiryModal: DsMobileNewInquiryModalService
+  ) {}
+  
+  filterStatus = signal<'all' | 'open' | 'closed'>('all');
+  
+  tabItems: InlineTabItem[] = [
+    { 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.)
+  }
+  
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered on inquiries page');
+    
+    // Check if offline and complete immediately
+    if (this.pageComponent?.isOffline()) {
+      console.log('Cannot refresh while offline');
+      event.target.complete();
+      return;
+    }
+    
+    // Simulate loading data
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+  
+  async createNewInquiry(): Promise<void> {
+    console.log('[InquiriesPage] FAB clicked, opening modal...');
+    
+    await this.newInquiryModal.open({
+      onSubmit: async (data: NewInquiryData) => {
+        console.log('New inquiry submitted:', data);
+        
+        // In a real app, call your API to create the inquiry
+        // await this.inquiryService.createInquiry(data);
+        
+        // Add the new inquiry to the list (mock for now)
+        const newInquiry: Inquiry = {
+          id: `inquiry-${Date.now()}`,
+          title: data.title,
+          description: data.description,
+          status: 'open',
+          timestamp: 'Just now',
+          category: 'other'
+        };
+        
+        this.inquiries.update(inquiries => [newInquiry, ...inquiries]);
+        
+        // Close the modal
+        await this.newInquiryModal.close();
+      }
+    });
+  }
+}
+

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

@@ -0,0 +1,189 @@
+/* ============================================
+   PAGE-SPECIFIC STYLES
+   Note: All base styles (ion-header, ion-content, refresher, 
+   header-expandable, content-wrapper) are imported from 
+   mobile-page-base.css
+   ============================================ */
+
+/* ============================================
+   TAB CONTENT
+   ============================================ */
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+}
+
+/* Vertical connecting lines in leading content slot */
+.activity-list ds-mobile-list-item:not(:last-child) [content-leading]::after {
+  content: '';
+  position: absolute;
+  top: calc(32px + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px;
+  height: calc(100% - 2px);
+  background: var(--border-color-default, #e5e5e5);
+  z-index: 0;
+}
+
+.activity-icon-wrapper {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  background: var(--color-background-neutral-secondary, #f5f5f5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.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;
+}
+
+.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;
+}
+
+.detail-label {
+  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);
+}
+
+.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: 0 0 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: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 8px;
+}
+
+.photo-add {
+  width: 100%;
+  aspect-ratio: 1;
+  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;
+}
+
+.photo-item {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+