valtech-components 2.0.787 → 2.0.795

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

@@ -0,0 +1,88 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonCheckbox } from '@ionic/angular/standalone';
+import { PresetService } from '../../../services/presets';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-check-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonCheckbox],
+  template: `
+    <ion-checkbox [formControl]="resolvedProps.control" [labelPlacement]="resolvedProps.labelPlacement || 'end'">
+      {{ getDisplayLabel() }}
+    </ion-checkbox>
+  `,
+  styleUrls: ['./check-input.component.scss'],
+})
+/**
+ * val-check-input
+ *
+ * A checkbox input for boolean values, integrated with Angular forms.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-check-input preset="form-field" [props]="{ control: myControl, label: 'I agree' }"></val-check-input>
+ *
+ * @example Static (backwards compatible):
+ * <val-check-input [props]="{ control: myControl, label: 'I agree' }"></val-check-input>
+ *
+ * @input preset: string - Name of preset to apply
+ * @input props: InputMetadata - Configuration for the checkbox (form control, label, etc.)
+ */
+export class CheckInputComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable checkbox configurations
+   * that can be registered at app level via provideValtechPresets().
+   *
+   * @example
+   * <val-check-input preset="form-field" [props]="{ control: ctrl }"></val-check-input>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Input configuration object. Values here override preset values.
+   * @type {InputMetadata}
+   * @property control - The Angular FormControl for the checkbox.
+   * @property label - Static label text.
+   * @property labelPlacement - Position of label ('start' | 'end'). Default: 'end'.
+   */
+  @Input() props: Partial<InputMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: InputMetadata = {} as InputMetadata;
+
+  ngOnInit() {
+    this.resolveProps();
+  }
+
+  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('checkInput', this.preset) as Partial<InputMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as InputMetadata;
+  }
+
+  getDisplayLabel(): string {
+    return this.resolvedProps.label || this.resolvedProps.contentFallback || '';
+  }
+}

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { CheckInputComponent } from './check-input.component';
+
+const meta: Meta<CheckInputComponent> = {
+  title: 'Molecules/CheckInput',
+  component: CheckInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, CheckInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-check-input
+
+A simple checkbox input for boolean values or agreements.
+
+### Usage
+
+\`\`\`html
+<val-check-input></val-check-input>
+\`\`\`
+
+> **Note**: This component is currently a basic implementation. Consider extending it with props for label, FormControl integration, and color options.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CheckInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<val-check-input></val-check-input>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+        <h3 style="margin: 0; font-family: system-ui;">Checkbox Input</h3>
+        <val-check-input></val-check-input>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/checkbox-radio-input/checkbox-radio-input.component.scss

@@ -0,0 +1,12 @@
+.checkbox-radio-group {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-top: 0.5rem;
+
+  ion-checkbox {
+    --size: 24px;
+    --checkbox-background-checked: var(--ion-color-primary);
+    --checkmark-color: var(--ion-color-primary-contrast);
+  }
+}

package/src/lib/components/molecules/checkbox-radio-input/checkbox-radio-input.component.ts

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonCheckbox } from '@ionic/angular/standalone';
+import { InputMetadata, InputOption, ComponentStates } from '../../types';
+
+@Component({
+  selector: 'val-checkbox-radio-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonCheckbox],
+  template: `
+    <div class="checkbox-radio-group">
+      @for (option of props.options; track option.id) {
+        <ion-checkbox
+          [checked]="isSelected(option)"
+          [disabled]="props.state === states.DISABLED"
+          [labelPlacement]="'end'"
+          (ionChange)="onOptionSelect(option, $event)"
+        >
+          {{ option.name }}
+        </ion-checkbox>
+      }
+    </div>
+  `,
+  styleUrls: ['./checkbox-radio-input.component.scss'],
+})
+/**
+ * val-checkbox-radio-input
+ *
+ * A group of checkboxes with radio behavior (single selection).
+ * Visually displays as checkboxes but only allows one option to be selected at a time.
+ *
+ * @example
+ * <val-checkbox-radio-input [props]="{
+ *   control: myControl,
+ *   options: [
+ *     { id: 'yes', name: 'Sí', order: 0 },
+ *     { id: 'no', name: 'No', order: 1 }
+ *   ]
+ * }"></val-checkbox-radio-input>
+ *
+ * @input props: InputMetadata - Configuration including control and options
+ */
+export class CheckboxRadioInputComponent implements OnInit {
+  @Input() props: InputMetadata;
+  states = ComponentStates;
+
+  ngOnInit() {}
+
+  isSelected(option: InputOption): boolean {
+    return this.props.control?.value === option.id;
+  }
+
+  onOptionSelect(option: InputOption, event: any): void {
+    if (event.detail.checked) {
+      // Seleccionar esta opción
+      this.props.control?.setValue(option.id);
+    } else {
+      // Si se deselecciona la opción actual, limpiar
+      if (this.props.control?.value === option.id) {
+        this.props.control?.setValue(null);
+      }
+    }
+  }
+}

package/src/lib/components/molecules/checkbox-radio-input/checkbox-radio-input.stories.ts

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CheckboxRadioInputComponent } from './checkbox-radio-input.component';
+import { InputMetadata, InputOption } from '../../types';
+
+const createOptions = (items: Array<{ id: string; name: string }>): InputOption[] =>
+  items.map((item, index) => ({ ...item, order: index }));
+
+const createCheckboxRadioProps = (overrides: Partial<InputMetadata> = {}): InputMetadata =>
+  ({
+    control: new FormControl(''),
+    token: 'checkbox-radio-input',
+    label: 'Select an option',
+    name: 'checkbox-radio-field',
+    options: createOptions([
+      { id: 'yes', name: 'Sí' },
+      { id: 'no', name: 'No' },
+    ]),
+    ...overrides,
+  }) as InputMetadata;
+
+// Pre-create all props at module level
+const defaultProps = createCheckboxRadioProps();
+const preselectedProps = createCheckboxRadioProps({
+  control: new FormControl('yes'),
+  options: createOptions([
+    { id: 'yes', name: 'Sí' },
+    { id: 'no', name: 'No' },
+  ]),
+});
+const manyOptionsProps = createCheckboxRadioProps({
+  options: createOptions([
+    { id: 'option1', name: 'Opción 1' },
+    { id: 'option2', name: 'Opción 2' },
+    { id: 'option3', name: 'Opción 3' },
+    { id: 'option4', name: 'Opción 4' },
+  ]),
+});
+const fruitsProps = createCheckboxRadioProps({
+  control: new FormControl('apple'),
+  options: createOptions([
+    { id: 'apple', name: 'Manzana' },
+    { id: 'banana', name: 'Plátano' },
+    { id: 'orange', name: 'Naranja' },
+    { id: 'grape', name: 'Uva' },
+  ]),
+});
+
+// Showcase props
+const showcaseNewsletterProps = createCheckboxRadioProps({
+  options: createOptions([
+    { id: 'yes', name: 'Sí, quiero recibir novedades' },
+    { id: 'no', name: 'No, gracias' },
+  ]),
+});
+const showcasePaymentProps = createCheckboxRadioProps({
+  control: new FormControl('credit'),
+  options: createOptions([
+    { id: 'credit', name: 'Tarjeta de crédito' },
+    { id: 'debit', name: 'Tarjeta de débito' },
+    { id: 'transfer', name: 'Transferencia bancaria' },
+  ]),
+});
+
+const meta: Meta<CheckboxRadioInputComponent> = {
+  title: 'Molecules/CheckboxRadioInput',
+  component: CheckboxRadioInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, CheckboxRadioInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Checkbox-radio input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InputMetadata',
+          detail: `{
+  control: FormControl;
+  token: string;
+  label: string;
+  name: string;
+  options: InputOption[];
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-checkbox-radio-input
+
+A group of checkboxes with radio behavior (single selection only).
+Visually displays as checkboxes but only allows one option to be selected at a time.
+
+### Features
+
+- **Visual Checkboxes**: Uses Ionic checkbox styling
+- **Radio Behavior**: Only one option can be selected
+- **Form Integration**: Works with Angular Reactive Forms
+
+### Usage
+
+\`\`\`html
+<val-checkbox-radio-input
+  [props]="{
+    control: selectedOption,
+    options: [
+      { id: 'yes', name: 'Sí', order: 0 },
+      { id: 'no', name: 'No', order: 1 }
+    ]
+  }"
+></val-checkbox-radio-input>
+\`\`\`
+
+### When to Use
+
+- Yes/No questions where you want a more visible selection
+- Single choice questions with few options
+- When you prefer checkbox visual style over radio buttons
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CheckboxRadioInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<val-checkbox-radio-input [props]="checkboxRadioProps"></val-checkbox-radio-input>`,
+    props: { checkboxRadioProps: defaultProps },
+  }),
+};
+
+export const Preselected: Story = {
+  render: () => ({
+    template: `<val-checkbox-radio-input [props]="checkboxRadioProps"></val-checkbox-radio-input>`,
+    props: { checkboxRadioProps: preselectedProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox group with a pre-selected option.',
+      },
+    },
+  },
+};
+
+export const ManyOptions: Story = {
+  render: () => ({
+    template: `<val-checkbox-radio-input [props]="checkboxRadioProps"></val-checkbox-radio-input>`,
+    props: { checkboxRadioProps: manyOptionsProps },
+  }),
+};
+
+export const FruitSelection: Story = {
+  render: () => ({
+    template: `<val-checkbox-radio-input [props]="checkboxRadioProps"></val-checkbox-radio-input>`,
+    props: { checkboxRadioProps: fruitsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Single fruit selection example with pre-selected value.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">¿Desea recibir newsletter?</h3>
+          <val-checkbox-radio-input [props]="newsletter"></val-checkbox-radio-input>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Método de pago</h3>
+          <div style="background: #f5f5f5; padding: 16px; border-radius: 8px;">
+            <val-checkbox-radio-input [props]="payment"></val-checkbox-radio-input>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      newsletter: showcaseNewsletterProps,
+      payment: showcasePaymentProps,
+    },
+  }),
+};

package/src/lib/components/molecules/checkbox-radio-input/index.ts

@@ -0,0 +1 @@
+export * from './checkbox-radio-input.component';

package/src/lib/components/molecules/chip-group/chip-group.component.scss

@@ -0,0 +1,70 @@
+:host {
+  display: block;
+}
+
+.chip-group {
+  display: flex;
+  gap: 8px;
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &:not(.wrap) {
+    overflow-x: auto;
+    padding-bottom: 4px;
+
+    &::-webkit-scrollbar {
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--ion-color-light-shade);
+      border-radius: 2px;
+    }
+  }
+}
+
+ion-chip {
+  margin: 0;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:hover:not([disabled]) {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active:not([disabled]) {
+    transform: translateY(0);
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  ion-icon {
+    font-size: 16px;
+  }
+
+  .selected-icon {
+    margin-right: 4px;
+  }
+
+  .remove-icon {
+    margin-left: 4px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  ion-label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}

package/src/lib/components/molecules/chip-group/chip-group.component.ts

@@ -0,0 +1,150 @@
+import { Component, inject, Input, OnChanges, OnInit, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { IonChip, IonIcon, IonLabel } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { PresetService } from '../../../services/presets';
+import { ChipGroupMetadata, ChipMetadata, ChipSelectionEvent, ChipRemoveEvent } from './types';
+import { addIcons } from 'ionicons';
+import { close, checkmark } from 'ionicons/icons';
+
+addIcons({ close, checkmark });
+
+@Component({
+  selector: 'val-chip-group',
+  standalone: true,
+  imports: [CommonModule, IonChip, IonIcon, IonLabel],
+  template: `
+    <div class="chip-group" [class.wrap]="resolvedProps.wrap !== false">
+      @for (chip of resolvedProps.chips; track chip.value) {
+        <ion-chip
+          [color]="getChipColor(chip)"
+          [outline]="resolvedProps.outline && !chip.selected"
+          [disabled]="chip.disabled"
+          (click)="onChipClick(chip)"
+        >
+          @if (chip.icon) {
+            <ion-icon [name]="chip.icon"></ion-icon>
+          }
+          @if (chip.selected && resolvedProps.selectable) {
+            <ion-icon name="checkmark" class="selected-icon"></ion-icon>
+          }
+          <ion-label>{{ getChipLabel(chip) }}</ion-label>
+          @if (resolvedProps.removable && !chip.disabled) {
+            <ion-icon name="close" class="remove-icon" (click)="onRemoveChip($event, chip)"></ion-icon>
+          }
+        </ion-chip>
+      }
+    </div>
+  `,
+  styleUrls: ['./chip-group.component.scss'],
+})
+/**
+ * val-chip-group
+ *
+ * A group of chips for tags, filters, or selections.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset:
+ * <val-chip-group preset="tags" [props]="{ chips: [...] }"></val-chip-group>
+ *
+ * @example Basic selectable
+ * <val-chip-group [props]="{
+ *   chips: [
+ *     { value: 'angular', label: 'Angular' },
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' }
+ *   ],
+ *   selectable: true,
+ *   multiple: true
+ * }" (selectionChange)="onSelectionChange($event)"></val-chip-group>
+ *
+ * @input preset: string - Name of preset to apply
+ * @input props: ChipGroupMetadata - Configuration for the chip group
+ * @output selectionChange: ChipSelectionEvent - Emits when selection changes
+ * @output chipRemove: ChipRemoveEvent - Emits when a chip is removed
+ */
+export class ChipGroupComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  @Input() preset?: string;
+  @Input() props: Partial<ChipGroupMetadata> = {};
+
+  resolvedProps: ChipGroupMetadata = {} as ChipGroupMetadata;
+
+  @Output() selectionChange = new EventEmitter<ChipSelectionEvent>();
+  @Output() chipRemove = new EventEmitter<ChipRemoveEvent>();
+  @Output() chipClick = new EventEmitter<ChipMetadata>();
+
+  ngOnInit() {
+    this.resolveProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+    }
+  }
+
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('chipGroup', this.preset) as Partial<ChipGroupMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as ChipGroupMetadata;
+  }
+
+  getChipColor(chip: ChipMetadata): string {
+    if (chip.selected && this.resolvedProps.selectedColor) {
+      return this.resolvedProps.selectedColor;
+    }
+    return chip.color || this.resolvedProps.color || 'primary';
+  }
+
+  getChipLabel(chip: ChipMetadata): string {
+    return chip.label || chip.contentFallback || '';
+  }
+
+  onChipClick(chip: ChipMetadata): void {
+    if (chip.disabled) return;
+
+    this.chipClick.emit(chip);
+
+    if (!this.resolvedProps.selectable) return;
+
+    if (this.resolvedProps.multiple) {
+      chip.selected = !chip.selected;
+    } else {
+      // Single selection: deselect all others
+      this.resolvedProps.chips.forEach((c) => {
+        c.selected = c.value === chip.value ? !c.selected : false;
+      });
+    }
+
+    this.emitSelectionChange();
+  }
+
+  onRemoveChip(event: Event, chip: ChipMetadata): void {
+    event.stopPropagation();
+
+    const index = this.resolvedProps.chips.indexOf(chip);
+    if (index > -1) {
+      this.resolvedProps.chips.splice(index, 1);
+      this.chipRemove.emit({
+        chip,
+        remaining: [...this.resolvedProps.chips],
+      });
+    }
+  }
+
+  private emitSelectionChange(): void {
+    const selected = this.resolvedProps.chips.filter((c) => c.selected);
+    const values = selected.map((c) => c.value);
+
+    this.selectionChange.emit({
+      selected: this.resolvedProps.multiple ? selected : selected[0],
+      values: this.resolvedProps.multiple ? values : values[0],
+    });
+  }
+}