valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/searchbar/types.ts

@@ -0,0 +1,38 @@
+/**
+ * Configuration for val-searchbar component.
+ */
+export interface SearchbarMetadata {
+  /**
+   * Whether the searchbar is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Custom placeholder text.
+   * If not provided, uses i18n default ('search').
+   */
+  placeholder?: string;
+
+  /**
+   * Custom cancel button text.
+   * If not provided, uses i18n default ('cancel').
+   */
+  cancelText?: string;
+
+  /**
+   * Debounce time in milliseconds for search input.
+   * Default: 500
+   */
+  debounce?: number;
+
+  /**
+   * When to show the cancel button.
+   * Default: 'focus'
+   */
+  showCancelButton?: 'always' | 'focus' | 'never';
+
+  /**
+   * Mode for styling (iOS or MD).
+   */
+  mode?: 'ios' | 'md';
+}

package/src/lib/components/molecules/segment-control/segment-control.component.scss

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+ion-segment {
+  --background: var(--ion-color-light);
+  border-radius: 8px;
+}
+
+ion-segment-button {
+  --indicator-box-shadow: none;
+  --indicator-color: var(--ion-color-primary);
+  --color: var(--ion-color-medium);
+  --color-checked: var(--ion-color-primary-contrast);
+  --border-radius: 6px;
+  min-width: 80px;
+  text-transform: none;
+  font-weight: 500;
+}
+
+ion-icon {
+  font-size: 18px;
+}
+
+ion-label {
+  font-size: 13px;
+}

package/src/lib/components/molecules/segment-control/segment-control.component.ts

@@ -0,0 +1,121 @@
+import { Component, inject, Input, OnChanges, OnInit, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { PresetService } from '../../../services/presets';
+import { SegmentControlMetadata, SegmentOption } from './types';
+import { ComponentStates } from '../../types';
+import { addIcons } from 'ionicons';
+import { list, grid, apps, menu, settings, home, search, person, heart, star } from 'ionicons/icons';
+
+// Register common icons
+addIcons({ list, grid, apps, menu, settings, home, search, person, heart, star });
+
+@Component({
+  selector: 'val-segment-control',
+  standalone: true,
+  imports: [CommonModule, IonSegment, IonSegmentButton, IonLabel, IonIcon],
+  template: `
+    <ion-segment
+      [value]="resolvedProps.value"
+      [color]="resolvedProps.color || 'primary'"
+      [disabled]="resolvedProps.state === states.DISABLED || resolvedProps.disabled"
+      [scrollable]="resolvedProps.scrollable ?? false"
+      [swipeGesture]="resolvedProps.swipeGesture ?? true"
+      [mode]="resolvedProps.mode"
+      (ionChange)="onSegmentChange($event)"
+    >
+      @for (option of resolvedProps.options; track option.value) {
+        <ion-segment-button
+          [value]="option.value"
+          [disabled]="option.disabled"
+          [layout]="option.layout || 'icon-top'"
+        >
+          @if (option.icon) {
+            <ion-icon [name]="option.icon"></ion-icon>
+          }
+          @if (getOptionLabel(option)) {
+            <ion-label>{{ getOptionLabel(option) }}</ion-label>
+          }
+        </ion-segment-button>
+      }
+    </ion-segment>
+  `,
+  styleUrls: ['./segment-control.component.scss'],
+})
+/**
+ * val-segment-control
+ *
+ * A segmented control for switching between views or options.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset:
+ * <val-segment-control preset="view-toggle" [props]="{ options: [...] }"></val-segment-control>
+ *
+ * @example Basic usage
+ * <val-segment-control [props]="{
+ *   options: [
+ *     { value: 'list', label: 'List', icon: 'list' },
+ *     { value: 'grid', label: 'Grid', icon: 'grid' }
+ *   ],
+ *   value: 'list'
+ * }" (segmentChange)="onViewChange($event)"></val-segment-control>
+ *
+ * @input preset: string - Name of preset to apply
+ * @input props: SegmentControlMetadata - Configuration for the segment control
+ * @output segmentChange: string - Emits the selected value when changed
+ */
+export class SegmentControlComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable segment configurations.
+   */
+  @Input() preset?: string;
+
+  /**
+   * Input configuration object. Values here override preset values.
+   */
+  @Input() props: Partial<SegmentControlMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: SegmentControlMetadata = {} as SegmentControlMetadata;
+
+  /**
+   * Emits the selected value when the segment changes.
+   */
+  @Output() segmentChange = new EventEmitter<string>();
+
+  states = ComponentStates;
+
+  ngOnInit() {
+    this.resolveProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+    }
+  }
+
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('segmentControl', this.preset) as Partial<SegmentControlMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as SegmentControlMetadata;
+  }
+
+  onSegmentChange(event: CustomEvent): void {
+    const value = event.detail.value;
+    this.segmentChange.emit(value);
+  }
+
+  getOptionLabel(option: SegmentOption): string {
+    return option.label || option.contentFallback || '';
+  }
+}

package/src/lib/components/molecules/segment-control/segment-control.stories.ts

@@ -0,0 +1,296 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { SegmentControlComponent } from './segment-control.component';
+import { SegmentControlMetadata } from './types';
+
+const createSegmentControlProps = (overrides: Partial<SegmentControlMetadata> = {}): SegmentControlMetadata => ({
+  options: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ],
+  value: 'option1',
+  color: 'primary',
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createSegmentControlProps();
+const listGridProps = createSegmentControlProps({
+  options: [
+    { value: 'list', label: 'List', icon: 'list' },
+    { value: 'grid', label: 'Grid', icon: 'grid' },
+  ],
+  value: 'list',
+});
+const iconsOnlyProps = createSegmentControlProps({
+  options: [
+    { value: 'home', icon: 'home' },
+    { value: 'search', icon: 'search' },
+    { value: 'person', icon: 'person' },
+    { value: 'settings', icon: 'settings' },
+  ],
+  value: 'home',
+});
+const labelsOnlyProps = createSegmentControlProps({
+  options: [
+    { value: 'all', label: 'All' },
+    { value: 'active', label: 'Active' },
+    { value: 'completed', label: 'Completed' },
+  ],
+  value: 'all',
+});
+const scrollableProps = createSegmentControlProps({
+  options: [
+    { value: 'mon', label: 'Monday' },
+    { value: 'tue', label: 'Tuesday' },
+    { value: 'wed', label: 'Wednesday' },
+    { value: 'thu', label: 'Thursday' },
+    { value: 'fri', label: 'Friday' },
+    { value: 'sat', label: 'Saturday' },
+    { value: 'sun', label: 'Sunday' },
+  ],
+  value: 'mon',
+  scrollable: true,
+});
+const secondaryProps = createSegmentControlProps({
+  color: 'secondary',
+});
+const withDisabledProps = createSegmentControlProps({
+  options: [
+    { value: 'opt1', label: 'Enabled' },
+    { value: 'opt2', label: 'Disabled', disabled: true },
+    { value: 'opt3', label: 'Enabled' },
+  ],
+  value: 'opt1',
+});
+const disabledAllProps = createSegmentControlProps({
+  disabled: true,
+});
+const iconStartProps = createSegmentControlProps({
+  options: [
+    { value: 'home', label: 'Home', icon: 'home', layout: 'icon-start' },
+    { value: 'search', label: 'Search', icon: 'search', layout: 'icon-start' },
+    { value: 'settings', label: 'Settings', icon: 'settings', layout: 'icon-start' },
+  ],
+  value: 'home',
+});
+
+// Showcase props
+const showcaseViewProps = createSegmentControlProps({
+  options: [
+    { value: 'list', label: 'List', icon: 'list' },
+    { value: 'grid', label: 'Grid', icon: 'grid' },
+    { value: 'apps', label: 'Cards', icon: 'apps' },
+  ],
+  value: 'list',
+});
+const showcaseStatusProps = createSegmentControlProps({
+  options: [
+    { value: 'all', label: 'All' },
+    { value: 'pending', label: 'Pending' },
+    { value: 'approved', label: 'Approved' },
+    { value: 'rejected', label: 'Rejected' },
+  ],
+  value: 'all',
+  color: 'secondary',
+});
+const showcaseNavProps = createSegmentControlProps({
+  options: [
+    { value: 'home', icon: 'home' },
+    { value: 'heart', icon: 'heart' },
+    { value: 'star', icon: 'star' },
+    { value: 'person', icon: 'person' },
+  ],
+  value: 'home',
+  color: 'dark',
+});
+
+const meta: Meta<SegmentControlComponent> = {
+  title: 'Molecules/SegmentControl',
+  component: SegmentControlComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, SegmentControlComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Segment control configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'SegmentControlMetadata',
+          detail: `{
+  options: SegmentOption[];
+  value?: string;
+  color?: Color;
+  disabled?: boolean;
+  scrollable?: boolean;
+  swipeGesture?: boolean;
+  mode?: 'ios' | 'md';
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-segment-control
+
+A segmented control for switching between views or options.
+
+### Features
+
+- **Icons & Labels**: Support for icons, labels, or both
+- **Scrollable**: Horizontal scrolling for many options
+- **Colors**: All Ionic colors supported
+- **Swipe Gesture**: Swipe to change on iOS
+- **Layout Options**: Icon position relative to label
+
+### Usage
+
+\`\`\`html
+<val-segment-control
+  [props]="{
+    options: [
+      { value: 'list', label: 'List', icon: 'list' },
+      { value: 'grid', label: 'Grid', icon: 'grid' }
+    ],
+    value: 'list'
+  }"
+  (segmentChange)="onViewChange($event)"
+></val-segment-control>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SegmentControlComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: defaultProps },
+  }),
+};
+
+export const ListGrid: Story = {
+  render: () => ({
+    template: `<div style="max-width: 250px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: listGridProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Common list/grid view toggle pattern.',
+      },
+    },
+  },
+};
+
+export const IconsOnly: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: iconsOnlyProps },
+  }),
+};
+
+export const LabelsOnly: Story = {
+  render: () => ({
+    template: `<div style="max-width: 350px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: labelsOnlyProps },
+  }),
+};
+
+export const Scrollable: Story = {
+  render: () => ({
+    template: `<div style="max-width: 350px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: scrollableProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Scrollable segment for many options. Scroll horizontally to see more.',
+      },
+    },
+  },
+};
+
+export const SecondaryColor: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: secondaryProps },
+  }),
+};
+
+export const WithDisabledOption: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: withDisabledProps },
+  }),
+};
+
+export const AllDisabled: Story = {
+  render: () => ({
+    template: `<div style="max-width: 400px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: disabledAllProps },
+  }),
+};
+
+export const IconStart: Story = {
+  render: () => ({
+    template: `<div style="max-width: 450px;"><val-segment-control [props]="segmentProps"></val-segment-control></div>`,
+    props: { segmentProps: iconStartProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Icons positioned at the start of labels.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 450px;">
+        <h3 style="margin: 0; font-family: system-ui;">Segment Controls</h3>
+
+        <div>
+          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">View Toggle</h4>
+          <val-segment-control [props]="view"></val-segment-control>
+        </div>
+
+        <div>
+          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Status Filter</h4>
+          <val-segment-control [props]="status"></val-segment-control>
+        </div>
+
+        <div>
+          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Navigation</h4>
+          <val-segment-control [props]="nav"></val-segment-control>
+        </div>
+
+        <div>
+          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Days of Week (Scrollable)</h4>
+          <val-segment-control [props]="days"></val-segment-control>
+        </div>
+      </div>
+    `,
+    props: {
+      view: showcaseViewProps,
+      status: showcaseStatusProps,
+      nav: showcaseNavProps,
+      days: scrollableProps,
+    },
+  }),
+};

package/src/lib/components/molecules/segment-control/types.ts

@@ -0,0 +1,48 @@
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+
+/**
+ * Option for segment control.
+ */
+export interface SegmentOption {
+  /** Unique value for the option */
+  value: string;
+  /** Display label */
+  label?: string;
+  /** Icon name (Ionicons) */
+  icon?: string;
+  /** Whether the option is disabled */
+  disabled?: boolean;
+  /** Layout direction for icon and label */
+  layout?: 'icon-start' | 'icon-end' | 'icon-top' | 'icon-bottom';
+  /** Reactive content key for label */
+  contentKey?: string;
+  /** Component class name for content lookup */
+  contentClass?: string;
+  /** Fallback text if contentKey is not found */
+  contentFallback?: string;
+}
+
+/**
+ * Metadata for the segment control component.
+ */
+export interface SegmentControlMetadata {
+  /** Available options */
+  options: SegmentOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Segment color */
+  color?: Color;
+  /** Component state */
+  state?: ComponentState;
+  /** Enable/disable entire segment */
+  disabled?: boolean;
+  /** Scroll segments horizontally */
+  scrollable?: boolean;
+  /** Swipe to change segments (iOS only) */
+  swipeGesture?: boolean;
+  /** Mode style */
+  mode?: 'ios' | 'md';
+  /** Unique token identifier */
+  token?: string;
+}

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

@@ -0,0 +1,133 @@
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { applyDefaultValueToControl } from '../../../shared/utils/form-defaults';
+import { IonSelect, IonSelectOption } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { PresetService } from '../../../services/presets';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-select-input',
+  standalone: true,
+  imports: [ReactiveFormsModule, IonSelect, IonSelectOption],
+  template: `
+    <ion-select
+      [formControl]="resolvedProps.control"
+      [label]="resolvedProps.label"
+      [interfaceOptions]="customModalOptions"
+      interface="modal"
+      [placeholder]="[resolvedProps.placeholder]"
+      [cancelText]="cancelText"
+      [okText]="okText"
+    >
+      @for (o of resolvedProps.options; track o.id) {
+        <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
+      }
+    </ion-select>
+  `,
+  styleUrls: ['./select-input.component.scss'],
+})
+/**
+ * val-select-input
+ *
+ * A select/dropdown input integrated with Angular forms, using Ionic's select component.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-select-input preset="form-field" [props]="{
+ *   control: myControl,
+ *   label: 'Seleccionar',
+ *   options: [{ id: '1', name: 'Opción 1' }]
+ * }"></val-select-input>
+ *
+ * @example Static (backwards compatible):
+ * <val-select-input [props]="{
+ *   control: myControl,
+ *   label: 'Seleccionar',
+ *   options: [{ id: '1', name: 'Opción 1' }],
+ *   cancelText: 'Cancelar',
+ *   okText: 'Aceptar'
+ * }"></val-select-input>
+ *
+ * @input preset: string - Name of preset to apply (e.g., 'form-field')
+ * @input props: InputMetadata - Configuration for the select input (overrides preset values)
+ */
+export class SearchSelectorComponent implements OnInit, OnChanges {
+  private i18n = inject(I18nService);
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable input configurations
+   * that can be registered at app level via provideValtechPresets().
+   *
+   * @example
+   * <val-select-input preset="form-field" [props]="{ control: ctrl, options: opts }"></val-select-input>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Input configuration object. Values here override preset values.
+   * @type {InputMetadata}
+   * @property control - The Angular FormControl for the select input.
+   * @property label - The label for the select.
+   * @property options - The available options for the select.
+   * @property placeholder - The placeholder text.
+   * @property modalHeader - Custom header text for the modal (optional, uses label if not provided).
+   * @property cancelText - Custom cancel button text (default: 'Cancelar').
+   * @property okText - Custom OK button text (default: 'Aceptar').
+   */
+  @Input() props: Partial<InputMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: InputMetadata = {} as InputMetadata;
+
+  customModalOptions: { header: string; breakpoints: number[]; initialBreakpoint: number };
+  cancelText: string;
+  okText: string;
+
+  ngOnInit() {
+    this.resolveProps();
+    this.setupComponent();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+      this.setupComponent();
+    }
+  }
+
+  /**
+   * Merge preset configuration with explicit props.
+   * Explicit props take precedence over preset values.
+   */
+  private resolveProps(): void {
+    const presetProps = this.preset ? (this.presets.get('selectInput', this.preset) as Partial<InputMetadata>) : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as InputMetadata;
+  }
+
+  private setupComponent(): void {
+    if (this.resolvedProps?.withDefault || this.resolvedProps?.value) {
+      applyDefaultValueToControl(this.resolvedProps);
+    }
+
+    // Set modal header from props or use label as fallback, then i18n default
+    const headerText = this.resolvedProps.modalHeader || this.resolvedProps.label || this.i18n.t('selectOption');
+
+    this.customModalOptions = {
+      header: headerText,
+      breakpoints: [0, 0.6],
+      initialBreakpoint: 0.6,
+    };
+
+    // Set button texts from props or use i18n defaults
+    this.cancelText = this.resolvedProps.cancelText || this.i18n.t('cancel');
+    this.okText = this.resolvedProps.okText || this.i18n.t('ok');
+  }
+}