@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/examples/inquiries.example.ts

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

@@ -1,189 +0,0 @@
-/* ============================================
-   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;
-}
-