valtech-components 2.0.794 → 2.0.795

package/src/lib/components/molecules/date-range-input/date-range-input.component.ts

@@ -0,0 +1,364 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import {
+  IonDatetime,
+  IonDatetimeButton,
+  IonModal,
+  IonNote,
+  IonIcon,
+} from '@ionic/angular/standalone';
+import { Subscription } from 'rxjs';
+import { addIcons } from 'ionicons';
+import { arrowForwardOutline, calendarOutline } from 'ionicons/icons';
+import { I18nService } from '../../../services/i18n';
+import { ComponentStates } from '../../types';
+import { DateRangeInputMetadata, DateRangeChangeEvent, DateRangeValue } from './types';
+
+addIcons({ arrowForwardOutline, calendarOutline });
+
+@Component({
+  selector: 'val-date-range-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonDatetime, IonDatetimeButton, IonModal, IonNote, IonIcon],
+  template: `
+    <div
+      class="date-range-container"
+      [class]="props.cssClass"
+      [class.has-error]="hasError"
+      [class.horizontal]="props.layout !== 'vertical'"
+      [class.vertical]="props.layout === 'vertical'"
+      [class.disabled]="props.state === states.DISABLED"
+    >
+      @if (props.label) {
+        <label class="range-label">{{ getLabel() }}</label>
+      }
+
+      <div class="date-inputs-wrapper">
+        <!-- Start Date -->
+        <div class="date-input start-date">
+          @if (props.startLabel || props.startLabelContentKey) {
+            <span class="date-label">{{ getStartLabel() }}</span>
+          }
+          <div class="button-container">
+            <ion-datetime-button [datetime]="startDatetimeId"></ion-datetime-button>
+          </div>
+          <ion-modal [keepContentsMounted]="true">
+            <ng-template>
+              <ion-datetime
+                [id]="startDatetimeId"
+                [formControl]="internalStartControl"
+                [presentation]="props.presentation || 'date'"
+                [locale]="props.locale || 'es-ES'"
+                [firstDayOfWeek]="props.firstDayOfWeek ?? 1"
+                [min]="getMinDate()"
+                [max]="getMaxStartDate()"
+                [showDefaultButtons]="true"
+                [doneText]="getDoneText()"
+                [cancelText]="getCancelText()"
+                (ionChange)="onStartDateChange($event)"
+              >
+                <span slot="title">{{ getStartLabel() || getStartDateFallback() }}</span>
+              </ion-datetime>
+            </ng-template>
+          </ion-modal>
+        </div>
+
+        <!-- Separator -->
+        <div class="date-separator">
+          <ion-icon name="arrow-forward-outline"></ion-icon>
+        </div>
+
+        <!-- End Date -->
+        <div class="date-input end-date">
+          @if (props.endLabel || props.endLabelContentKey) {
+            <span class="date-label">{{ getEndLabel() }}</span>
+          }
+          <div class="button-container">
+            <ion-datetime-button [datetime]="endDatetimeId"></ion-datetime-button>
+          </div>
+          <ion-modal [keepContentsMounted]="true">
+            <ng-template>
+              <ion-datetime
+                [id]="endDatetimeId"
+                [formControl]="internalEndControl"
+                [presentation]="props.presentation || 'date'"
+                [locale]="props.locale || 'es-ES'"
+                [firstDayOfWeek]="props.firstDayOfWeek ?? 1"
+                [min]="getMinEndDate()"
+                [max]="getMaxDate()"
+                [showDefaultButtons]="true"
+                [doneText]="getDoneText()"
+                [cancelText]="getCancelText()"
+                (ionChange)="onEndDateChange($event)"
+              >
+                <span slot="title">{{ getEndLabel() || getEndDateFallback() }}</span>
+              </ion-datetime>
+            </ng-template>
+          </ion-modal>
+        </div>
+      </div>
+
+      @if (showDayCount && dayCount !== null) {
+        <div class="day-count">
+          {{ dayCount }} {{ getDayLabel() }}
+        </div>
+      }
+
+      @if (props.hint && !hasError) {
+        <ion-note class="hint">{{ getHint() }}</ion-note>
+      }
+
+      @if (hasError && props.showErrors) {
+        <ion-note class="error-message" color="danger">
+          {{ getErrorMessage() }}
+        </ion-note>
+      }
+    </div>
+  `,
+  styleUrls: ['./date-range-input.component.scss'],
+})
+/**
+ * val-date-range-input
+ *
+ * A date range picker with start and end date selection.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-date-range-input
+ *   [props]="{
+ *     control: dateRangeControl,
+ *     startLabel: 'Check-in',
+ *     endLabel: 'Check-out'
+ *   }"
+ * ></val-date-range-input>
+ * ```
+ *
+ * @example With validation
+ * ```html
+ * <val-date-range-input
+ *   [props]="{
+ *     control: rangeControl,
+ *     label: 'Trip dates',
+ *     requireBoth: true,
+ *     minRangeDays: 2,
+ *     maxRangeDays: 30,
+ *     disablePastDates: true,
+ *     showErrors: true
+ *   }"
+ *   (rangeChange)="onRangeChange($event)"
+ * ></val-date-range-input>
+ * ```
+ */
+export class DateRangeInputComponent implements OnInit, OnDestroy {
+  @Input() props: DateRangeInputMetadata;
+
+  @Output() rangeChange = new EventEmitter<DateRangeChangeEvent>();
+
+  states = ComponentStates;
+
+  internalStartControl = new FormControl<string | null>(null);
+  internalEndControl = new FormControl<string | null>(null);
+
+  startDatetimeId = `start-datetime-${Math.random().toString(36).substr(2, 9)}`;
+  endDatetimeId = `end-datetime-${Math.random().toString(36).substr(2, 9)}`;
+
+  showDayCount = true;
+
+  private i18n = inject(I18nService);
+  private valueSubscription: Subscription | null = null;
+
+  /** Get done button text from props or i18n */
+  getDoneText(): string {
+    return this.props.doneText || this.i18n.t('ok');
+  }
+
+  /** Get cancel button text from props or i18n */
+  getCancelText(): string {
+    return this.props.cancelText || this.i18n.t('cancel');
+  }
+
+  /** Get start date fallback label */
+  getStartDateFallback(): string {
+    return this.i18n.t('startDate', '_global') || 'Start date';
+  }
+
+  /** Get end date fallback label */
+  getEndDateFallback(): string {
+    return this.i18n.t('endDate', '_global') || 'End date';
+  }
+
+  /** Get day/days label based on count */
+  getDayLabel(): string {
+    if (this.dayCount === 1) {
+      return this.i18n.t('day', '_global') || 'day';
+    }
+    return this.i18n.t('days', '_global') || 'days';
+  }
+
+  ngOnInit(): void {
+    // Use provided controls or internal ones
+    if (this.props.startControl) {
+      this.internalStartControl = this.props.startControl;
+    }
+    if (this.props.endControl) {
+      this.internalEndControl = this.props.endControl;
+    }
+
+    // Initialize from main control
+    if (this.props.control?.value) {
+      const value = this.props.control.value;
+      if (value.start) {
+        this.internalStartControl.setValue(value.start);
+      }
+      if (value.end) {
+        this.internalEndControl.setValue(value.end);
+      }
+    }
+
+    // Subscribe to main control changes
+    this.valueSubscription = this.props.control?.valueChanges.subscribe(value => {
+      if (value) {
+        if (value.start !== this.internalStartControl.value) {
+          this.internalStartControl.setValue(value.start);
+        }
+        if (value.end !== this.internalEndControl.value) {
+          this.internalEndControl.setValue(value.end);
+        }
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.valueSubscription?.unsubscribe();
+  }
+
+  getLabel(): string {
+    return this.props.label || '';
+  }
+
+  getStartLabel(): string {
+    return this.props.startLabel || '';
+  }
+
+  getEndLabel(): string {
+    return this.props.endLabel || '';
+  }
+
+  getHint(): string {
+    return this.props.hint || '';
+  }
+
+  getMinDate(): string | undefined {
+    if (this.props.disablePastDates) {
+      return new Date().toISOString();
+    }
+    return this.props.min;
+  }
+
+  getMaxDate(): string | undefined {
+    if (this.props.disableFutureDates) {
+      return new Date().toISOString();
+    }
+    return this.props.max;
+  }
+
+  getMaxStartDate(): string | undefined {
+    // Start date cannot be after end date
+    const endDate = this.internalEndControl.value;
+    if (endDate) {
+      return endDate;
+    }
+    return this.getMaxDate();
+  }
+
+  getMinEndDate(): string | undefined {
+    // End date cannot be before start date
+    const startDate = this.internalStartControl.value;
+    if (startDate) {
+      return startDate;
+    }
+    return this.getMinDate();
+  }
+
+  get hasError(): boolean {
+    return !!(this.props.control?.touched && this.props.control?.invalid);
+  }
+
+  getErrorMessage(): string {
+    if (!this.props.control?.errors || !this.props.errors) {
+      return '';
+    }
+
+    const errorKeys = Object.keys(this.props.control.errors);
+    for (const key of errorKeys) {
+      if (this.props.errors[key]) {
+        return this.props.errors[key];
+      }
+    }
+
+    return '';
+  }
+
+  get dayCount(): number | null {
+    const start = this.internalStartControl.value;
+    const end = this.internalEndControl.value;
+
+    if (!start || !end) {
+      return null;
+    }
+
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    const diffTime = endDate.getTime() - startDate.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    return Math.max(0, diffDays);
+  }
+
+  onStartDateChange(event: CustomEvent): void {
+    this.updateMainControl();
+  }
+
+  onEndDateChange(event: CustomEvent): void {
+    this.updateMainControl();
+  }
+
+  private updateMainControl(): void {
+    const value: DateRangeValue = {
+      start: this.internalStartControl.value,
+      end: this.internalEndControl.value,
+    };
+
+    this.props.control?.setValue(value);
+    this.props.control?.markAsTouched();
+
+    // Validate and emit
+    const isValid = this.validateRange(value);
+    this.rangeChange.emit({
+      value,
+      isValid,
+      dayCount: this.dayCount,
+    });
+  }
+
+  private validateRange(value: DateRangeValue): boolean {
+    // Check required
+    if (this.props.requireBoth && (!value.start || !value.end)) {
+      return false;
+    }
+
+    // Check day count constraints
+    const days = this.dayCount;
+    if (days !== null) {
+      if (this.props.minRangeDays !== undefined && days < this.props.minRangeDays) {
+        return false;
+      }
+      if (this.props.maxRangeDays !== undefined && days > this.props.maxRangeDays) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+}

package/src/lib/components/molecules/date-range-input/date-range-input.stories.ts

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { DateRangeInputComponent } from './date-range-input.component';
+import { DateRangeInputMetadata, DateRangeValue } from './types';
+
+const createDateRangeInputProps = (overrides: Partial<DateRangeInputMetadata> = {}): DateRangeInputMetadata => ({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  startLabel: 'Start Date',
+  endLabel: 'End Date',
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createDateRangeInputProps();
+
+const withLabelProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  label: 'Trip Dates',
+  startLabel: 'Departure',
+  endLabel: 'Return',
+});
+
+const withValuesProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({
+    start: '2025-01-15',
+    end: '2025-01-22',
+  }),
+  startLabel: 'Check-in',
+  endLabel: 'Check-out',
+});
+
+const verticalLayoutProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  layout: 'vertical',
+  startLabel: 'From',
+  endLabel: 'To',
+  label: 'Select Date Range',
+});
+
+const withHintProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  startLabel: 'Start',
+  endLabel: 'End',
+  hint: 'Select a date range of up to 30 days',
+});
+
+const disablePastProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  startLabel: 'Start Date',
+  endLabel: 'End Date',
+  disablePastDates: true,
+  label: 'Future Dates Only',
+});
+
+const withValidationProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  startLabel: 'Start',
+  endLabel: 'End',
+  requireBoth: true,
+  minRangeDays: 2,
+  maxRangeDays: 14,
+  showErrors: true,
+  errors: {
+    required: 'Both dates are required',
+    minRange: 'Minimum 2 days required',
+    maxRange: 'Maximum 14 days allowed',
+  },
+});
+
+const bookingProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  label: 'Booking Dates',
+  startLabel: 'Check-in',
+  endLabel: 'Check-out',
+  disablePastDates: true,
+  minRangeDays: 1,
+  maxRangeDays: 30,
+  locale: 'en-US',
+});
+
+const dateTimeProps = createDateRangeInputProps({
+  control: new FormControl<DateRangeValue | null>({ start: null, end: null }),
+  startLabel: 'Start',
+  endLabel: 'End',
+  presentation: 'date-time',
+  label: 'Event Schedule',
+});
+
+const meta: Meta<DateRangeInputComponent> = {
+  title: 'Molecules/DateRangeInput',
+  component: DateRangeInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, DateRangeInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Date range input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'DateRangeInputMetadata',
+          detail: `{
+  control: FormControl<DateRangeValue | null>;
+  label?: string;
+  startLabel?: string;
+  endLabel?: string;
+  hint?: string;
+  layout?: 'horizontal' | 'vertical';
+  presentation?: 'date' | 'date-time' | 'month' | 'month-year' | 'year';
+  locale?: string;
+  min?: string;
+  max?: string;
+  disablePastDates?: boolean;
+  disableFutureDates?: boolean;
+  requireBoth?: boolean;
+  minRangeDays?: number;
+  maxRangeDays?: number;
+  showErrors?: boolean;
+  errors?: Record<string, string>;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-date-range-input
+
+A date range picker with start and end date selection.
+
+### Features
+
+- **Dual Date Pickers**: Separate start and end date selection
+- **Day Count**: Automatic calculation of days in range
+- **Validation**: Min/max range days, require both dates
+- **Layout Options**: Horizontal or vertical layout
+- **Date Restrictions**: Disable past/future dates
+- **Multiple Presentations**: Date, date-time, month, year
+
+### Usage
+
+\`\`\`html
+<val-date-range-input
+  [props]="{
+    control: dateRangeControl,
+    label: 'Trip Dates',
+    startLabel: 'Departure',
+    endLabel: 'Return',
+    disablePastDates: true
+  }"
+  (rangeChange)="onRangeChange($event)"
+></val-date-range-input>
+\`\`\`
+
+\`\`\`typescript
+// In your component
+dateRangeControl = new FormControl<DateRangeValue | null>({
+  start: null,
+  end: null
+});
+\`\`\`
+
+### Events
+
+- **rangeChange**: Emits when the date range changes with value, validity, and day count
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DateRangeInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: defaultProps },
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: withLabelProps },
+  }),
+};
+
+export const WithValues: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: withValuesProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Date range input with pre-selected dates showing day count.',
+      },
+    },
+  },
+};
+
+export const VerticalLayout: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: verticalLayoutProps },
+  }),
+};
+
+export const WithHint: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: withHintProps },
+  }),
+};
+
+export const DisablePastDates: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: disablePastProps },
+  }),
+};
+
+export const WithValidation: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: withValidationProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Date range with validation: both dates required, 2-14 day range.',
+      },
+    },
+  },
+};
+
+export const BookingDates: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: bookingProps },
+  }),
+};
+
+export const DateTime: Story = {
+  render: () => ({
+    template: `<div style="max-width: 500px;"><val-date-range-input [props]="rangeProps"></val-date-range-input></div>`,
+    props: { rangeProps: dateTimeProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Date range with date-time presentation for event scheduling.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 500px;">
+        <h3 style="margin: 0; font-family: system-ui;">Date Range Inputs</h3>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; color: #666;">Hotel Booking</p>
+          <val-date-range-input [props]="booking"></val-date-range-input>
+        </div>
+
+        <div>
+          <p style="margin: 0 0 8px; font-family: system-ui; color: #666;">Vertical Layout</p>
+          <val-date-range-input [props]="vertical"></val-date-range-input>
+        </div>
+      </div>
+    `,
+    props: {
+      booking: bookingProps,
+      vertical: verticalLayoutProps,
+    },
+  }),
+};