@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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

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

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

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