@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/components/offline-banner/ds-mobile-offline-banner.ts

@@ -1,135 +0,0 @@
-import { Component, input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-
-/**
- * DsMobileOfflineBannerComponent
- *
- * A compact banner component to indicate offline status.
- * Designed to be used in the [offline-indicator] slot of page components.
- *
- * Features:
- * - Amber/yellow warning styling
- * - WiFi off icon
- * - Customizable message
- * - Compact, non-intrusive design
- * - Smooth slide-in animation
- *
- * @example
- * ```html
- * <ds-mobile-page-main title="Community">
- *   <ds-mobile-offline-banner 
- *     offline-indicator
- *     *ngIf="pageComponent.isOffline()">
- *   </ds-mobile-offline-banner>
- *   
- *   <!-- Page content -->
- * </ds-mobile-page-main>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-offline-banner',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent],
-  styles: [`
-    :host {
-      display: block;
-      animation: slideDown 0.3s ease-out;
-    }
-
-    @keyframes slideDown {
-      from {
-        opacity: 0;
-        transform: translateY(-10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    .offline-banner {
-      background: var(--color-warning-surface, #FEF3C7);
-      border-bottom: 1px solid var(--color-warning-border, #F59E0B);
-      padding: 12px 20px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      position: relative;
-      z-index: 10;
-    }
-
-    .offline-banner__icon {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-warning-content, #92400E);
-    }
-
-    .offline-banner__content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    .offline-banner__title {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm, 14px);
-      font-weight: 600;
-      line-height: 1.3;
-      color: var(--color-warning-content, #92400E);
-      margin: 0;
-    }
-
-    .offline-banner__message {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs, 12px);
-      font-weight: 400;
-      line-height: 1.4;
-      color: var(--color-warning-content-secondary, #B45309);
-      margin: 0;
-    }
-
-    /* Desktop - center with max-width */
-    @media (min-width: 768px) {
-      .offline-banner {
-        padding: 12px 40px;
-      }
-    }
-  `],
-  template: `
-    <div class="offline-banner">
-      <div class="offline-banner__icon">
-        <ds-icon 
-          [name]="icon()" 
-          size="20px" 
-          color="var(--color-warning-content, #92400E)">
-        </ds-icon>
-      </div>
-      <div class="offline-banner__content">
-        <p class="offline-banner__title">{{ title() }}</p>
-        @if (message()) {
-          <p class="offline-banner__message">{{ message() }}</p>
-        }
-      </div>
-    </div>
-  `
-})
-export class DsMobileOfflineBannerComponent {
-  /**
-   * Icon to display (default: WiFi off icon)
-   */
-  icon = input<string>('remixWifiOffLine');
-
-  /**
-   * Title text for the banner
-   */
-  title = input<string>('No internet connection');
-
-  /**
-   * Optional secondary message
-   */
-  message = input<string>('Some features may be unavailable');
-}

package/src/components/offline-banner/index.ts

@@ -1 +0,0 @@
-export * from './ds-mobile-offline-banner';

package/src/components/page-details/ds-mobile-page-details.css

@@ -1,83 +0,0 @@
-/* ============================================
-   DS MOBILE PAGE DETAILS
-   Reusable mobile page component for detail/drill-down pages
-   ============================================ */
-
-/* ============================================
-   PULL-TO-REFRESH SPINNER STYLING
-   ============================================ */
-
-/* Style the pull-to-refresh spinner with brand secondary content color */
-ion-refresher {
-  --color: var(--color-header-content);
-}
-
-ion-refresher-content {
-  --color: var(--color-header-content);
-}
-
-/* Target the actual spinner element */
-ion-refresher-content::part(spinner) {
-  color: var(--color-header-content);
-}
-
-/* ============================================
-   HEADER DETAILS - Back Button + Title
-   ============================================ */
-
-.header-details {
-  gap: 12px;
-  padding: 0 20px;
-  height: 72px;
-  min-height: 72px;
-}
-
-:host .header-details .back-button {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--color-header-accent) !important;
-  flex-shrink: 0;
-  border: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--color-header-content);
-  transition: background var(--transition-duration-fast) var(--ease-smooth);
-  z-index: 10;
-}
-
-:host .header-details .back-button:hover {
-  background: var(--color-header-accent-hover) !important;
-}
-
-:host .header-details .back-button:active {
-  background: var(--color-header-accent-active) !important;
-}
-
-.header-details .header-title {
-  left: 64px;
-}
-
-@media (min-width: 768px) {
-  /* Keep header visible on desktop for detail pages */
-  ion-header {
-    display: block !important;
-    height: 88px;
-    min-height: 88px;
-  }
-
-  ion-header ion-toolbar {
-    --min-height: 88px;
-    height: 88px;
-    min-height: 88px;
-  }
-  
-  .header-details {
-    padding: 16px 24px;
-    height: 88px;
-    min-height: 88px;
-  }
-}

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

@@ -1,282 +0,0 @@
-import { Component, input, output, ElementRef, ViewChild, AfterViewInit, computed, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NavController, Platform } from '@ionic/angular/standalone';
-import { 
-  IonHeader, 
-  IonToolbar, 
-  IonTitle,
-  IonContent, 
-  IonRefresher, 
-  IonRefresherContent 
-} from '@ionic/angular/standalone';
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-import { DsIconComponent } from '@propbinder/design-system';
-import { MobilePageBase } from '../shared/mobile-page-base';
-import { DsMobileLoaderOverlayComponent } from '../loader-overlay';
-import { DsMobileInlineTabsComponent, type InlineTabItem } from '../inline-tabs';
-import { customBackTransition } from '../../animations/page-transitions';
-import { WhitelabelService } from '../../services/whitelabel.service';
-
-/**
- * DsMobilePageDetailsComponent
- * 
- * A complete mobile page layout for detail/drill-down pages with:
- * - Fixed header with back button + title (fades in on scroll)
- * - Purple expandable header section (scrolls with content)
- * - Optional inline tabs in expandable header
- * - White rounded content wrapper
- * - Pull-to-refresh support (native platforms only)
- * - Auto scroll title fade-in and header fade-out
- * 
- * @example
- * ```html
- * <!-- Simple detail page -->
- * <ds-mobile-page-details
- *   title="Property Details"
- *   (back)="goBack()">
- *   <div class="page-content">
- *     <!-- Your content -->
- *   </div>
- * </ds-mobile-page-details>
- * 
- * <!-- With tabs -->
- * <ds-mobile-page-details
- *   title="Inquiry Details"
- *   [tabs]="tabItems"
- *   [activeTab]="activeTab()"
- *   (tabChange)="setActiveTab($event)"
- *   (back)="goBack()">
- *   <div class="page-content">
- *     <!-- Your content -->
- *   </div>
- * </ds-mobile-page-details>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-page-details',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonContent,
-    IonRefresher,
-    IonRefresherContent,
-    DsIconComponent,
-    DsMobileLoaderOverlayComponent,
-    DsMobileInlineTabsComponent
-  ],
-  host: {
-    '[style.--content-wrapper-padding]': 'contentPadding()'
-  },
-  styleUrls: [
-    '../shared/mobile-page-base.css',
-    './ds-mobile-page-details.css'
-  ],
-  template: `
-    <!-- Fixed header at top -->
-    <ion-header>
-      <ion-toolbar>
-        <div class="header-details">
-          <!-- Back Button -->
-          <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-            <ds-icon name="remixArrowLeftSLine" size="24px" [color]="whitelabelService.headerContent()" />
-          </button>
-          
-          <!-- Title - fades in on scroll -->
-          <ion-title class="header-title">{{ title() }}</ion-title>
-        </div>
-      </ion-toolbar>
-    </ion-header>
-
-    <!-- Content with expandable header -->
-    <ion-content [scrollEvents]="true" [forceOverscroll]="true" (ionScroll)="handleScroll($event)">
-      <!-- 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">{{ title() }}</h1>
-          </div>
-          
-          <!-- Tabs in header (optional) -->
-          @if (tabs() && tabs()!.length > 0) {
-            <ds-mobile-inline-tabs
-              [tabs]="tabs()!"
-              [activeTab]="activeTab()"
-              (tabChange)="handleTabChange($event)">
-            </ds-mobile-inline-tabs>
-          }
-        </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">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </ion-content>
-  `
-})
-export class DsMobilePageDetailsComponent extends MobilePageBase implements AfterViewInit {
-  @ViewChild(IonContent) ionContent?: IonContent;
-  
-  // Platform detection
-  private platform = inject(Platform);
-  
-  // Whitelabel service
-  whitelabelService = inject(WhitelabelService);
-  
-  // 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 = input.required<string>();
-  backRoute = input<string>(''); // Optional default back route
-  
-  /**
-   * 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
-   */
-  contentPadding = input<string>('0');
-  
-  // Inputs - Tabs (optional)
-  tabs = input<InlineTabItem[] | undefined>(undefined);
-  activeTab = input<string>('');
-  
-  // Inputs - Features
-  showRefresh = input<boolean>(true);
-  scrollThreshold = input<number>(160); // Pixels to scroll before title appears
-  headerFadeDistance = input<number>(200); // Distance over which header fades out
-  
-  // Outputs
-  back = output<void>();
-  tabChange = output<string>();
-  refresh = output<any>();
-  scroll = output<any>();
-  
-  constructor(
-    private navCtrl: NavController,
-    private elementRef: ElementRef
-  ) {
-    super();
-  }
-  
-  ngAfterViewInit(): void {
-    // Initialize network monitoring
-    this.initNetworkMonitoring(this.isNativePlatform());
-  }
-  
-  /**
-   * Handle back navigation
-   * 
-   * By default, navigates using the provided backRoute or browser back.
-   * Parent components can listen to the (back) event to override this behavior.
-   */
-  handleBack(): void {
-    // Emit event for parent to optionally handle
-    this.back.emit();
-    
-    // Default behavior: navigate using backRoute or browser back
-    if (this.backRoute()) {
-      this.navCtrl.navigateBack(this.backRoute());
-    } else {
-      this.navCtrl.back({ animation: customBackTransition });
-    }
-  }
-  
-  /**
-   * Handle tab change
-   */
-  handleTabChange(tabId: string): void {
-    this.tabChange.emit(tabId);
-  }
-  
-  /**
-   * 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 threshold = this.scrollThreshold();
-    const fadeDistance = this.headerFadeDistance();
-    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 > threshold) {
-      header?.classList.add('header-scrolled');
-    } else {
-      header?.classList.remove('header-scrolled');
-    }
-    
-    // Fade out header-expandable content based on scroll
-    if (headerExpandable) {
-      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-details/index.ts

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

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

@@ -1,68 +0,0 @@
-/* ============================================
-   DS MOBILE PAGE MAIN
-   Reusable mobile page component for main/tab pages
-   ============================================ */
-
-/* ============================================
-   HEADER MAIN - Logo + Title + Avatar
-   ============================================ */
-
-.header-main {
-  padding: 0 20px;
-  height: 72px;
-}
-
-.header-main__title {
-  transform: translateX(-50%) translateY(-100%);
-  opacity: 0;
-  transition: transform 0.6s ease, opacity 0.6s ease;
-  padding: 0;
-  --color: var(--color-header-content);
-}
-
-/* Show title when scrolled */
-.header-scrolled .header-main__title {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-
-.header-main__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-main__actions ds-avatar {
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-@media (min-width: 768px) {
-  .header-main {
-    padding: 16px 24px;
-    height: 88px;
-  }
-
-  /* Hide title on desktop - not needed */
-  .header-main__title {
-    display: none;
-  }
-}
-
-/* ============================================
-   PULL-TO-REFRESH SPINNER STYLING
-   ============================================ */
-
-/* Style the pull-to-refresh spinner with brand secondary content color */
-ion-refresher {
-  --color: var(--color-header-content);
-}
-
-ion-refresher-content {
-  --color: var(--color-header-content);
-}
-
-/* Target the actual spinner element */
-ion-refresher-content::part(spinner) {
-  color: var(--color-header-content);
-}