valtech-components 2.0.787 → 2.0.795

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

@@ -0,0 +1,302 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonButton, IonIcon, IonInput } from '@ionic/angular/standalone';
+import { Subscription } from 'rxjs';
+import { addIcons } from 'ionicons';
+import { addOutline, removeOutline } from 'ionicons/icons';
+import { I18nService } from '../../../services/i18n';
+import { ComponentStates } from '../../types';
+import { NumberStepperMetadata, NumberStepperChangeEvent } from './types';
+
+addIcons({ addOutline, removeOutline });
+
+@Component({
+  selector: 'val-number-stepper',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonButton, IonIcon, IonInput],
+  template: `
+    <div
+      class="number-stepper-container"
+      [class]="props.cssClass"
+      [class.size-small]="props.size === 'small'"
+      [class.size-medium]="props.size === 'medium' || !props.size"
+      [class.size-large]="props.size === 'large'"
+      [class.layout-vertical]="props.layout === 'vertical'"
+      [class.disabled]="props.state === states.DISABLED"
+      [style.--stepper-color]="getColor()"
+    >
+      @if (props.label) {
+        <label class="stepper-label">{{ getLabel() }}</label>
+      }
+
+      <!-- Preset buttons -->
+      @if (props.showPresets && props.presets?.length) {
+        <div class="preset-buttons">
+          @for (preset of props.presets; track preset.value) {
+            <button
+              type="button"
+              class="preset-button"
+              [class.active]="currentValue === preset.value"
+              [class.popular]="preset.popular"
+              (click)="setValue(preset.value)"
+              [disabled]="props.state === states.DISABLED"
+            >
+              {{ preset.label || preset.value }}
+            </button>
+          }
+        </div>
+      }
+
+      <!-- Stepper controls -->
+      <div class="stepper-controls">
+        <ion-button
+          class="stepper-button decrement"
+          [color]="props.color || 'primary'"
+          fill="outline"
+          [shape]="props.buttonShape || 'round'"
+          [disabled]="isAtMin || props.state === states.DISABLED"
+          (click)="decrement()"
+          [attr.aria-label]="getDecrementLabel()"
+        >
+          <ion-icon slot="icon-only" name="remove-outline"></ion-icon>
+        </ion-button>
+
+        <div class="value-display">
+          @if (props.showInput !== false && props.editableInput) {
+            <ion-input
+              type="number"
+              [formControl]="props.control"
+              [min]="props.min"
+              [max]="props.max"
+              [step]="props.step || 1"
+              [disabled]="props.state === states.DISABLED"
+              class="value-input"
+              (ionBlur)="onInputBlur()"
+            ></ion-input>
+          } @else {
+            <span class="value-text">{{ currentValue }}</span>
+          }
+
+          @if (props.unitLabel) {
+            <span class="unit-label">{{ getUnitLabel() }}</span>
+          }
+        </div>
+
+        <ion-button
+          class="stepper-button increment"
+          [color]="props.color || 'primary'"
+          fill="outline"
+          [shape]="props.buttonShape || 'round'"
+          [disabled]="isAtMax || props.state === states.DISABLED"
+          (click)="increment()"
+          [attr.aria-label]="getIncrementLabel()"
+        >
+          <ion-icon slot="icon-only" name="add-outline"></ion-icon>
+        </ion-button>
+      </div>
+
+      <!-- Price display -->
+      @if (props.showTotal && props.unitPrice) {
+        <div class="price-display">
+          <span class="price-calculation">
+            {{ currentValue }} × {{ formatPrice(props.unitPrice) }}
+          </span>
+          <span class="price-equals">=</span>
+          <span class="price-total">{{ formatPrice(totalPrice) }}</span>
+        </div>
+      }
+
+      @if (props.hint) {
+        <span class="stepper-hint">{{ props.hint }}</span>
+      }
+    </div>
+  `,
+  styleUrls: ['./number-stepper.component.scss'],
+})
+/**
+ * val-number-stepper
+ *
+ * A number input with increment/decrement buttons, ideal for quantity selection.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-number-stepper
+ *   [props]="{
+ *     control: quantityControl,
+ *     min: 1,
+ *     max: 100
+ *   }"
+ * ></val-number-stepper>
+ * ```
+ *
+ * @example With pricing
+ * ```html
+ * <val-number-stepper
+ *   [props]="{
+ *     control: ticketControl,
+ *     min: 1,
+ *     max: 50,
+ *     unitPrice: 10,
+ *     currency: 'MXN',
+ *     currencySymbol: '$',
+ *     showTotal: true,
+ *     unitLabel: 'boletos',
+ *     unitLabelSingular: 'boleto'
+ *   }"
+ *   (valueChange)="onQuantityChange($event)"
+ * ></val-number-stepper>
+ * ```
+ *
+ * @example With presets
+ * ```html
+ * <val-number-stepper
+ *   [props]="{
+ *     control: ticketControl,
+ *     min: 1,
+ *     max: 100,
+ *     showPresets: true,
+ *     presets: [
+ *       { value: 1 },
+ *       { value: 5, popular: true },
+ *       { value: 10 },
+ *       { value: 25 }
+ *     ]
+ *   }"
+ * ></val-number-stepper>
+ * ```
+ */
+export class NumberStepperComponent implements OnInit, OnDestroy {
+  @Input() props: NumberStepperMetadata;
+
+  @Output() valueChange = new EventEmitter<NumberStepperChangeEvent>();
+
+  states = ComponentStates;
+
+  private i18n = inject(I18nService);
+  private valueSubscription: Subscription | null = null;
+
+  /** Get decrement button aria-label with i18n fallback */
+  getDecrementLabel(): string {
+    return this.props.decrementLabel || this.i18n.t('decrease');
+  }
+
+  /** Get increment button aria-label with i18n fallback */
+  getIncrementLabel(): string {
+    return this.props.incrementLabel || this.i18n.t('increase');
+  }
+
+  ngOnInit(): void {
+    // Ensure initial value is within bounds
+    this.clampValue();
+
+    // Subscribe to value changes
+    this.valueSubscription = this.props.control.valueChanges.subscribe(() => {
+      this.clampValue();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.valueSubscription?.unsubscribe();
+  }
+
+  get currentValue(): number {
+    return this.props.control.value ?? this.props.min ?? 0;
+  }
+
+  get isAtMin(): boolean {
+    if (this.props.min === undefined) return false;
+    return this.currentValue <= this.props.min;
+  }
+
+  get isAtMax(): boolean {
+    if (this.props.max === undefined) return false;
+    return this.currentValue >= this.props.max;
+  }
+
+  get totalPrice(): number {
+    return this.currentValue * (this.props.unitPrice || 0);
+  }
+
+  increment(): void {
+    const step = this.props.step || 1;
+    const newValue = this.currentValue + step;
+    this.setValue(newValue);
+  }
+
+  decrement(): void {
+    const step = this.props.step || 1;
+    const newValue = this.currentValue - step;
+    this.setValue(newValue);
+  }
+
+  setValue(value: number): void {
+    const previousValue = this.currentValue;
+    const clampedValue = this.clamp(value);
+
+    if (clampedValue !== previousValue) {
+      this.props.control.setValue(clampedValue);
+      this.emitChange(clampedValue, previousValue);
+    }
+  }
+
+  onInputBlur(): void {
+    this.clampValue();
+  }
+
+  private clampValue(): void {
+    const currentVal = this.props.control.value;
+    const clampedVal = this.clamp(currentVal);
+    if (currentVal !== clampedVal) {
+      this.props.control.setValue(clampedVal);
+    }
+  }
+
+  private clamp(value: number): number {
+    let result = value;
+    if (this.props.min !== undefined && result < this.props.min) {
+      result = this.props.min;
+    }
+    if (this.props.max !== undefined && result > this.props.max) {
+      result = this.props.max;
+    }
+    return result;
+  }
+
+  private emitChange(value: number, previousValue: number): void {
+    this.valueChange.emit({
+      value,
+      previousValue,
+      totalPrice: this.props.unitPrice ? value * this.props.unitPrice : undefined,
+      atMin: this.isAtMin,
+      atMax: this.isAtMax,
+    });
+  }
+
+  getLabel(): string {
+    return this.props.label || '';
+  }
+
+  getUnitLabel(): string {
+    if (this.currentValue === 1 && this.props.unitLabelSingular) {
+      return this.props.unitLabelSingular;
+    }
+    return this.props.unitLabel || '';
+  }
+
+  formatPrice(amount: number): string {
+    const symbol = this.props.currencySymbol || '$';
+    const formatted = amount.toLocaleString('es-MX', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+    return `${symbol}${formatted}`;
+  }
+
+  getColor(): string {
+    if (this.props.color) {
+      return `var(--ion-color-${this.props.color})`;
+    }
+    return 'var(--ion-color-primary)';
+  }
+}

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

@@ -0,0 +1,417 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NumberStepperComponent } from './number-stepper.component';
+import { NumberStepperMetadata } from './types';
+
+const createNumberStepperProps = (overrides: Partial<NumberStepperMetadata> = {}): NumberStepperMetadata => ({
+  control: new FormControl(1),
+  min: 1,
+  max: 100,
+  step: 1,
+  size: 'medium',
+  ...overrides,
+});
+
+// Pre-create all props at module level to avoid Observable timing issues
+const defaultProps = createNumberStepperProps();
+const withLabelProps = createNumberStepperProps({ label: 'Cantidad de boletos' });
+const withUnitLabelProps = createNumberStepperProps({
+  label: 'Cantidad',
+  unitLabel: 'boletos',
+  unitLabelSingular: 'boleto',
+});
+const withPricingProps = createNumberStepperProps({
+  label: 'Boletos',
+  unitPrice: 50,
+  currency: 'MXN',
+  currencySymbol: '$',
+  showTotal: true,
+  unitLabel: 'boletos',
+  unitLabelSingular: 'boleto',
+});
+const withPresetsProps = createNumberStepperProps({
+  label: 'Cantidad de boletos',
+  showPresets: true,
+  presets: [
+    { value: 1 },
+    { value: 5, popular: true },
+    { value: 10 },
+    { value: 25 },
+  ],
+  unitPrice: 50,
+  showTotal: true,
+});
+const withPresetsAndLabelsProps = createNumberStepperProps({
+  label: 'Elige tu paquete',
+  showPresets: true,
+  presets: [
+    { value: 1, label: '1 boleto' },
+    { value: 5, label: '5 boletos', popular: true },
+    { value: 10, label: '10 boletos' },
+    { value: 25, label: '25 boletos' },
+  ],
+  unitPrice: 50,
+  showTotal: true,
+});
+const sizeSmallProps = createNumberStepperProps({
+  size: 'small',
+  unitPrice: 10,
+  showTotal: true,
+});
+const sizeLargeProps = createNumberStepperProps({
+  size: 'large',
+  unitPrice: 100,
+  showTotal: true,
+});
+const verticalLayoutProps = createNumberStepperProps({
+  layout: 'vertical',
+  label: 'Cantidad',
+});
+const withHintProps = createNumberStepperProps({
+  label: 'Boletos',
+  hint: 'Máximo 50 boletos por persona',
+  max: 50,
+});
+const customStepProps = createNumberStepperProps({
+  control: new FormControl(5),
+  label: 'Cantidad',
+  step: 5,
+  min: 5,
+  max: 100,
+});
+const editableInputProps = createNumberStepperProps({
+  label: 'Cantidad',
+  editableInput: true,
+  max: 999,
+});
+const colorSuccessProps = createNumberStepperProps({
+  color: 'success',
+  unitPrice: 50,
+  showTotal: true,
+});
+const rafflePurchaseProps = createNumberStepperProps({
+  control: new FormControl(5),
+  label: '¿Cuántos boletos deseas?',
+  min: 1,
+  max: 50,
+  showPresets: true,
+  presets: [
+    { value: 1, label: '1' },
+    { value: 5, label: '5', popular: true },
+    { value: 10, label: '10' },
+    { value: 20, label: '20' },
+  ],
+  unitPrice: 50,
+  currency: 'MXN',
+  currencySymbol: '$',
+  showTotal: true,
+  unitLabel: 'boletos',
+  unitLabelSingular: 'boleto',
+  hint: 'Máximo 50 boletos por compra',
+  color: 'primary',
+  size: 'large',
+});
+
+// Showcase props
+const showcaseBasicProps = createNumberStepperProps({ label: 'Quantity' });
+const showcaseWithPricingProps = createNumberStepperProps({
+  label: 'Tickets',
+  unitPrice: 50,
+  showTotal: true,
+  unitLabel: 'tickets',
+});
+const showcaseWithPresetsProps = createNumberStepperProps({
+  showPresets: true,
+  presets: [
+    { value: 1 },
+    { value: 5, popular: true },
+    { value: 10 },
+    { value: 25 },
+  ],
+  unitPrice: 25,
+  showTotal: true,
+});
+const showcaseSizeSmallProps = createNumberStepperProps({ size: 'small', label: 'Small' });
+const showcaseSizeMediumProps = createNumberStepperProps({ size: 'medium', label: 'Medium' });
+const showcaseSizeLargeProps = createNumberStepperProps({ size: 'large', label: 'Large' });
+const showcaseRafflePurchaseProps = createNumberStepperProps({
+  control: new FormControl(5),
+  label: 'How many tickets?',
+  min: 1,
+  max: 50,
+  showPresets: true,
+  presets: [
+    { value: 1 },
+    { value: 5, popular: true },
+    { value: 10 },
+    { value: 25 },
+  ],
+  unitPrice: 50,
+  showTotal: true,
+  unitLabel: 'tickets',
+  color: 'success',
+  size: 'large',
+});
+
+const meta: Meta<NumberStepperComponent> = {
+  title: 'Molecules/NumberStepper',
+  component: NumberStepperComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, NumberStepperComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Number stepper configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'NumberStepperMetadata',
+          detail: `{
+  control: FormControl<number>;
+  min?: number;
+  max?: number;
+  step?: number;
+  unitPrice?: number;
+  currency?: string;
+  showTotal?: boolean;
+  unitLabel?: string;
+  unitLabelSingular?: string;
+  presets?: NumberStepperPreset[];
+  showPresets?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  layout?: 'horizontal' | 'vertical';
+}`,
+        },
+      },
+    },
+    valueChange: {
+      action: 'valueChange',
+      description: 'Event emitted when value changes',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-number-stepper
+
+A number input with increment/decrement buttons, ideal for quantity selection in raffle ticket purchases.
+
+### Features
+
+- **Presets**: Quick selection buttons for common values
+- **Pricing**: Shows unit price and calculated total
+- **Bounds**: Min/max value constraints
+- **Step**: Configurable increment step
+
+### Usage
+
+\`\`\`html
+<val-number-stepper
+  [props]="{
+    control: ticketQuantity,
+    min: 1,
+    max: 50,
+    unitPrice: 50,
+    currency: 'MXN',
+    showTotal: true,
+    unitLabel: 'boletos',
+    unitLabelSingular: 'boleto'
+  }"
+  (valueChange)="onQuantityChange($event)"
+></val-number-stepper>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NumberStepperComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: defaultProps },
+  }),
+};
+
+export const WithLabel: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: withLabelProps },
+  }),
+};
+
+export const WithUnitLabel: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: withUnitLabelProps },
+  }),
+};
+
+export const WithPricing: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: withPricingProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows price calculation: quantity × unit price = total.',
+      },
+    },
+  },
+};
+
+export const WithPresets: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: withPresetsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Preset buttons for quick quantity selection. Popular preset is highlighted.',
+      },
+    },
+  },
+};
+
+export const WithPresetsAndLabels: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: withPresetsAndLabelsProps },
+  }),
+};
+
+export const SizeSmall: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: sizeSmallProps },
+  }),
+};
+
+export const SizeLarge: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: sizeLargeProps },
+  }),
+};
+
+export const VerticalLayout: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: verticalLayoutProps },
+  }),
+};
+
+export const WithHint: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: withHintProps },
+  }),
+};
+
+export const CustomStep: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: customStepProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Increments/decrements by 5.',
+      },
+    },
+  },
+};
+
+export const EditableInput: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: editableInputProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Allows direct number input in addition to stepper buttons.',
+      },
+    },
+  },
+};
+
+export const ColorSuccess: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: colorSuccessProps },
+  }),
+};
+
+export const RaffleTicketPurchase: Story = {
+  render: () => ({
+    template: `<val-number-stepper [props]="stepperProps"></val-number-stepper>`,
+    props: { stepperProps: rafflePurchaseProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete example for raffle ticket purchase.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 40px; max-width: 500px;">
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Basic Stepper</h3>
+          <val-number-stepper [props]="basic"></val-number-stepper>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">With Pricing</h3>
+          <val-number-stepper [props]="withPricing"></val-number-stepper>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">With Presets</h3>
+          <val-number-stepper [props]="withPresets"></val-number-stepper>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Sizes</h3>
+          <div style="display: flex; flex-direction: column; gap: 24px;">
+            <val-number-stepper [props]="sizeSmall"></val-number-stepper>
+            <val-number-stepper [props]="sizeMedium"></val-number-stepper>
+            <val-number-stepper [props]="sizeLarge"></val-number-stepper>
+          </div>
+        </div>
+
+        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 32px; border-radius: 16px;">
+          <h3 style="margin: 0 0 16px; font-family: system-ui; color: white;">Raffle Ticket Purchase</h3>
+          <div style="background: white; padding: 24px; border-radius: 12px;">
+            <val-number-stepper [props]="rafflePurchase"></val-number-stepper>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      basic: showcaseBasicProps,
+      withPricing: showcaseWithPricingProps,
+      withPresets: showcaseWithPresetsProps,
+      sizeSmall: showcaseSizeSmallProps,
+      sizeMedium: showcaseSizeMediumProps,
+      sizeLarge: showcaseSizeLargeProps,
+      rafflePurchase: showcaseRafflePurchaseProps,
+    },
+  }),
+};