valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/number-from-to/number-from-to.component.ts

@@ -0,0 +1,134 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { IonInput, IonLabel } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { NumberFromToMetadata } from './types';
+
+@Component({
+  selector: 'val-number-from-to',
+  standalone: true,
+  imports: [ReactiveFormsModule, IonInput, IonLabel],
+  template: `
+    <div class="number-from-to-container">
+      <ion-label position="stacked">{{ getFromLabel() }}</ion-label>
+      <ion-input
+        [formControl]="fromControl"
+        type="number"
+        [placeholder]="props.fromPlaceholder || props.placeholder"
+        [min]="props.min"
+        [max]="props.max"
+        [step]="props.step"
+      >
+      </ion-input>
+
+      <ion-label position="stacked">{{ getToLabel() }}</ion-label>
+      <ion-input
+        [formControl]="toControl"
+        type="number"
+        [placeholder]="props.toPlaceholder || props.placeholder"
+        [min]="props.min"
+        [max]="props.max"
+        [step]="props.step"
+      >
+      </ion-input>
+    </div>
+  `,
+  styleUrls: ['./number-from-to.component.scss'],
+})
+/**
+ * val-number-from-to
+ *
+ * A dual number input for specifying a range (from/to values), integrated with Angular forms.
+ *
+ * @example
+ * <val-number-from-to [props]="{ fromControl: fromCtrl, toControl: toCtrl, min: 0, max: 100 }"></val-number-from-to>
+ *
+ * @input props: NumberFromToMetadata - Configuration for the number range input.
+ */
+export class NumberFromToComponent implements OnInit {
+  /**
+   * Input configuration object.
+   * @type {NumberFromToMetadata}
+   * @property fromControl - The Angular FormControl for the "from" value.
+   * @property toControl - The Angular FormControl for the "to" value.
+   */
+  @Input() props: NumberFromToMetadata;
+
+  private i18n = inject(I18nService);
+
+  /** Get from label with i18n fallback */
+  getFromLabel(): string {
+    return this.props.fromLabel || this.i18n.t('from');
+  }
+
+  /** Get to label with i18n fallback */
+  getToLabel(): string {
+    return this.props.toLabel || this.i18n.t('to');
+  }
+
+  constructor() {}
+
+  ngOnInit() {
+    // Apply default values if configured
+    if (this.props?.withDefault || this.props?.value) {
+      this.applyDefaultValues();
+    }
+  }
+
+  private applyDefaultValues() {
+    const defaultValue = this.resolveDefaultValue();
+    if (defaultValue !== null) {
+      if (typeof defaultValue === 'object' && defaultValue.from !== undefined) {
+        this.fromControl?.setValue(defaultValue.from);
+        this.toControl?.setValue(defaultValue.to);
+      } else {
+        // Si es un valor simple, aplicarlo a ambos controles
+        this.fromControl?.setValue(defaultValue);
+        this.toControl?.setValue(defaultValue);
+      }
+      this.fromControl?.markAsPristine();
+      this.toControl?.markAsPristine();
+      this.fromControl?.updateValueAndValidity();
+      this.toControl?.updateValueAndValidity();
+    }
+  }
+
+  private resolveDefaultValue(): any {
+    // Explicit value takes precedence
+    if (this.props.value !== undefined && this.props.value !== null && this.props.value !== '') {
+      return this.parseValue(this.props.value);
+    }
+
+    // No default configuration
+    if (!this.props.withDefault) {
+      return null;
+    }
+
+    // Custom default value
+    if (typeof this.props.withDefault === 'string') {
+      return this.parseValue(this.props.withDefault);
+    }
+
+    // Auto default value (withDefault === true)
+    return { from: 0, to: 0 };
+  }
+
+  private parseValue(value: string): any {
+    try {
+      // Try to parse as JSON first (for object values)
+      return JSON.parse(value);
+    } catch {
+      // If not JSON, treat as number
+      const numValue = parseFloat(value) || 0;
+      return { from: numValue, to: numValue };
+    }
+  }
+
+  get fromControl(): FormControl {
+    return this.props.fromControl;
+  }
+
+  get toControl(): FormControl {
+    return this.props.toControl;
+  }
+}

package/src/lib/components/molecules/number-from-to/number-from-to.stories.ts

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FormControl } from '@angular/forms';
+import { NumberFromToComponent } from './number-from-to.component';
+
+const createNumberFromToProps = (overrides: Record<string, any> = {}) => ({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  placeholder: 'Enter value',
+  fromLabel: 'From',
+  toLabel: 'To',
+  fromPlaceholder: 'Min',
+  toPlaceholder: 'Max',
+  ...overrides,
+});
+
+const defaultProps = createNumberFromToProps();
+
+const priceRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(100),
+  toControl: new FormControl(500),
+  fromLabel: 'Min Price',
+  toLabel: 'Max Price',
+  fromPlaceholder: '$0',
+  toPlaceholder: '$10000',
+  range: { min: 0, max: 10000 },
+});
+
+const ageRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(18),
+  toControl: new FormControl(65),
+  fromLabel: 'Min Age',
+  toLabel: 'Max Age',
+  fromPlaceholder: '0',
+  toPlaceholder: '120',
+  range: { min: 0, max: 120 },
+});
+
+const quantityRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Quantity',
+  toLabel: 'Max Quantity',
+  fromPlaceholder: '1',
+  toPlaceholder: '1000',
+  range: { min: 1, max: 1000 },
+});
+
+const yearRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(2020),
+  toControl: new FormControl(2024),
+  fromLabel: 'Start Year',
+  toLabel: 'End Year',
+  fromPlaceholder: '1900',
+  toPlaceholder: '2030',
+  range: { min: 1900, max: 2030 },
+});
+
+const disabledProps = createNumberFromToProps({
+  fromControl: new FormControl({ value: 50, disabled: true }),
+  toControl: new FormControl({ value: 100, disabled: true }),
+  fromLabel: 'From (disabled)',
+  toLabel: 'To (disabled)',
+});
+
+const showcasePriceProps = createNumberFromToProps({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Price ($)',
+  toLabel: 'Max Price ($)',
+  fromPlaceholder: '0',
+  toPlaceholder: '10000',
+  range: { min: 0, max: 10000 },
+});
+
+const showcaseSizeProps = createNumberFromToProps({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Size (m²)',
+  toLabel: 'Max Size (m²)',
+  fromPlaceholder: '20',
+  toPlaceholder: '500',
+  range: { min: 20, max: 500 },
+});
+
+const showcaseRoomsProps = createNumberFromToProps({
+  fromControl: new FormControl(1),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Rooms',
+  toLabel: 'Max Rooms',
+  fromPlaceholder: '1',
+  toPlaceholder: '10',
+  range: { min: 1, max: 10 },
+});
+
+const meta: Meta<NumberFromToComponent> = {
+  title: 'Molecules/NumberFromTo',
+  component: NumberFromToComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the number from-to input',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NumberFromToComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const PriceRange: Story = {
+  render: () => ({
+    props: { props: priceRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const AgeRange: Story = {
+  render: () => ({
+    props: { props: ageRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const QuantityRange: Story = {
+  render: () => ({
+    props: { props: quantityRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const YearRange: Story = {
+  render: () => ({
+    props: { props: yearRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    props: { props: disabledProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      priceProps: showcasePriceProps,
+      sizeProps: showcaseSizeProps,
+      roomsProps: showcaseRoomsProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <h3>Property Search Filters</h3>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Price Range</h4>
+          <val-number-from-to [props]="priceProps"></val-number-from-to>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Property Size</h4>
+          <val-number-from-to [props]="sizeProps"></val-number-from-to>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Number of Rooms</h4>
+          <val-number-from-to [props]="roomsProps"></val-number-from-to>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/number-from-to/types.ts

@@ -0,0 +1,91 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+
+/**
+ * Number range value with from and to.
+ */
+export interface NumberFromToValue {
+  /** Starting value */
+  from: number | null;
+  /** Ending value */
+  to: number | null;
+}
+
+/**
+ * Metadata for the number from-to input component.
+ */
+export interface NumberFromToMetadata {
+  /** Main form control (optional, stores combined value) */
+  control?: FormControl<NumberFromToValue | null>;
+  /** Form control for "from" value (required for standalone use) */
+  fromControl?: FormControl<number | null>;
+  /** Form control for "to" value (required for standalone use) */
+  toControl?: FormControl<number | null>;
+  /** Unique token for the input */
+  token?: string;
+  /** Display label */
+  label?: string;
+  /** Field name */
+  name?: string;
+  /** Help text */
+  hint?: string;
+  /** Field state */
+  state?: ComponentState;
+
+  // === Labels ===
+  /** Label for "from" field */
+  fromLabel?: string;
+  /** Label for "to" field */
+  toLabel?: string;
+  /** Placeholder for main input */
+  placeholder?: string;
+  /** Placeholder for "from" field */
+  fromPlaceholder?: string;
+  /** Placeholder for "to" field */
+  toPlaceholder?: string;
+
+  // === Range configuration ===
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+
+  // === Styling ===
+  /** Component color */
+  color?: Color;
+  /** Custom CSS class */
+  cssClass?: string;
+
+  // === Default value ===
+  /** Initial value for the field */
+  value?: string;
+  /** Default value configuration - string for custom defaults, true for auto defaults */
+  withDefault?: string | boolean;
+
+  // === Reactive content ===
+  /** Content key for reactive label */
+  contentKey?: string;
+  /** Component class name for content lookup */
+  contentClass?: string;
+  /** Fallback text if content key is not found */
+  contentFallback?: string;
+
+  // === Validation display ===
+  /** Custom error messages */
+  errors?: Record<string, string>;
+  /** Show validation errors */
+  showErrors?: boolean;
+}
+
+/**
+ * Event emitted when number range changes.
+ */
+export interface NumberFromToChangeEvent {
+  /** Number range value */
+  value: NumberFromToValue;
+  /** Whether the range is valid (from <= to) */
+  isValid: boolean;
+}

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

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonInput } from '@ionic/angular/standalone';
+import { applyDefaultValueToControl } from '../../../shared/utils/form-defaults';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-number-input',
+  standalone: true,
+  imports: [ReactiveFormsModule, IonInput],
+  template: ` <ion-input [formControl]="props.control" type="number" [placeholder]="props.placeholder"></ion-input> `,
+  styleUrls: ['./number-input.component.scss'],
+})
+/**
+ * val-number-input
+ *
+ * A number input field integrated with Angular forms.
+ *
+ * @example
+ * <val-number-input [props]="{ control: myControl, placeholder: 'Enter a number' }"></val-number-input>
+ *
+ * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ */
+export class NumberInputComponent implements OnInit {
+  /**
+   * Input configuration object.
+   * @type {InputMetadata}
+   * @property control - The Angular FormControl for the input.
+   * @property placeholder - The placeholder text.
+   */
+  @Input() props: InputMetadata;
+
+  constructor() {}
+
+  ngOnInit() {
+    // Apply default values on initialization
+    if (this.props?.withDefault || this.props?.value) {
+      applyDefaultValueToControl(this.props);
+    }
+  }
+}

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

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NumberInputComponent } from './number-input.component';
+import { InputMetadata } from '../../types';
+
+const createNumberInputProps = (overrides: Partial<InputMetadata> = {}): InputMetadata =>
+  ({
+    control: new FormControl(null),
+    token: 'number-input',
+    label: 'Number',
+    name: 'number-field',
+    placeholder: 'Enter a number',
+    ...overrides,
+  }) as InputMetadata;
+
+// Pre-create all props at module level
+const defaultProps = createNumberInputProps();
+const withValueProps = createNumberInputProps({ control: new FormControl(42), placeholder: 'Has value' });
+const quantityProps = createNumberInputProps({ placeholder: 'Quantity', label: 'Quantity' });
+const ageProps = createNumberInputProps({ placeholder: 'Enter your age', label: 'Age' });
+const priceProps = createNumberInputProps({ placeholder: '0.00', label: 'Price' });
+
+// Showcase props
+const showcaseQuantityProps = createNumberInputProps({ control: new FormControl(5), placeholder: 'Qty' });
+const showcasePriceProps = createNumberInputProps({ placeholder: 'Amount' });
+const showcaseAgeProps = createNumberInputProps({ placeholder: 'Age' });
+
+const meta: Meta<NumberInputComponent> = {
+  title: 'Molecules/NumberInput',
+  component: NumberInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, NumberInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Number input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InputMetadata',
+          detail: `{
+  control: FormControl;
+  token: string;
+  label: string;
+  name: string;
+  placeholder: string;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-number-input
+
+A number input field integrated with Angular forms.
+
+### Usage
+
+\`\`\`html
+<val-number-input
+  [props]="{
+    control: quantityControl,
+    placeholder: 'Enter quantity'
+  }"
+></val-number-input>
+\`\`\`
+
+> **Note**: For more advanced number input with increment/decrement buttons and presets, see \`val-number-stepper\`.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NumberInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<val-number-input [props]="inputProps"></val-number-input>`,
+    props: { inputProps: defaultProps },
+  }),
+};
+
+export const WithValue: Story = {
+  render: () => ({
+    template: `<val-number-input [props]="inputProps"></val-number-input>`,
+    props: { inputProps: withValueProps },
+  }),
+};
+
+export const Quantity: Story = {
+  render: () => ({
+    template: `<val-number-input [props]="inputProps"></val-number-input>`,
+    props: { inputProps: quantityProps },
+  }),
+};
+
+export const Age: Story = {
+  render: () => ({
+    template: `<val-number-input [props]="inputProps"></val-number-input>`,
+    props: { inputProps: ageProps },
+  }),
+};
+
+export const Price: Story = {
+  render: () => ({
+    template: `<val-number-input [props]="inputProps"></val-number-input>`,
+    props: { inputProps: priceProps },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 300px;">
+        <h3 style="margin: 0; font-family: system-ui;">Number Inputs</h3>
+
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div>
+            <label style="font-family: system-ui; font-size: 14px; color: #666; display: block; margin-bottom: 4px;">Quantity</label>
+            <val-number-input [props]="quantity"></val-number-input>
+          </div>
+
+          <div>
+            <label style="font-family: system-ui; font-size: 14px; color: #666; display: block; margin-bottom: 4px;">Price</label>
+            <val-number-input [props]="price"></val-number-input>
+          </div>
+
+          <div>
+            <label style="font-family: system-ui; font-size: 14px; color: #666; display: block; margin-bottom: 4px;">Age</label>
+            <val-number-input [props]="age"></val-number-input>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      quantity: showcaseQuantityProps,
+      price: showcasePriceProps,
+      age: showcaseAgeProps,
+    },
+  }),
+};