valtech-components 2.0.795 → 2.0.796

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

@@ -1,88 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,65 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

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

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

@@ -1,70 +0,0 @@
-: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

@@ -1,150 +0,0 @@
-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],
-    });
-  }
-}