valtech-components 2.0.691 → 2.0.692

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

@@ -1,417 +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 { 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,
-    },
-  }),
-};

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

@@ -1,101 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { Color } from '@ionic/core';
-import { ComponentState } from '../../types';
-
-/**
- * Quick selection preset for number stepper.
- */
-export interface NumberStepperPreset {
-  /** Preset value */
-  value: number;
-  /** Display label (optional, defaults to value) */
-  label?: string;
-  /** Whether this is a popular/highlighted option */
-  popular?: boolean;
-}
-
-/**
- * Metadata for the number stepper component.
- */
-export interface NumberStepperMetadata {
-  /** Form control for the value */
-  control: FormControl<number>;
-  /** Minimum value */
-  min?: number;
-  /** Maximum value */
-  max?: number;
-  /** Step increment */
-  step?: number;
-  /** Show manual input field */
-  showInput?: boolean;
-  /** Allow manual input editing */
-  editableInput?: boolean;
-
-  // === Pricing (optional) ===
-  /** Unit price for total calculation */
-  unitPrice?: number;
-  /** Currency code for price display */
-  currency?: string;
-  /** Currency symbol */
-  currencySymbol?: string;
-  /** Show total price */
-  showTotal?: boolean;
-  /** Unit label (e.g., "boletos", "tickets") */
-  unitLabel?: string;
-  /** Singular unit label */
-  unitLabelSingular?: string;
-
-  // === Quick selection ===
-  /** Preset values for quick selection */
-  presets?: NumberStepperPreset[];
-  /** Show preset buttons */
-  showPresets?: boolean;
-
-  // === Styling ===
-  /** Component color */
-  color?: Color;
-  /** Size variant */
-  size?: 'small' | 'medium' | 'large';
-  /** Button shape */
-  buttonShape?: 'square' | 'round';
-  /** Layout direction */
-  layout?: 'horizontal' | 'vertical';
-  /** Custom CSS class */
-  cssClass?: string;
-  /** Component state */
-  state?: ComponentState;
-
-  // === Labels ===
-  /** Label for the component */
-  label?: string;
-  /** Hint text */
-  hint?: string;
-  /** Decrement button aria label */
-  decrementLabel?: string;
-  /** Increment button aria label */
-  incrementLabel?: string;
-
-  // === Reactive content ===
-  /** Content key for label */
-  labelContentKey?: string;
-  /** Content key for unit label */
-  unitLabelContentKey?: string;
-  /** Content class for reactive content */
-  contentClass?: string;
-}
-
-/**
- * Event emitted when value changes.
- */
-export interface NumberStepperChangeEvent {
-  /** New value */
-  value: number;
-  /** Previous value */
-  previousValue: number;
-  /** Total price (if unitPrice is set) */
-  totalPrice?: number;
-  /** Whether at minimum */
-  atMin: boolean;
-  /** Whether at maximum */
-  atMax: boolean;
-}

package/src/lib/components/molecules/pagination/pagination.component.scss

@@ -1,50 +0,0 @@
-:host {
-  display: block;
-}
-
-.pagination-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  flex-wrap: wrap;
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-ion-button {
-  --padding-start: 8px;
-  --padding-end: 8px;
-  min-width: 36px;
-  font-weight: 500;
-
-  &[size='small'] {
-    --padding-start: 6px;
-    --padding-end: 6px;
-    min-width: 28px;
-    font-size: 12px;
-  }
-
-  &[size='large'] {
-    --padding-start: 12px;
-    --padding-end: 12px;
-    min-width: 44px;
-    font-size: 16px;
-  }
-}
-
-.ellipsis {
-  padding: 0 8px;
-  color: var(--ion-color-medium);
-  font-size: 14px;
-}
-
-.page-info {
-  margin-left: 16px;
-  color: var(--ion-color-medium);
-  font-size: 14px;
-  white-space: nowrap;
-}