valtech-components 2.0.688 → 2.0.689

package/src/lib/components/molecules/text-input/text-input.component.ts

@@ -0,0 +1,86 @@
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonInput } from '@ionic/angular/standalone';
+import { PresetService } from '../../../services/presets';
+import { applyDefaultValueToControl } from '../../../shared/utils/form-defaults';
+import { ComponentStates, InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-text-input',
+  standalone: true,
+  imports: [ReactiveFormsModule, IonInput],
+  template: ` <ion-input [formControl]="resolvedProps.control" type="text" [placeholder]="resolvedProps.placeholder" /> `,
+  styleUrls: ['./text-input.component.scss'],
+})
+/**
+ * val-text-input
+ *
+ * A text input field integrated with Angular forms.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-text-input preset="form-field" [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
+ *
+ * @example Static (backwards compatible):
+ * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
+ *
+ * @input preset: string - Name of preset to apply (e.g., 'form-field', 'search')
+ * @input props: InputMetadata - Configuration for the input (overrides preset values)
+ */
+export class TextInputComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable input configurations
+   * (size, fill, labelPosition, etc.) that can be registered at app level.
+   *
+   * @example
+   * <val-text-input preset="form-field" [props]="{ control: ctrl }"></val-text-input>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Input configuration object. Values here override preset values.
+   * @type {InputMetadata}
+   * @property control - The Angular FormControl for the input.
+   * @property placeholder - The placeholder text.
+   * @property label, name, hint, type, validators, etc. - See InputMetadata for all options.
+   */
+  @Input() props: Partial<InputMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   * Preset values are overridden by explicit props.
+   */
+  resolvedProps: InputMetadata = {} as InputMetadata;
+
+  states = ComponentStates;
+
+  ngOnInit() {
+    this.resolveProps();
+    // Apply default values on initialization
+    if (this.resolvedProps?.withDefault || this.resolvedProps?.value) {
+      applyDefaultValueToControl(this.resolvedProps);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset ? (this.presets.get('textInput', this.preset) as Partial<InputMetadata>) : {};
+
+    // Merge: preset defaults < explicit props
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as InputMetadata;
+  }
+}

package/src/lib/components/molecules/text-input/text-input.stories.ts

@@ -0,0 +1,301 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TextInputComponent } from './text-input.component';
+import { InputType, ComponentStates } from '../../types';
+
+const meta: Meta<TextInputComponent> = {
+  title: 'Molecules/TextInput',
+  component: TextInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, TextInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Text input configuration object',
+      control: false, // Disable control to avoid circular JSON error with FormControl
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-text-input
+
+A text input field integrated with Angular Reactive Forms.
+
+### Usage
+
+\`\`\`typescript
+// In your component
+myControl = new FormControl('', [Validators.required]);
+
+inputProps: InputMetadata = {
+  control: this.myControl,
+  token: 'username',
+  label: 'Username',
+  name: 'username',
+  hint: 'Enter your username',
+  placeholder: 'john_doe',
+  type: InputType.TEXT,
+  order: 1,
+  validators: [Validators.required],
+  errors: { required: 'Username is required' },
+  state: 'ENABLED'
+};
+\`\`\`
+
+\`\`\`html
+<val-text-input [props]="inputProps"></val-text-input>
+\`\`\`
+
+### Features
+
+- Integrated with Angular Reactive Forms
+- Support for validation
+- Placeholder text
+- Default value support
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TextInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: {
+      inputProps: {
+        control: new FormControl(''),
+        token: 'default',
+        label: 'Text Input',
+        name: 'text',
+        hint: '',
+        placeholder: 'Enter text...',
+        type: InputType.TEXT,
+        order: 1,
+        validators: [],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-text-input [props]="inputProps"></val-text-input>`,
+  }),
+};
+
+export const WithPlaceholder: Story = {
+  render: () => ({
+    props: {
+      inputProps: {
+        control: new FormControl(''),
+        token: 'placeholder',
+        label: 'Email',
+        name: 'email',
+        hint: 'We will never share your email',
+        placeholder: 'example@domain.com',
+        type: InputType.TEXT,
+        order: 1,
+        validators: [],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-text-input [props]="inputProps"></val-text-input>`,
+  }),
+};
+
+export const WithValue: Story = {
+  render: () => ({
+    props: {
+      inputProps: {
+        control: new FormControl('John Doe'),
+        token: 'value',
+        label: 'Full Name',
+        name: 'fullname',
+        hint: '',
+        placeholder: 'Enter your name',
+        type: InputType.TEXT,
+        order: 1,
+        validators: [],
+        errors: {},
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-text-input [props]="inputProps"></val-text-input>`,
+  }),
+};
+
+export const Required: Story = {
+  render: () => ({
+    props: {
+      inputProps: {
+        control: new FormControl('', Validators.required),
+        token: 'required',
+        label: 'Required Field',
+        name: 'required',
+        hint: 'This field is required',
+        placeholder: 'This field cannot be empty',
+        type: InputType.TEXT,
+        order: 1,
+        validators: [Validators.required],
+        errors: { required: 'This field is required' },
+        state: ComponentStates.ENABLED,
+      },
+    },
+    template: `<val-text-input [props]="inputProps"></val-text-input>`,
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    props: {
+      inputProps: {
+        control: new FormControl({ value: 'Disabled value', disabled: true }),
+        token: 'disabled',
+        label: 'Disabled Input',
+        name: 'disabled',
+        hint: '',
+        placeholder: 'Cannot edit',
+        type: InputType.TEXT,
+        order: 1,
+        validators: [],
+        errors: {},
+        state: ComponentStates.DISABLED,
+      },
+    },
+    template: `<val-text-input [props]="inputProps"></val-text-input>`,
+  }),
+};
+
+export const WithDefaultValue: Story = {
+  render: () => ({
+    props: {
+      inputProps: {
+        control: new FormControl(''),
+        token: 'default-value',
+        label: 'Country',
+        name: 'country',
+        hint: '',
+        placeholder: 'Enter country',
+        type: InputType.TEXT,
+        order: 1,
+        validators: [],
+        errors: {},
+        state: ComponentStates.ENABLED,
+        value: 'United States',
+        withDefault: true,
+      },
+    },
+    template: `<val-text-input [props]="inputProps"></val-text-input>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <h3 style="margin: 0; font-family: system-ui;">Text Input States</h3>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Default</label>
+          <val-text-input [props]="{
+            control: defaultControl,
+            token: 'default',
+            label: '',
+            name: 'default',
+            hint: '',
+            placeholder: 'Enter text...',
+            type: 0,
+            order: 1,
+            validators: [],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-text-input>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">With Value</label>
+          <val-text-input [props]="{
+            control: valueControl,
+            token: 'value',
+            label: '',
+            name: 'value',
+            hint: '',
+            placeholder: 'Enter text...',
+            type: 0,
+            order: 1,
+            validators: [],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-text-input>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Disabled</label>
+          <val-text-input [props]="{
+            control: disabledControl,
+            token: 'disabled',
+            label: '',
+            name: 'disabled',
+            hint: '',
+            placeholder: 'Cannot edit',
+            type: 0,
+            order: 1,
+            validators: [],
+            errors: {},
+            state: 'DISABLED'
+          }"></val-text-input>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Common Use Cases</h3>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Username</label>
+          <val-text-input [props]="{
+            control: usernameControl,
+            token: 'username',
+            label: '',
+            name: 'username',
+            hint: '',
+            placeholder: 'johndoe',
+            type: 0,
+            order: 1,
+            validators: [],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-text-input>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 4px; font-family: system-ui; font-size: 14px;">Search</label>
+          <val-text-input [props]="{
+            control: searchControl,
+            token: 'search',
+            label: '',
+            name: 'search',
+            hint: '',
+            placeholder: 'Search...',
+            type: 0,
+            order: 1,
+            validators: [],
+            errors: {},
+            state: 'ENABLED'
+          }"></val-text-input>
+        </div>
+      </div>
+    `,
+    props: {
+      defaultControl: new FormControl(''),
+      valueControl: new FormControl('Hello World'),
+      disabledControl: new FormControl({ value: 'Disabled', disabled: true }),
+      usernameControl: new FormControl(''),
+      searchControl: new FormControl(''),
+    },
+  }),
+};

package/src/lib/components/molecules/textarea-input/textarea-input.component.scss

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.textarea-container {
+  position: relative;
+
+  ion-textarea {
+    --background: var(--ion-background-color, #fff);
+    --padding-start: 12px;
+    --padding-end: 12px;
+    --padding-top: 12px;
+    --padding-bottom: 12px;
+
+    &.no-resize {
+      textarea {
+        resize: none !important;
+      }
+    }
+  }
+
+  &.has-error {
+    ion-textarea {
+      --border-color: var(--ion-color-danger);
+      --highlight-color: var(--ion-color-danger);
+    }
+  }
+}
+
+.char-counter {
+  font-size: 12px;
+  color: var(--ion-color-medium);
+  text-align: right;
+  margin-top: 4px;
+  padding-right: 4px;
+
+  &.remaining {
+    color: var(--ion-color-medium-shade);
+  }
+}
+
+.hint {
+  display: block;
+  font-size: 12px;
+  color: var(--ion-color-medium);
+  margin-top: 4px;
+  padding-left: 4px;
+}
+
+.error-message {
+  display: block;
+  font-size: 12px;
+  margin-top: 4px;
+  padding-left: 4px;
+}
+
+// Adjust counter position when using Ionic's built-in counter
+ion-textarea::part(counter) {
+  font-size: 12px;
+  color: var(--ion-color-medium);
+}

package/src/lib/components/molecules/textarea-input/textarea-input.component.ts

@@ -0,0 +1,195 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonTextarea, IonNote } from '@ionic/angular/standalone';
+import { PresetService } from '../../../services/presets';
+import { ComponentStates } from '../../types';
+import { TextareaInputMetadata } from './types';
+
+@Component({
+  selector: 'val-textarea-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonTextarea, IonNote],
+  template: `
+    <div class="textarea-container" [class]="resolvedProps.cssClass" [class.has-error]="hasError">
+      <ion-textarea
+        [formControl]="resolvedProps.control"
+        [placeholder]="getPlaceholder()"
+        [label]="getLabel()"
+        [labelPlacement]="resolvedProps.labelPlacement || 'stacked'"
+        [fill]="resolvedProps.fill || 'outline'"
+        [color]="hasError ? 'danger' : resolvedProps.color"
+        [rows]="resolvedProps.rows || 4"
+        [autoGrow]="resolvedProps.autoGrow ?? false"
+        [maxlength]="resolvedProps.maxLength"
+        [minlength]="resolvedProps.minLength"
+        [disabled]="resolvedProps.state === states.DISABLED"
+        [readonly]="resolvedProps.state === states.WORKING"
+        [spellcheck]="resolvedProps.spellcheck ?? true"
+        [autocapitalize]="resolvedProps.autocapitalize || 'sentences'"
+        [inputmode]="resolvedProps.inputMode || 'text'"
+        [wrap]="resolvedProps.wrap || 'soft'"
+        [counter]="resolvedProps.showCounter && !!resolvedProps.maxLength"
+        [counterFormatter]="counterFormatter"
+        [class.no-resize]="resolvedProps.disableResize"
+      ></ion-textarea>
+
+      @if (resolvedProps.showCounter && resolvedProps.maxLength && resolvedProps.counterFormat === 'remaining') {
+        <div class="char-counter remaining">
+          {{ getRemainingChars() }} {{ getRemainingLabel() }}
+        </div>
+      }
+
+      @if (resolvedProps.hint && !hasError) {
+        <ion-note class="hint">{{ getHint() }}</ion-note>
+      }
+
+      @if (hasError && resolvedProps.showErrors) {
+        <ion-note class="error-message" color="danger">
+          {{ getErrorMessage() }}
+        </ion-note>
+      }
+    </div>
+  `,
+  styleUrls: ['./textarea-input.component.scss'],
+})
+/**
+ * val-textarea-input
+ *
+ * A textarea input field with character counter, auto-grow, and validation support.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-textarea-input
+ *   [props]="{
+ *     control: messageControl,
+ *     placeholder: 'Enter your message',
+ *     rows: 4
+ *   }"
+ * ></val-textarea-input>
+ * ```
+ *
+ * @example With counter and validation
+ * ```html
+ * <val-textarea-input
+ *   [props]="{
+ *     control: bioControl,
+ *     label: 'Bio',
+ *     placeholder: 'Tell us about yourself',
+ *     maxLength: 500,
+ *     showCounter: true,
+ *     counterFormat: 'remaining',
+ *     autoGrow: true,
+ *     showErrors: true,
+ *     errors: { maxlength: 'Bio is too long' }
+ *   }"
+ * ></val-textarea-input>
+ * ```
+ */
+export class TextareaInputComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable textarea configurations
+   * that can be registered at app level via provideValtechPresets().
+   *
+   * @example
+   * <val-textarea-input preset="form-field" [props]="{ control: ctrl }"></val-textarea-input>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Textarea configuration object. Values here override preset values.
+   */
+  @Input() props: Partial<TextareaInputMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: TextareaInputMetadata = {} as TextareaInputMetadata;
+
+  states = ComponentStates;
+
+  ngOnInit(): void {
+    this.resolveProps();
+    this.applyDefaultValue();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+      this.applyDefaultValue();
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('textareaInput', this.preset) as Partial<TextareaInputMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as TextareaInputMetadata;
+  }
+
+  private applyDefaultValue(): void {
+    if (this.resolvedProps?.withDefault || this.resolvedProps?.value) {
+      const defaultValue =
+        typeof this.resolvedProps.withDefault === 'string' ? this.resolvedProps.withDefault : this.resolvedProps.value || '';
+      if (this.resolvedProps.control && !this.resolvedProps.control.value) {
+        this.resolvedProps.control.setValue(defaultValue);
+      }
+    }
+  }
+
+  getLabel(): string {
+    return this.resolvedProps.label || '';
+  }
+
+  getPlaceholder(): string {
+    return this.resolvedProps.placeholder || '';
+  }
+
+  getHint(): string {
+    return this.resolvedProps.hint || '';
+  }
+
+  get hasError(): boolean {
+    return !!(this.resolvedProps.control?.touched && this.resolvedProps.control?.invalid);
+  }
+
+  getErrorMessage(): string {
+    if (!this.resolvedProps.control?.errors || !this.resolvedProps.errors) {
+      return '';
+    }
+
+    const errorKeys = Object.keys(this.resolvedProps.control.errors);
+    for (const key of errorKeys) {
+      if (this.resolvedProps.errors[key]) {
+        return this.resolvedProps.errors[key];
+      }
+    }
+
+    return '';
+  }
+
+  getRemainingChars(): number {
+    const currentLength = this.resolvedProps.control?.value?.length || 0;
+    return (this.resolvedProps.maxLength || 0) - currentLength;
+  }
+
+  getRemainingLabel(): string {
+    const remaining = this.getRemainingChars();
+    return remaining === 1 ? 'character remaining' : 'characters remaining';
+  }
+
+  // Counter formatter for Ionic's built-in counter
+  counterFormatter = (inputLength: number, maxLength: number): string => {
+    return `${inputLength}/${maxLength}`;
+  };
+}