@propbinder/mobile-design 0.2.50 → 0.2.53

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

@@ -1,378 +0,0 @@
-/**
- * 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

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

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