@propbinder/mobile-design 0.0.2 → 0.0.21

package/src/pages/inquiries.example.ts

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

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