@propbinder/mobile-design 0.1.15 → 0.1.16

package/index.d.ts

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, OnDestroy, EventEmitter, OnInit, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';
 import { IonContent, NavController, ModalController, GestureController } from '@ionic/angular/standalone';
 import { ImpactStyle } from '@capacitor/haptics';
+import { ControlValueAccessor } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Animation } from '@ionic/angular';
 
@@ -3110,6 +3111,87 @@ declare class DsMobileHandbookFolderMiniComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookFolderMiniComponent, "ds-mobile-handbook-folder-mini", never, { "variant": { "alias": "variant"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * 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>
+ * ```
+ */
+declare class DsTextInputComponent implements ControlValueAccessor {
+    type: _angular_core.InputSignal<"text" | "email" | "tel" | "password" | "url" | "search">;
+    placeholder: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    hasError: _angular_core.InputSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string>;
+    autocomplete: _angular_core.InputSignal<string>;
+    inputmode: _angular_core.InputSignal<"text" | "email" | "tel" | "url" | "search" | "numeric" | undefined>;
+    autoClearError: _angular_core.InputSignal<boolean>;
+    validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    blur: _angular_core.OutputEmitterRef<FocusEvent>;
+    focus: _angular_core.OutputEmitterRef<FocusEvent>;
+    errorCleared: _angular_core.OutputEmitterRef<void>;
+    private _value;
+    value: _angular_core.Signal<string>;
+    inputId: string;
+    private onChange;
+    private onTouched;
+    onInput(event: Event): void;
+    /**
+     * Validates the input value based on type or custom validator
+     */
+    private validateInput;
+    onBlur(): void;
+    onFocus(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTextInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTextInputComponent, "ds-text-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "autoClearError": { "alias": "autoClearError"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "errorCleared": "errorCleared"; }, never, never, true, never>;
+}
+
 /**
  * User service for managing current user data globally
  */
@@ -3485,5 +3567,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
 export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"