@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/modal-base/ds-mobile-modal-base.css

@@ -0,0 +1,378 @@
+/**
+ * Mobile Modal Base Styles
+ * 
+ * Shared styles for all mobile modal components.
+ * These styles handle the base modal structure, header, loading/error states,
+ * and fixed bottom components.
+ * 
+ * Component-specific styles should be defined in each modal's own CSS file.
+ */
+
+/* ============================================
+   HOST AND CONTENT
+   ============================================ */
+
+:host {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+:host(.is-auto-height) {
+  height: auto;
+}
+
+.modal-base-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+.modal-base-content.is-auto-height {
+  --height: auto;
+  height: auto !important;
+  flex: 0 0 auto;
+  display: block;
+  contain: none !important;
+}
+
+/* Ensure the scroll part also allows auto height */
+.modal-base-content.is-auto-height::part(scroll) {
+  position: relative !important;
+  display: block !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/* ============================================
+   MODAL WRAPPER
+   ============================================ */
+
+.modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--color-background-neutral-primary, #ffffff);
+}
+
+.modal-wrapper.is-auto-height {
+  flex: 0 0 auto;
+}
+
+/* ============================================
+   MODAL HEADER
+   ============================================ */
+
+.modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--color-background-neutral-primary, #ffffff);
+  border-bottom: 1px solid var(--border-color-default);
+  padding: 16px;
+}
+
+.modal-header.no-leading-content {
+  padding-left: 20px;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  /* No padding needed - StatusBar.setOverlaysWebView(false) handles all spacing */
+}
+
+/* Header Leading (Avatar, Icon) */
+.header-leading {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Hide header-leading when empty and adjust spacing */
+.header-leading:empty {
+  display: none;
+}
+
+/* Adjust gap when header-leading is empty */
+.modal-header.no-leading-content .header-content,
+.header-content:has(.header-leading:empty) {
+  gap: 16px;
+}
+
+/* Header Main (Title, Meta, Custom Content) */
+.header-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.modal-title {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.3px;
+  color: var(--color-text-primary, #1a1a1a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modal-meta {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: -0.26px;
+  color: var(--color-text-tertiary, #737373);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Close Button (in header) */
+.close-button {
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.close-button::ng-deep button {
+  border-radius: 50% !important;
+  width: 36px !important;
+  height: 36px !important;
+  min-width: 36px !important;
+  min-height: 36px !important;
+  padding: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Close Button (absolute, when header is hidden) */
+.close-button-absolute {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.close-button-absolute::ng-deep button {
+  border-radius: 50% !important;
+  width: 36px !important;
+  height: 36px !important;
+  min-width: 36px !important;
+  min-height: 36px !important;
+  padding: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* ============================================
+   MODAL CONTENT CONTAINER
+   ============================================ */
+
+.modal-content-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+  flex: 1;
+  position: relative;
+  /* Dynamic bottom padding that matches fixed bottom height */
+}
+
+/* Allow auto-height when used as a bottom sheet */
+:host-context(ion-modal.auto-height) .modal-content-container,
+.modal-wrapper.is-auto-height .modal-content-container {
+  flex: 0 0 auto;
+}
+
+/* No top padding when header is hidden - ds-mobile-section provides spacing */
+.modal-wrapper.headerless .modal-content-container {
+  padding-top: 0;
+}
+
+.modal-main-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* No top padding - ds-mobile-section provides its own */
+  padding-top: 0;
+  padding-left: var(--modal-content-padding, 20px);
+  padding-right: var(--modal-content-padding, 20px);
+  padding-bottom: var(--modal-content-padding, 20px);
+}
+
+.modal-main-content.content-hidden {
+  display: none;
+}
+
+/* Hide state containers when not active */
+.state-hidden {
+  display: none;
+}
+
+.custom-loading-slot,
+.custom-error-slot {
+  width: 100%;
+}
+
+/* ============================================
+   LOADING STATE
+   ============================================ */
+
+.modal-loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid var(--color-background-neutral-secondary, #f0f0f0);
+  border-top-color: var(--color-primary-base, #2563eb);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--color-text-secondary, #737373);
+  margin-top: 16px;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.modal-error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  gap: 16px;
+}
+
+.error-state-title {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-primary, #1a1a1a);
+  margin: 0;
+}
+
+.error-state-description {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--color-text-secondary, #737373);
+  margin: 0;
+}
+
+/* ============================================
+   FIXED BOTTOM COMPONENT / FOOTER
+   ============================================ */
+
+/**
+ * Fixed bottom container for footer actions (e.g., submit buttons, composers)
+ * 
+ * Features:
+ * - Automatically slides up with keyboard on iOS/Android (via --keyboard-height)
+ * - Synchronized with scroll animation using matching cubic-bezier curve
+ * - Respects safe areas with bottom padding
+ * - Hidden during loading/error states
+ * - Opaque background with box-shadow to cover gap between content and keyboard
+ * - Use [footer] or [fixed-bottom] attribute on content
+ * 
+ * Usage:
+ * <ds-mobile-modal-base [hasFixedBottom]="true" [enableKeyboardHandling]="true">
+ *   <div footer>Your footer content</div>
+ * </ds-mobile-modal-base>
+ */
+.modal-fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: none;
+  /* Background and box-shadow to cover gap between fixed bottom and keyboard */
+  background: var(--color-background-neutral-primary, #ffffff);
+  box-shadow: 0 300px 0 300px var(--color-background-neutral-primary, #ffffff);
+  /* Slide up with keyboard on native apps */
+  transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
+  /* Use cubic-bezier that matches scroll animation (ease-out cubic) for perfect sync */
+  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  max-width: 100vw;
+  /* Same safe-area strategy as tab bar: iOS uses reduced inset with floor */
+  padding-bottom: max(8px, calc(var(--app-safe-bottom, 0px) - 24px));
+}
+
+/* Android gesture navigation keeps full inset for footer controls */
+:host-context(.plt-android) .modal-fixed-bottom {
+  padding-bottom: max(8px, var(--app-safe-bottom, 0px));
+}
+
+.modal-fixed-bottom.is-auto-height {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  transform: none !important;
+  box-shadow: none;
+  z-index: 1;
+  background: var(--color-background-neutral-primary, #ffffff);
+  padding-bottom: var(--keyboard-height, 0px);
+  transition: padding-bottom 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.modal-fixed-bottom > * {
+  pointer-events: auto;
+}
+
+.modal-fixed-bottom.bottom-hidden {
+  display: none;
+}
+
+/* ============================================
+   SAFE AREA SUPPORT
+   ============================================ */
+
+/* ============================================
+   ACCESSIBILITY: REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-fixed-bottom {
+    transition: none;
+  }
+
+  .loading-spinner {
+    animation: none;
+  }
+}

package/src/components/modal-base/ds-mobile-modal-base.ts

@@ -0,0 +1,261 @@
+import { Component, ContentChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA, AfterContentInit, ChangeDetectorRef, input, HostBinding, ViewChild, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonContent } from '@ionic/angular/standalone';
+import { DsIconButtonComponent, DsIconComponent } from '@propbinder/design-system';
+import { MobileModalBase } from '../shared/mobile-modal-base';
+
+/**
+ * DsMobileModalBaseComponent
+ * 
+ * Base modal component providing consistent layout and behavior for all modals.
+ * 
+ * **Features:**
+ * - Optional header with auto-detection of content
+ * - Flexible header with slots for leading content (avatar, icon)
+ * - Title and metadata inputs or custom header slot
+ * - Default loading and error state templates (with override capability)
+ * - Fixed bottom component support (e.g., message composer)
+ * - Automatic keyboard handling
+ * - Configurable keyboard content behavior (`follow` or `overlay`)
+ * - Safe area support
+ * 
+ * **Slot Structure:**
+ * - `[header-leading]` - Left side of header (avatar, icon)
+ * - `[header-main]` - Custom header content (replaces title/meta)
+ * - `[loading-state]` - Custom loading template
+ * - `[error-state]` - Custom error template
+ * - `[footer]` or `[fixed-bottom]` - Fixed bottom component (slides with keyboard)
+ * - Default slot - Main modal content
+ * 
+ * @example
+ * ```html
+ * <!-- Simple title modal -->
+ * <ds-mobile-modal-base 
+ *   headerTitle="Settings"
+ *   closeButtonLabel="Close">
+ *   <div class="content">...</div>
+ * </ds-mobile-modal-base>
+ * 
+ * <!-- Avatar header modal -->
+ * <ds-mobile-modal-base
+ *   headerTitle="John Doe"
+ *   headerMeta="Tenant · 2h ago"
+ *   [hasFixedBottom]="true"
+ *   [enableKeyboardHandling]="true">
+ *   
+ *   <ds-avatar header-leading [initials]="'JD'" size="md" />
+ *   
+ *   <div class="content">...</div>
+ *   
+ *   <div fixed-bottom class="composer">...</div>
+ * </ds-mobile-modal-base>
+ * 
+ * <!-- Headerless modal (close button positioned absolutely) -->
+ * <ds-mobile-modal-base [showHeader]="false">
+ *   <div class="full-width-content">...</div>
+ * </ds-mobile-modal-base>
+ * 
+ * <!-- Modal with footer actions (slides with keyboard) -->
+ * <ds-mobile-modal-base
+ *   headerTitle="Create Inquiry"
+ *   [hasFixedBottom]="true"
+ *   [enableKeyboardHandling]="true"
+ *   [keyboardContentBehavior]="'overlay'">
+ *   
+ *   <div class="content">
+ *     <input type="text" placeholder="Type something..." />
+ *   </div>
+ *   
+ *   <div footer class="action-bar">
+ *     <button>Cancel</button>
+ *     <button>Submit</button>
+ *   </div>
+ * </ds-mobile-modal-base>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-modal-base',
+  standalone: true,
+  imports: [CommonModule, IonContent, DsIconButtonComponent, DsIconComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  styleUrls: ['./ds-mobile-modal-base.css'],
+  host: {
+    '[style.--modal-content-padding]': 'contentPadding()',
+    '[class.is-auto-height]': 'isAutoHeight()',
+  },
+  template: `
+    <ion-content
+      [fullscreen]="!isAutoHeight()"
+      [scrollY]="true"
+      [class.is-auto-height]="isAutoHeight()"
+      class="modal-base-content"
+      [style.--padding-bottom]="contentPadding() || (hasFixedBottom() ? 'var(--fixed-bottom-height)' : '24px')"
+    >
+      <div class="modal-wrapper" [class.headerless]="!shouldShowHeader()" [class.is-auto-height]="isAutoHeight()">
+        <!-- Header (conditional) -->
+        @if (shouldShowHeader()) {
+          <div class="modal-header" [class.no-leading-content]="!hasHeaderLeadingContent()">
+            <div class="header-content">
+              <!-- Leading slot (avatar, icon) - always rendered, CSS handles empty state -->
+              <div class="header-leading">
+                <ng-content select="[header-leading]"></ng-content>
+              </div>
+
+              <!-- Main (title + meta or custom) -->
+              <div class="header-main">
+                @if (headerTitle()) {
+                  <div class="modal-title">{{ headerTitle() }}</div>
+                }
+                @if (headerMeta()) {
+                  <div class="modal-meta">{{ headerMeta() }}</div>
+                }
+                <ng-content select="[header-main]"></ng-content>
+              </div>
+
+              <!-- Close button (in header) -->
+              <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button" [attr.aria-label]="closeButtonLabel()" />
+            </div>
+          </div>
+        }
+
+        <!-- Absolute close button (when header is hidden) -->
+        @if (!shouldShowHeader()) {
+          <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button-absolute" [attr.aria-label]="closeButtonLabel()" />
+        }
+
+        <!-- Content Container -->
+        <div class="modal-content-container">
+          <!-- Custom Loading State Slot - always present -->
+          <div class="custom-loading-slot" [class.state-hidden]="!(loading() && hasCustomLoadingState)">
+            <ng-content select="[loading-state]"></ng-content>
+          </div>
+
+          <!-- Default Loading State -->
+          @if (loading() && !hasCustomLoadingState) {
+            <div class="modal-loading-state">
+              <div class="loading-spinner"></div>
+              <p class="loading-text">Loading...</p>
+            </div>
+          }
+
+          <!-- Custom Error State Slot - always present -->
+          <div class="custom-error-slot" [class.state-hidden]="!(error() && !loading() && hasCustomErrorState)">
+            <ng-content select="[error-state]"></ng-content>
+          </div>
+
+          <!-- Default Error State -->
+          @if (error() && !loading() && !hasCustomErrorState) {
+            <div class="modal-error-state">
+              <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
+              <h3 class="error-state-title">Error</h3>
+              <p class="error-state-description">{{ error() }}</p>
+            </div>
+          }
+
+          <!-- Main content - always rendered but hidden when loading/error -->
+          <div class="modal-main-content" [class.content-hidden]="loading() || !!error()">
+            <ng-content></ng-content>
+          </div>
+        </div>
+      </div>
+    </ion-content>
+
+    <!-- Fixed Bottom Component / Footer (slides with keyboard) -->
+    <div class="modal-fixed-bottom" [class.bottom-hidden]="!hasFixedBottom() || loading() || error()" [class.is-auto-height]="isAutoHeight()">
+      <ng-content select="[fixed-bottom]"></ng-content>
+      <ng-content select="[footer]"></ng-content>
+    </div>
+  `,
+})
+export class DsMobileModalBaseComponent extends MobileModalBase implements OnInit, AfterContentInit, OnDestroy {
+  /**
+   * Reference to ion-content for keyboard handling
+   */
+  @ViewChild(IonContent, { read: IonContent }) override ionContent?: IonContent = undefined;
+
+  /**
+   * Control header visibility
+   * - true: Always show header
+   * - false: Never show header (close button becomes absolute)
+   * - 'auto' (default): Auto-detect based on header content
+   */
+  showHeader = input<boolean | 'auto'>('auto');
+
+  /**
+   * Detect if custom loading state is provided
+   */
+  @ContentChild('[loading-state]', { read: ElementRef }) customLoadingState?: ElementRef;
+
+  /**
+   * Detect if custom error state is provided
+   */
+  @ContentChild('[error-state]', { read: ElementRef }) customErrorState?: ElementRef;
+
+  /**
+   * Detect if header leading content is provided
+   */
+  @ContentChild('[header-leading]', { read: ElementRef }) headerLeading?: ElementRef;
+
+  /**
+   * Detect if header main content is provided
+   */
+  @ContentChild('[header-main]', { read: ElementRef }) headerMain?: ElementRef;
+
+  /**
+   * Flag to track if content has been initialized
+   */
+  hasCustomLoadingState = false;
+  hasCustomErrorState = false;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  override ngOnInit(): void {
+    // Call parent to set up keyboard listeners and ResizeObserver
+    super.ngOnInit();
+  }
+
+  ngAfterContentInit(): void {
+    // Check for content after content has been initialized
+    this.hasCustomLoadingState = !!this.customLoadingState;
+    this.hasCustomErrorState = !!this.customErrorState;
+
+    // Trigger change detection to update the view
+    this.cdr.detectChanges();
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+  }
+
+  /**
+   * Determine if header should be shown based on showHeader input and content detection
+   */
+  shouldShowHeader(): boolean {
+    const showHeaderValue = this.showHeader();
+
+    // Explicit override
+    if (showHeaderValue === true) return true;
+    if (showHeaderValue === false) return false;
+
+    // Auto-detect: show header if there's any header content
+    return !!(this.headerTitle() || this.headerMeta() || this.hasContentInSlot(this.headerLeading) || this.hasContentInSlot(this.headerMain));
+  }
+
+  /**
+   * Check whether header-leading slot has actual projected content.
+   */
+  hasHeaderLeadingContent(): boolean {
+    return this.hasContentInSlot(this.headerLeading);
+  }
+
+  /**
+   * Check if a content child slot has actual content
+   */
+  private hasContentInSlot(slot?: ElementRef): boolean {
+    if (!slot) return false;
+    const element = slot.nativeElement;
+    return element && (element.childNodes.length > 0 || element.textContent?.trim().length > 0);
+  }
+}

package/src/components/modal-base/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-modal-base';
+export * from '../shared/mobile-modal-base';