@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/page-main/ds-mobile-page-main.ts

@@ -0,0 +1,421 @@
+import { Component, input, output, HostListener, ElementRef, ViewChild, AfterViewInit, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, Platform, ModalController } from '@ionic/angular/standalone';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsLogoComponent } from '../logo/ds-logo';
+import { DsMobileLoaderOverlayComponent } from '../loader-overlay';
+import { MobilePageBase } from '../shared/mobile-page-base';
+import { DsMobileProfileActionsSheetComponent, ActionResult, ActionGroup, Language } from '../bottom-sheet';
+import { disableModalShadowPointerEvents } from '../bottom-sheet/modal-shadow-fix';
+import { UserService } from '../../services/user.service';
+import { WhitelabelDemoModalService } from '../../pages/whitelabel-demo-modal.service';
+
+/**
+ * DsMobilePageMainComponent
+ *
+ * A complete mobile page layout for main/tab pages with:
+ * - Fixed header with logomark + title + avatar
+ * - Purple expandable header section (scrolls with content)
+ * - White rounded content wrapper
+ * - Pull-to-refresh support
+ * - Auto scroll title fade-in
+ *
+ * @example
+ * ```html
+ * <!-- Simple page -->
+ * <ds-mobile-page-main
+ *   title="Inquiries"
+ *   [avatarInitials]="'JD'">
+ *   <div class="page-content">
+ *     <!-- Your content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ *
+ * <!-- Page with custom header content -->
+ * <ds-mobile-page-main
+ *   title="Home"
+ *   headerTitle="Welcome, Lars"
+ *   headerSubtitle="Your rental property at a glance."
+ *   [avatarInitials]="'L'">
+ *
+ *   <div header-content class="property-tiles">
+ *     <!-- Custom header content like tiles -->
+ *   </div>
+ *
+ *   <div class="page-content">
+ *     <!-- Main page content -->
+ *   </div>
+ * </ds-mobile-page-main>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-page-main',
+  standalone: true,
+  imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileLoaderOverlayComponent],
+  styleUrls: ['../shared/mobile-page-base.css', './ds-mobile-page-main.css'],
+  host: {
+    '[style.--content-wrapper-padding]': 'contentPadding()'
+  },
+  template: `
+    <!-- Fixed header at top -->
+    <ion-header>
+      <ion-toolbar>
+        <div class="header-main">
+          <!-- Whitelabel logo (full in header, logomark used for app icon/avatars) -->
+          <ds-logo variant="full" size="lg" />
+
+          <!-- Title - fades in on scroll -->
+          <ion-title class="header-main__title">{{ title() }}</ion-title>
+
+          <!-- Avatar -->
+          <div class="header-main__actions">
+            <ds-avatar
+              [size]="'md'"
+              [type]="avatarType()"
+              [initials]="avatarInitials()"
+              [src]="avatarSrc()"
+              [iconName]="avatarIconName()"
+              (click)="handleAvatarClick()"
+              style="cursor: pointer;"
+            />
+          </div>
+        </div>
+      </ion-toolbar>
+    </ion-header>
+
+    <!-- Content with expandable header -->
+    <ion-content [scrollEvents]="true" [forceOverscroll]="true" (ionScroll)="handleScroll($event)">
+      <!-- Condensed header for Ionic scroll effects -->
+      @if (showCondensedHeader()) {
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">{{ title() }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      }
+
+      <!-- Pull to refresh (only on native iOS/Android) -->
+      @if (showRefresh() && isNativePlatform()) {
+      <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.4" [pullMin]="80" [pullMax]="240" closeDuration="600ms">
+        <ion-refresher-content pullingIcon="remixArrowDownS" refreshingSpinner="crescent"> </ion-refresher-content>
+      </ion-refresher>
+      }
+
+      <!-- Expandable header section (purple background) -->
+      <div class="header-expandable">
+        <div class="header-expandable-inner">
+          <div class="header-expandable__text">
+            <h1 class="header-expandable__title">
+              {{ headerTitle() || title() }}
+            </h1>
+            @if (headerSubtitle()) {
+            <p class="header-expandable__subtitle">{{ headerSubtitle() }}</p>
+            }
+          </div>
+
+          <!-- Slot for custom header content (e.g., property tiles) -->
+          <ng-content select="[header-content]"></ng-content>
+        </div>
+      </div>
+
+      <!-- Content wrapper -->
+      <div class="content-wrapper">
+        @if (contentLoading()) {
+          <ds-mobile-loader-overlay />
+        }
+
+        <!-- Offline indicator slot (appears at top of content) -->
+        <ng-content select="[offline-indicator]"></ng-content>
+        
+        <div class="content-inner">
+          <!-- Main page content -->
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ion-content>
+  `,
+})
+export class DsMobilePageMainComponent extends MobilePageBase implements AfterViewInit {
+  @ViewChild(IonContent) ionContent?: IonContent;
+
+  // Platform detection
+  private platform = inject(Platform);
+  private modalController = inject(ModalController);
+  private router = inject(Router);
+  private userService = inject(UserService);
+  private whitelabelDemoModal = inject(WhitelabelDemoModalService);
+
+  // Computed property to check if running on native platform
+  isNativePlatform = computed(() => this.platform.is('ios') || this.platform.is('android') || this.platform.is('capacitor'));
+
+  // Inputs - Title
+  title = input.required<string>(); // For fixed header title
+  headerTitle = input<string>(''); // Optional different title for expandable header
+  headerSubtitle = input<string>('');
+
+  // Inputs - Avatar
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  avatarInitials = input<string>('U');
+  avatarSrc = input<string>('');
+  avatarIconName = input<string>('remixUser3Line');
+
+  // Inputs - Features
+  showRefresh = input<boolean>(true);
+  showCondensedHeader = input<boolean>(true);
+  scrollThreshold = input<number>(160); // Pixels to scroll before title appears
+  headerFadeDistance = input<number>(150); // Distance over which header fades out
+  
+  /**
+   * Content wrapper padding
+   * - '0' (default) - No padding, use ds-mobile-section for content organization
+   * - '20px' - Legacy padding for content without sections
+   * - Any custom CSS padding value
+   * 
+   * Note: Bottom padding for safe area and tab bar is always preserved
+   * 
+   * @example
+   * ```html
+   * <!-- Default: sections handle padding -->
+   * <ds-mobile-page-main title="Home">
+   *   <ds-mobile-section>...</ds-mobile-section>
+   * </ds-mobile-page-main>
+   * 
+   * <!-- Legacy: content without sections -->
+   * <ds-mobile-page-main title="Home" contentPadding="20px">
+   *   <div>Content without sections...</div>
+   * </ds-mobile-page-main>
+   * ```
+   */
+  contentPadding = input<string>('0');
+
+  /**
+   * Profile menu action groups to display when avatar is clicked.
+   * If not provided, a default menu will be used (without Whitelabel Demo).
+   *
+   * @example
+   * ```typescript
+   * profileMenuItems: ActionGroup[] = [
+   *   {
+   *     actions: [
+   *       { action: 'profile', title: 'Min profil', icon: 'remixUser3Line' },
+   *       { action: 'settings', title: 'Indstillinger', icon: 'remixSettings3Line' }
+   *     ]
+   *   },
+   *   {
+   *     actions: [
+   *       { action: 'logout', title: 'Log ud', icon: 'remixLogoutBoxLine', destructive: true }
+   *     ]
+   *   }
+   * ];
+   * ```
+   */
+  profileMenuItems = input<ActionGroup[] | undefined>(undefined);
+
+  // Outputs
+  avatarClick = output<void>();
+
+  /**
+   * Emitted when a profile menu action is selected.
+   * Parent component should handle the action logic (navigation, logout, etc.).
+   */
+  profileActionSelected = output<ActionResult>();
+
+  refresh = output<any>();
+  scroll = output<any>();
+
+  constructor(private elementRef: ElementRef) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    // Initialize network monitoring
+    this.initNetworkMonitoring(this.isNativePlatform());
+  }
+
+  /**
+   * Handle avatar click - opens profile actions bottom sheet
+   */
+  async handleAvatarClick(): Promise<void> {
+    // Emit the event for any parent listeners
+    this.avatarClick.emit();
+
+    // Use input if provided, otherwise fall back to service, otherwise use default menu
+    const menuItems = this.profileMenuItems() ||
+      this.userService.profileMenuItems() || [
+        {
+          actions: [
+            {
+              action: 'profile',
+              title: 'Min profil',
+              icon: 'remixUser3Line',
+              destructive: false,
+            },
+            {
+              action: 'settings',
+              title: 'Indstillinger',
+              icon: 'remixSettings3Line',
+              destructive: false,
+            },
+            {
+              action: 'appearance',
+              title: 'Udseende',
+              icon: 'remixPaletteLine',
+              destructive: false,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              action: 'language',
+              title: 'Sprog',
+              subtitle: 'Dansk',
+              flagIcon: '/Assets/country-flags/denmark.svg',
+              icon: 'remixGlobalLine',
+              destructive: false,
+              showChevron: true,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              action: 'logout',
+              title: 'Log ud',
+              icon: 'remixLogoutBoxLine',
+              destructive: true,
+            },
+          ],
+        },
+      ];
+
+    // If no menu items configured, just emit and return
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+
+    const sheet = await this.modalController.create({
+      component: DsMobileProfileActionsSheetComponent,
+      componentProps: {
+        actionGroups: menuItems,
+        currentLanguage: 'da', // TODO: Get from language service
+        availableLanguages: [
+          {
+            code: 'da',
+            nativeName: 'Dansk',
+            englishName: 'Danish',
+            flagIcon: '/Assets/country-flags/denmark.svg',
+          },
+          {
+            code: 'en',
+            nativeName: 'English',
+            englishName: 'English',
+            flagIcon: '/Assets/country-flags/united kingdom.svg',
+          },
+          {
+            code: 'sv',
+            nativeName: 'Svenska',
+            englishName: 'Swedish',
+            flagIcon: '/Assets/country-flags/sweden.svg',
+          },
+          {
+            code: 'no',
+            nativeName: 'Norsk',
+            englishName: 'Norwegian',
+            flagIcon: '/Assets/country-flags/norway.svg',
+          },
+          {
+            code: 'de',
+            nativeName: 'Deutsch',
+            englishName: 'German',
+            flagIcon: '/Assets/country-flags/germany.svg',
+          },
+        ],
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height'],
+    });
+
+    await sheet.present();
+    disableModalShadowPointerEvents(sheet);
+
+    const result = await sheet.onWillDismiss<ActionResult>();
+    if (result.data?.action) {
+      // Handle appearance/whitelabel-demo action internally (works on all pages)
+      if (result.data.action === 'appearance' || result.data.action === 'whitelabel-demo') {
+        // Small delay to ensure bottom sheet is fully dismissed
+        setTimeout(async () => {
+          try {
+            await this.whitelabelDemoModal.open();
+          } catch (error) {
+            console.error('Failed to open whitelabel demo modal:', error);
+          }
+        }, 100);
+      }
+
+      // Emit the selected action to parent (for other actions)
+      this.profileActionSelected.emit(result.data);
+      // Also notify globally via UserService
+      this.userService.notifyProfileAction(result.data);
+    }
+  }
+
+  /**
+   * Handle scroll events
+   * - Shows title in fixed header when scrolled past threshold
+   * - Fades out expandable header content based on scroll position
+   * - Emits scroll event for custom handling
+   */
+  handleScroll(event: any): void {
+    const scrollTop = event.detail.scrollTop;
+    const header = this.elementRef.nativeElement.querySelector('ion-header:not([collapse])');
+    const headerExpandable = this.elementRef.nativeElement.querySelector('.header-expandable');
+
+    // Show title in fixed header when scrolled past threshold
+    if (scrollTop > this.scrollThreshold()) {
+      header?.classList.add('header-scrolled');
+    } else {
+      header?.classList.remove('header-scrolled');
+    }
+
+    // Fade out header-expandable content based on scroll
+    if (headerExpandable) {
+      const fadeDistance = this.headerFadeDistance();
+      const fadeProgress = Math.min(scrollTop / fadeDistance, 1);
+
+      // Calculate opacity (1 to 0)
+      const opacity = 1 - fadeProgress;
+
+      // Calculate transform (0px to -20px upward)
+      const translateY = fadeProgress * -20;
+
+      // Apply styles
+      headerExpandable.style.opacity = opacity.toString();
+      headerExpandable.style.transform = `translateY(${translateY}px)`;
+    }
+
+    this.scroll.emit(event);
+  }
+
+  /**
+   * Handle pull-to-refresh
+   * Emits refresh event - parent should call event.target.complete()
+   */
+  async handleRefresh(event: any): Promise<void> {
+    // Haptic feedback for pull-to-refresh
+    try {
+      await Haptics.impact({ style: ImpactStyle.Medium });
+    } catch {
+      // Fallback to Web Vibration API if Capacitor Haptics is not available
+      if ('vibrate' in navigator) {
+        navigator.vibrate(50);
+      }
+    }
+
+    this.refresh.emit(event);
+  }
+}

package/src/components/page-main/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-page-main';
+

package/src/components/post-composer/ds-mobile-post-composer.ts

@@ -0,0 +1,140 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+
+/**
+ * DsMobilePostComposerComponent
+ * 
+ * A "fake" input composer for creating new posts in the community feed.
+ * Features a user avatar, placeholder input, and post button.
+ * Clicking opens the full post creation modal/page.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-post-composer
+ *   [avatarInitials]="'LM'"
+ *   [avatarType]="'photo'"
+ *   [avatarSrc]="'...'"
+ *   (composerClick)="openPostCreator()">
+ * </ds-mobile-post-composer>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-post-composer',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent],
+  host: {
+    '(click)': 'handleClick()'
+  },
+  styles: [`
+    :host {
+      display: block;
+      max-width: 640px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    
+    .composer-container {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .composer-input-wrapper {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .composer-input {
+      width: 100%;
+      background: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.1);
+      border: none;
+      border-radius: 24px;
+      padding: 10px 16px;
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      color: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.75);
+      outline: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      pointer-events: none;
+      user-select: none;
+    }
+    
+    .composer-input::placeholder {
+      color: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.75);
+      opacity: 1;
+    }
+    
+    /* Hover effects for desktop */
+    @media (hover: hover) {
+      :host:hover .composer-input {
+        opacity: 0.8;
+      }
+    }
+  `],
+  template: `
+    <div class="composer-container">
+      <ds-avatar 
+        [initials]="avatarInitials()"
+        [type]="avatarType()"
+        [src]="avatarSrc()"
+        [iconName]="avatarIconName()"
+        size="md" />
+      
+      <div class="composer-input-wrapper">
+        <input 
+          type="text" 
+          class="composer-input" 
+          [placeholder]="placeholder()"
+          readonly
+          tabindex="-1"
+        />
+      </div>
+    </div>
+  `
+})
+export class DsMobilePostComposerComponent {
+  /**
+   * Avatar initials (for initials type)
+   */
+  avatarInitials = input<string>('');
+  
+  /**
+   * Avatar type
+   */
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  
+  /**
+   * Avatar photo source (for photo type)
+   */
+  avatarSrc = input<string>('');
+  
+  /**
+   * Icon name (for icon type avatars)
+   */
+  avatarIconName = input<string>('remixUser3Fill');
+  
+  /**
+   * Placeholder text for the input
+   */
+  placeholder = input<string>("Hvad er nyt?");
+  
+  /**
+   * Text for the post button
+   */
+  buttonText = input<string>('Slå op');
+  
+  /**
+   * Emits when the composer is clicked
+   */
+  composerClick = output<void>();
+  
+  handleClick(): void {
+    this.composerClick.emit();
+  }
+}
+

package/src/components/post-composer/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-post-composer';
+