@propbinder/mobile-design 0.2.50 → 0.2.52

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

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

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

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

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

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

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

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

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