@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/tab-bar/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileTabBarComponent, type TabConfig } from './ds-mobile-tab-bar';
+

package/src/components/tabs/ds-mobile-tabs.css

@@ -0,0 +1,25 @@
+/* ============================================
+   HOST - ds-mobile-tabs wrapper
+   ============================================ */
+
+:host {
+  display: block;
+  height: 100vh;
+  height: 100dvh; /* Use dynamic viewport height instead of small viewport height */
+}
+
+/* ============================================
+   ION-TABS BASE
+   ============================================ */
+
+ion-tabs {
+  height: 100%;
+  background: var(--color-header-surface);
+}
+
+/* Hide tab bar when detail page is active with slide-out animation (Mobile only) */
+@media (max-width: 767px) {
+  ion-tabs:has(ds-mobile-page-details) ds-mobile-tab-bar {
+    --tab-bar-transform: translateY(100%);
+  }
+}

package/src/components/tabs/ds-mobile-tabs.ts

@@ -0,0 +1,89 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { 
+  IonTabs, 
+  IonTab
+} from '@ionic/angular/standalone';
+import { DsMobileTabBarComponent, TabConfig } from '../tab-bar';
+
+// Re-export TabConfig for backwards compatibility
+export type { TabConfig } from '../tab-bar';
+
+/**
+ * DsMobileTabsComponent
+ * 
+ * Responsive tab navigation that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
+ * 
+ * Wraps ion-tabs to maintain native routing functionality while
+ * providing a responsive navigation experience with branding.
+ * 
+ * NOTE: This component wraps `ion-tabs` internally. If your Angular
+ * routing requires `ion-tabs` to be a direct child in your component
+ * (e.g., when using `ion-router-outlet` in app.html), use the
+ * `DsMobileTabBarComponent` directly inside your own `ion-tabs` instead.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-tabs
+ *   [tabs]="tabsConfig"
+ *   [avatarInitials]="'JD'"
+ *   (avatarClick)="handleAvatarClick()"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-tabs',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonTabs,
+    IonTab,
+    DsMobileTabBarComponent
+  ],
+  styleUrls: ['./ds-mobile-tabs.css'],
+  template: `
+    <ion-tabs>
+      <ng-container *ngIf="tabs && tabs.length > 0">
+        <ion-tab *ngFor="let tab of tabs; trackBy: trackByTabId" [tab]="tab.id"></ion-tab>
+      </ng-container>
+      
+      <ds-mobile-tab-bar
+        [tabs]="tabs"
+        [avatarType]="avatarType"
+        [avatarInitials]="avatarInitials"
+        [avatarSrc]="avatarSrc"
+        [avatarIconName]="avatarIconName"
+        (avatarClick)="handleAvatarClick()"
+      />
+    </ion-tabs>
+  `
+})
+export class DsMobileTabsComponent implements OnInit {
+  // Inputs
+  @Input() tabs: TabConfig[] = [];
+  
+  // Avatar inputs
+  @Input() avatarType: 'initials' | 'photo' | 'icon' = 'initials';
+  @Input() avatarInitials: string = 'U';
+  @Input() avatarSrc: string = '';
+  @Input() avatarIconName: string = 'remixUser3Line';
+  
+  // Outputs
+  @Output() avatarClick = new EventEmitter<void>();
+  
+  constructor() {}
+  
+  ngOnInit(): void {
+    console.log('DsMobileTabsComponent initialized');
+  }
+  
+  trackByTabId(index: number, tab: TabConfig): string {
+    return tab.id;
+  }
+  
+  handleAvatarClick(): void {
+    this.avatarClick.emit();
+  }
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export { DsMobileTabsComponent, type TabConfig } from './ds-mobile-tabs';
+

package/src/components/text-input/ds-text-input.ts

@@ -0,0 +1,287 @@
+import { Component, input, output, signal, computed, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+
+/**
+ * DsTextInputComponent
+ * 
+ * Mobile-first text input field component following the design system.
+ * Supports email, phone, text, and other input types.
+ * 
+ * Features:
+ * - All design system states (default, hover, focus, error, disabled)
+ * - Validation error state with destructive border color
+ * - Automatic error clearing when input becomes valid (configurable)
+ * - Built-in validation based on input type or custom validator function
+ * - Accessible with proper ARIA attributes
+ * - ControlValueAccessor for Angular forms integration
+ * 
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ds-text-input
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [(ngModel)]="email">
+ * </ds-text-input>
+ * 
+ * <!-- With validation error and auto-clear -->
+ * <ds-text-input
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [hasError]="emailInvalid"
+ *   errorMessage="Please enter a valid email"
+ *   [autoClearError]="true"
+ *   (errorCleared)="emailInvalid = false"
+ *   [(ngModel)]="email">
+ * </ds-text-input>
+ * 
+ * <!-- With custom validator -->
+ * <ds-text-input
+ *   type="text"
+ *   placeholder="Enter phone number"
+ *   [validator]="phoneValidator"
+ *   [hasError]="phoneInvalid"
+ *   (errorCleared)="phoneInvalid = false"
+ *   [(ngModel)]="phone">
+ * </ds-text-input>
+ * ```
+ */
+@Component({
+  selector: 'ds-text-input',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DsTextInputComponent),
+      multi: true
+    }
+  ],
+  styles: [`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .text-input-wrapper {
+      position: relative;
+      width: 100%;
+    }
+
+    .text-input {
+      width: 100%;
+      height: 48px;
+      padding: 0 16px;
+      box-sizing: border-box;
+      
+      /* Typography */
+      font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
+      font-size: var(--font-size-base);
+      font-weight: 400;
+      line-height: 1.4;
+      color: var(--text-color-default-primary);
+      
+      /* Background & Border */
+      background-color: var(--color-background-neutral-primary);
+      border: 1px solid var(--border-color-default);
+      border-radius: 8px;
+      
+      /* Transitions */
+      transition: 
+        border-color var(--transition-duration-fast) var(--ease-smooth),
+        background-color var(--transition-duration-fast) var(--ease-smooth),
+        box-shadow var(--transition-duration-fast) var(--ease-smooth);
+      
+      /* Remove default browser styles */
+      outline: none;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    /* Placeholder styling */
+    .text-input::placeholder {
+      color: var(--text-color-default-tertiary);
+    }
+
+    /* Default state - no additional styles needed */
+
+    /* Hover state */
+    .text-input:hover:not(:disabled):not(:focus) {
+      border-color: var(--border-color-default);
+      background-color: var(--color-background-neutral-primary-hover);
+    }
+
+    /* Focus state */
+    .text-input:focus {
+      border-color: var(--color-accent);
+      background-color: var(--color-background-neutral-primary);
+      box-shadow: 0 0 0 3px var(--outline-color-default);
+    }
+
+    /* Error state */
+    .text-input.error {
+      border-color: var(--color-destructive-base);
+    }
+
+    .text-input.error:focus {
+      border-color: var(--color-destructive-base);
+      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+    }
+
+    /* Disabled state */
+    .text-input:disabled {
+      background-color: var(--color-background-neutral-disabled);
+      border-color: var(--border-color-default);
+      color: var(--text-color-default-disabled);
+      cursor: not-allowed;
+    }
+
+    .text-input:disabled::placeholder {
+      color: var(--text-color-default-disabled);
+    }
+
+    /* Error message */
+    .error-message {
+      margin-top: 8px;
+      font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 1.4;
+      color: var(--color-destructive-base);
+    }
+  `],
+  template: `
+    <div class="text-input-wrapper">
+      <input
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [autocomplete]="autocomplete() || null"
+        [attr.inputmode]="inputmode() || null"
+        [class.error]="hasError()"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="hasError() && errorMessage() ? 'error-' + inputId : null"
+        class="text-input"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (focus)="onFocus()"
+        [id]="inputId">
+      
+      @if (hasError() && errorMessage()) {
+        <div 
+          class="error-message"
+          [id]="'error-' + inputId"
+          role="alert">
+          {{ errorMessage() }}
+        </div>
+      }
+    </div>
+  `
+})
+export class DsTextInputComponent implements ControlValueAccessor {
+  // Input properties
+  type = input<'text' | 'email' | 'tel' | 'password' | 'url' | 'search'>('text');
+  placeholder = input<string>('');
+  disabled = input<boolean>(false);
+  readonly = input<boolean>(false);
+  required = input<boolean>(false);
+  hasError = input<boolean>(false);
+  errorMessage = input<string>('');
+  autocomplete = input<string>('');
+  inputmode = input<'text' | 'email' | 'tel' | 'numeric' | 'url' | 'search' | undefined>(undefined);
+  autoClearError = input<boolean>(true);
+  validator = input<((value: string) => boolean) | null>(null);
+
+  // Output events
+  valueChange = output<string>();
+  blur = output<FocusEvent>();
+  focus = output<FocusEvent>();
+  errorCleared = output<void>();
+
+  // Internal state
+  private _value = signal<string>('');
+  value = computed(() => this._value());
+  
+  // Generate unique ID for accessibility
+  inputId = `ds-text-input-${Math.random().toString(36).substring(2, 9)}`;
+
+  // ControlValueAccessor implementation
+  private onChange = (value: string) => {};
+  private onTouched = () => {};
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value;
+    this._value.set(newValue);
+    this.onChange(newValue);
+    this.valueChange.emit(newValue);
+    
+    // Auto-clear error if input becomes valid
+    if (this.autoClearError() && this.hasError()) {
+      const isValid = this.validateInput(newValue);
+      if (isValid) {
+        this.errorCleared.emit();
+      }
+    }
+  }
+
+  /**
+   * Validates the input value based on type or custom validator
+   */
+  private validateInput(value: string): boolean {
+    // Use custom validator if provided
+    const customValidator = this.validator();
+    if (customValidator) {
+      return customValidator(value);
+    }
+
+    // Use built-in validation based on input type
+    const inputType = this.type();
+    const inputElement = document.createElement('input');
+    inputElement.type = inputType;
+    inputElement.value = value;
+    
+    // For email type, use HTML5 validation
+    if (inputType === 'email') {
+      return inputElement.validity.valid;
+    }
+    
+    // For required fields, check if value exists
+    if (this.required() && !value.trim()) {
+      return false;
+    }
+    
+    // Default: valid if HTML5 validation passes
+    return inputElement.validity.valid;
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  onFocus(): void {
+    // Focus event can be emitted if needed
+  }
+
+  // ControlValueAccessor methods
+  writeValue(value: string): void {
+    this._value.set(value || '');
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    // Angular forms will handle this via the disabled input
+  }
+}
+

package/src/components/text-input/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-text-input';
+