@propbinder/mobile-design 0.0.2 → 0.0.21

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

@@ -1,285 +0,0 @@
-/* ============================================
-   DS MOBILE PAGE DETAILS
-   Reusable mobile page component for detail/drill-down pages
-   ============================================ */
-
-/* ============================================
-   HOST
-   ============================================ */
-
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-/* ============================================
-   ION-HEADER - Back Button Header (Mobile)
-   ============================================ */
-
-ion-header {
-  background: var(--color-brand-secondary);
-  box-shadow: none;
-  height: 64px;
-}
-
-ion-header ion-toolbar {
-  --background: var(--color-brand-secondary);
-  --border-width: 0;
-  --box-shadow: none;
-  --padding-top: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --min-height: 64px;
-  height: 100%;
-  min-height: 64px;
-  padding: 0;
-}
-
-ion-header ion-toolbar::part(native) {
-  height: 100%;
-  min-height: 64px;
-  padding: 0;
-}
-
-/* Hide mobile header on desktop */
-@media (min-width: 768px) {
-  ion-header {
-    display: none;
-  }
-}
-
-/* ============================================
-   HEADER BACK (Mobile)
-   ============================================ */
-
-.header-back {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--color-brand-secondary);
-  position: relative;
-  height: 100%;
-  min-height: 64px;
-}
-
-.header-back .back-button {
-  background: none;
-  border: none;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: white;
-  transition: opacity var(--transition-duration-fast) var(--ease-smooth);
-  z-index: 10;
-}
-
-.header-back .back-button:hover {
-  opacity: 0.8;
-}
-
-.header-back .back-button:active {
-  opacity: 0.6;
-}
-
-.header-back .header-title {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  color: white;
-  margin: 0;
-}
-
-/* ============================================
-   DESKTOP HEADER (Above Content)
-   ============================================ */
-
-.desktop-header {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .desktop-header {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 32px var(--content-padding-md) 24px var(--content-padding-md);
-    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  .desktop-header .back-button {
-    background: none;
-    border: none;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: var(--text-color-default-primary);
-    transition: opacity var(--transition-duration-fast) var(--ease-smooth);
-  }
-
-  .desktop-header .back-button:hover {
-    opacity: 0.8;
-  }
-
-  .desktop-header .back-button:active {
-    opacity: 0.6;
-  }
-
-  .desktop-header h1 {
-    font-size: var(--font-size-2xl);
-    font-weight: 600;
-    margin: 0;
-    color: var(--text-color-default-primary);
-  }
-}
-
-@media (min-width: 992px) {
-  .desktop-header {
-    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
-    padding-left: var(--content-padding-lg);
-    padding-right: var(--content-padding-lg);
-  }
-}
-
-@media (min-width: 1440px) {
-  .desktop-header {
-    max-width: calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));
-    padding-left: var(--content-padding-xl);
-    padding-right: var(--content-padding-xl);
-  }
-}
-
-@media (min-width: 1768px) {
-  .desktop-header {
-    padding-left: var(--content-padding-2xl);
-    padding-right: var(--content-padding-2xl);
-  }
-}
-
-@media (min-width: 1920px) {
-  .desktop-header {
-    padding-left: var(--content-padding-3xl);
-    padding-right: var(--content-padding-3xl);
-  }
-}
-
-/* ============================================
-   ION-CONTENT
-   ============================================ */
-
-ion-content {
-  --background: var(--color-background-neutral-primary);
-  --padding-top: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  overflow: hidden;
-}
-
-/* Mobile: Start with full radius, then animate to flat bottom */
-@media (max-width: 767px) {
-  ion-content {
-    /* Start with fully rounded corners - 36px bottom radius for more prominent effect */
-    border-radius: 24px 24px 36px 36px;
-    /* Animate to flat bottom after a delay (matches page transition) */
-    animation: bottomRadiusOut 0.6s ease 0.3s forwards;
-  }
-  
-  /* Reverse animation when navigating back */
-  :host(.navigating-back) ion-content {
-    /* Start from flat bottom (the end state after forward animation) */
-    /* Don't use !important here as it would block the animation from working */
-    border-radius: 24px 24px 0 0;
-    /* Animate back to fully rounded during the page transition */
-    /* Duration and easing match the page transition for smooth visual effect */
-    animation: bottomRadiusIn 0.8s cubic-bezier(0.36, 0.66, 0.04, 1) forwards !important;
-  }
-}
-
-/* Animate bottom corners from rounded to flat (forward) */
-@keyframes bottomRadiusOut {
-  from {
-    border-radius: 24px 24px 36px 36px;
-  }
-  to {
-    border-radius: 24px 24px 0 0;
-  }
-}
-
-/* Animate bottom corners from flat to rounded (reverse) */
-@keyframes bottomRadiusIn {
-  from {
-    border-radius: 24px 24px 0 0;
-  }
-  to {
-    border-radius: 24px 24px 36px 36px;
-  }
-}
-
-/* Desktop: always flat bottom, no animation */
-@media (min-width: 768px) {
-  ion-content {
-    border-radius: 24px 24px 0 0;
-    animation: none;
-  }
-}
-
-ion-content::part(scroll) {
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: none;
-}
-
-/* ============================================
-   DETAIL CONTENT
-   ============================================ */
-
-.detail-content {
-  /* Fixed 20px horizontal padding globally */
-  padding: 24px 20px 32px 20px;
-}
-
-@media (min-width: 768px) {
-  .detail-content {
-    padding: 32px var(--content-padding-md) !important; /* Override inline styles on desktop */
-    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
-    margin: 0 auto;
-    width: 100%;
-  }
-}
-
-@media (min-width: 992px) {
-  .detail-content {
-    padding: 32px var(--content-padding-lg) !important;
-    max-width: calc(var(--content-max-width-md) + (var(--content-padding-md) * 2));
-  }
-}
-
-@media (min-width: 1440px) {
-  .detail-content {
-    padding: 32px var(--content-padding-xl) !important;
-    max-width: calc(var(--content-max-width-lg) + (var(--content-padding-lg) * 2));
-  }
-}
-
-@media (min-width: 1768px) {
-  .detail-content {
-    padding: 32px var(--content-padding-2xl) !important;
-  }
-}
-
-@media (min-width: 1920px) {
-  .detail-content {
-    padding: 32px var(--content-padding-3xl) !important;
-  }
-}
-

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

@@ -1,128 +0,0 @@
-import { Component, input, output, ElementRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NavController } from '@ionic/angular/standalone';
-import { IonHeader, IonToolbar, IonContent } from '@ionic/angular/standalone';
-import { DsIconComponent } from '@propbinder/design-system';
-import { MobilePageBase } from '../shared/mobile-page-base';
-
-/**
- * DsMobilePageDetailsComponent
- * 
- * A mobile page layout for detail/drill-down pages with:
- * - Back button header (mobile + desktop variants)
- * - White background content area
- * - Responsive padding
- * 
- * @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 default back route -->
- * <ds-mobile-page-details
- *   title="Invoice Details"
- *   backRoute="/invoices">
- *   <div class="page-content">
- *     <!-- Your content -->
- *   </div>
- * </ds-mobile-page-details>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-page-details',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonHeader,
-    IonToolbar,
-    IonContent,
-    DsIconComponent
-  ],
-  styleUrls: ['./ds-mobile-page-details.css'],
-  template: `
-    <!-- Mobile header - hidden on desktop -->
-    <ion-header>
-      <ion-toolbar>
-        <div class="header-back">
-          <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-            <ds-icon name="remixArrowLeftLine" size="24px" />
-          </button>
-          <h1 class="header-title">{{ title() }}</h1>
-        </div>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <!-- Desktop header above content -->
-      <div class="desktop-header">
-        <button class="back-button" (click)="handleBack()" [attr.aria-label]="'Go back'">
-          <ds-icon name="remixArrowLeftLine" size="24px" />
-        </button>
-        <h1>{{ title() }}</h1>
-      </div>
-
-      <!-- Content area -->
-      <div class="detail-content">
-        <ng-content></ng-content>
-      </div>
-    </ion-content>
-  `
-})
-export class DsMobilePageDetailsComponent extends MobilePageBase {
-  // Inputs
-  title = input.required<string>();
-  backRoute = input<string>(''); // Optional default back route
-  
-  // Outputs
-  back = output<void>();
-  
-  constructor(
-    private navCtrl: NavController,
-    private elementRef: ElementRef
-  ) {
-    super();
-  }
-  
-  /**
-   * 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.
-   * 
-   * @example
-   * ```html
-   * <!-- Default behavior: uses backRoute or browser back -->
-   * <ds-mobile-page-details 
-   *   title="Details" 
-   *   backRoute="/home">
-   * </ds-mobile-page-details>
-   * 
-   * <!-- Custom behavior: parent handles navigation -->
-   * <ds-mobile-page-details 
-   *   title="Details"
-   *   (back)="customBackHandler()">
-   * </ds-mobile-page-details>
-   * ```
-   */
-  handleBack(): void {
-    // Add class to trigger reverse animation
-    this.elementRef.nativeElement.classList.add('navigating-back');
-    
-    // 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();
-    }
-  }
-}
-

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

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