valtech-components 2.0.691 → 2.0.692

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

@@ -1,35 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.fun-card {
-  z-index: 0;
-  position: relative;
-  margin-bottom: 8px;
-  cursor: pointer;
-  background: var(
-    --ion-card-background,
-    var(--ion-item-background, var(--ion-background-color, #fff))
-  );
-  display: flex;
-  border-radius: 48px;
-  align-items: start;
-  padding: 8px;
-  padding-left: 24px;
-  flex-direction: column;
-
-  &.hoverable {
-    transition:
-      transform 0.3s ease,
-      box-shadow 0.3s ease;
-
-    &:hover {
-      transform: scale(1.01);
-      @include box-shadow-medium;
-    }
-  }
-
-  @include box-shadow-small;
-}
-
-.bordered {
-  border: pxToRem(1) solid var(--ion-color-medium);
-}

package/src/lib/components/molecules/pill/pill.component.ts

@@ -1,89 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { PresetService } from '../../../services/presets';
-import { ThemeService } from '../../../services/theme.service';
-import { ActionHeaderComponent } from '../action-header/action-header.component';
-import { PillMetadata } from './types';
-
-@Component({
-  selector: 'val-pill',
-  standalone: true,
-  imports: [CommonModule, ActionHeaderComponent],
-  template: `
-    <div
-      [id]="resolvedProps.token"
-      class="fun-card"
-      [class.bordered]="resolvedProps.bordered"
-      [class.hoverable]="resolvedProps.hoverable"
-      [ngStyle]="{
-        background: theme.IsDark ? 'var(--ion-background-color)' : resolvedProps.background,
-      }"
-    >
-      <val-action-header style="width: 100%;" [props]="resolvedProps.content" />
-    </div>
-  `,
-  styleUrls: ['./pill.component.scss'],
-})
-/**
- * val-pill
- *
- * A pill/card component with customizable background and content.
- * Supports presets for reusable configurations.
- *
- * @example With preset (recommended):
- * <val-pill preset="info" [props]="{ content: {...} }"></val-pill>
- *
- * @example Static (backwards compatible):
- * <val-pill [props]="{ background: '#fff', bordered: true, content: {...} }"></val-pill>
- *
- * @input preset: string - Name of preset to apply
- * @input props: PillMetadata - Configuration for the pill
- */
-export class PillComponent implements OnInit, OnChanges {
-  theme = inject(ThemeService);
-  private presets = inject(PresetService);
-
-  /**
-   * Preset name to apply. Presets define reusable pill configurations
-   * that can be registered at app level via provideValtechPresets().
-   *
-   * @example
-   * <val-pill preset="info" [props]="{ content: {...} }"></val-pill>
-   */
-  @Input() preset?: string;
-
-  /**
-   * Pill configuration object. Values here override preset values.
-   */
-  @Input() props: Partial<PillMetadata> = {};
-
-  /**
-   * Resolved props after merging preset + explicit props.
-   */
-  resolvedProps: PillMetadata = {} as PillMetadata;
-
-  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('pill', this.preset) as Partial<PillMetadata>)
-      : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    } as PillMetadata;
-  }
-}

package/src/lib/components/molecules/pill/pill.stories.ts

@@ -1,219 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { PillComponent } from './pill.component';
-import { PillMetadata } from './types';
-
-const createPillProps = (overrides: Partial<PillMetadata> = {}) => ({
-  content: {
-    title: { content: 'Pill Title', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  ...overrides,
-} as PillMetadata);
-
-// Pre-create all props at module level
-const defaultProps = createPillProps();
-
-const borderedProps = createPillProps({
-  content: {
-    title: { content: 'Bordered Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  bordered: true,
-});
-
-const hoverableProps = createPillProps({
-  content: {
-    title: { content: 'Hoverable Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  hoverable: true,
-});
-
-const withBackgroundProps = createPillProps({
-  content: {
-    title: { content: 'Custom Background', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  background: '#e3f2fd',
-});
-
-const borderedHoverableProps = createPillProps({
-  content: {
-    title: { content: 'Interactive Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  bordered: true,
-  hoverable: true,
-});
-
-const withActionProps = createPillProps({
-  content: {
-    title: { content: 'Actionable Pill', size: 'medium' as const, color: 'dark' },
-    action: { text: 'Learn More', color: 'primary', fill: 'clear', state: 'ENABLED', type: 'button' },
-  },
-  bordered: true,
-});
-
-// Showcase props
-const showcaseFeatureProps = createPillProps({
-  content: {
-    title: { content: 'New Feature', size: 'medium' as const, color: 'primary' },
-    action: { text: 'Explore', color: 'primary', fill: 'solid', state: 'ENABLED', type: 'button' },
-  },
-  bordered: true,
-  hoverable: true,
-});
-
-const showcaseInfoProps = createPillProps({
-  content: {
-    title: { content: 'Quick Tip', size: 'medium' as const, color: 'warning' },
-    action: { text: '', color: 'primary', state: 'ENABLED', type: 'button' } as any,
-  },
-  background: '#fff8e1',
-  bordered: true,
-});
-
-const showcaseActionProps = createPillProps({
-  content: {
-    title: { content: 'Upgrade Available', size: 'medium' as const, color: 'dark' },
-    action: { text: 'Upgrade', color: 'success', fill: 'solid', state: 'ENABLED', type: 'button' },
-  },
-  bordered: true,
-  hoverable: true,
-});
-
-const meta: Meta<PillComponent> = {
-  title: 'Molecules/Pill',
-  component: PillComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, PillComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Pill configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'PillMetadata',
-          detail: `{
-  token?: string;
-  content: ActionHeaderMetadata;
-  bordered?: boolean;
-  background?: string;
-  hoverable?: boolean;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-pill
-
-A compact card-like component for displaying condensed information.
-
-### Features
-
-- **Action Header**: Title and action button
-- **Bordered**: Optional border styling
-- **Hoverable**: Optional hover effects
-- **Custom Background**: Customizable background color
-- **Dark Mode**: Automatic dark mode support
-
-### Usage
-
-\`\`\`html
-<val-pill
-  [props]="{
-    content: {
-      title: { content: 'Pill Title', size: 'medium', color: 'dark' },
-      action: { text: 'Action', color: 'primary' }
-    },
-    bordered: true,
-    hoverable: true
-  }"
-></val-pill>
-\`\`\`
-
-### Use Cases
-
-- Feature highlights
-- Quick tips
-- Notification items
-- List items with actions
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PillComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: defaultProps },
-  }),
-};
-
-export const Bordered: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: borderedProps },
-  }),
-};
-
-export const Hoverable: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: hoverableProps },
-  }),
-};
-
-export const CustomBackground: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: withBackgroundProps },
-  }),
-};
-
-export const BorderedHoverable: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: borderedHoverableProps },
-  }),
-};
-
-export const WithAction: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-pill [props]="pillProps"></val-pill></div>`,
-    props: { pillProps: withActionProps },
-  }),
-};
-
-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;">Pill Variants</h3>
-
-        <val-pill [props]="feature"></val-pill>
-        <val-pill [props]="info"></val-pill>
-        <val-pill [props]="action"></val-pill>
-      </div>
-    `,
-    props: {
-      feature: showcaseFeatureProps,
-      info: showcaseInfoProps,
-      action: showcaseActionProps,
-    },
-  }),
-};

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

@@ -1,10 +0,0 @@
-import { ActionHeaderMetadata } from '../action-header/types';
-
-export type PillMetadata = {
-  token?: string;
-  image?: string;
-  bordered?: boolean;
-  background?: string;
-  hoverable?: boolean;
-  content: ActionHeaderMetadata;
-};

package/src/lib/components/molecules/pin-input/pin-input.component.scss

@@ -1,22 +0,0 @@
-@import '../../organisms/form/form.component.scss';
-
-.otp {
-  text-align: center;
-  margin-top: pxToRem(4);
-  font-family: var(--ion-default-font), Arial, sans-serif;
-
-  // Responsive: reduce size on mobile screens
-  @media (max-width: 480px) {
-    ::ng-deep .otp-input {
-      width: 40px !important;
-      height: 44px !important;
-      font-size: 24px !important;
-    }
-  }
-}
-
-.otp-input-box {
-  &:focus {
-    border-color: aqua;
-  }
-}

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

@@ -1,83 +0,0 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { NgOtpInputComponent, NgOtpInputConfig, NgOtpInputModule } from 'ng-otp-input';
-import { PinInputMetadata, PinInputSize } from './types';
-
-/** Size configurations for PIN input boxes */
-const SIZE_CONFIG: Record<PinInputSize, { width: string; height: string; fontSize: string }> = {
-  small: { width: '40px', height: '44px', fontSize: '24px' },
-  medium: { width: '50px', height: '54px', fontSize: '28px' },
-  large: { width: '58px', height: '60px', fontSize: '32px' },
-};
-
-@Component({
-  selector: 'val-pin-input',
-  standalone: true,
-  imports: [NgOtpInputModule],
-  template: `
-    <div class="otp">
-      <ng-otp-input [formCtrl]="props.control" [config]="otpInputConfig"></ng-otp-input>
-    </div>
-  `,
-  styleUrls: ['./pin-input.component.scss'],
-})
-/**
- * val-pin-input
- *
- * A PIN code input using ng-otp-input, integrated with Angular forms.
- *
- * @example
- * <val-pin-input [props]="{ control: myControl }"></val-pin-input>
- *
- * @input props: PinInputMetadata - Configuration for the PIN input (form control, length, etc.)
- */
-export class PinInputComponent implements OnInit {
-  @ViewChild(NgOtpInputComponent, { static: false }) pinCode: NgOtpInputComponent | undefined;
-
-  /**
-   * Input configuration object.
-   * @type {PinInputMetadata}
-   * @property control - The Angular FormControl for the PIN input.
-   * @property length - Number of digits in PIN (default: 5).
-   */
-  @Input() props: PinInputMetadata;
-
-  codeLength = 5;
-  otpInputConfig: NgOtpInputConfig = {
-    inputStyles: {
-      'font-size': SIZE_CONFIG.medium.fontSize,
-      width: SIZE_CONFIG.medium.width,
-      height: SIZE_CONFIG.medium.height,
-    },
-    inputClass: 'otp-input-box',
-    length: this.codeLength,
-    allowNumbersOnly: true,
-  };
-
-  constructor() {}
-
-  ngOnInit() {
-    // Usar props.length si se proporciona, sino mantener default 5
-    const length = this.props.length ?? 5;
-    // Usar props.size si se proporciona, sino mantener default 'medium'
-    const size = this.props.size ?? 'medium';
-    const sizeStyles = SIZE_CONFIG[size];
-
-    this.otpInputConfig = {
-      ...this.otpInputConfig,
-      length,
-      allowNumbersOnly: this.props.allowNumbersOnly ?? true,
-      inputStyles: {
-        'font-size': sizeStyles.fontSize,
-        width: sizeStyles.width,
-        height: sizeStyles.height,
-        ...this.props.inputStyles, // Allow custom overrides
-      },
-    };
-  }
-
-  reset() {
-    if (this.pinCode) {
-      this.pinCode.setValue('');
-    }
-  }
-}

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

@@ -1,196 +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 { PinInputComponent } from './pin-input.component';
-import { InputMetadata } from '../../types';
-
-const createPinInputProps = (overrides: Partial<InputMetadata> = {}): InputMetadata =>
-  ({
-    control: new FormControl(''),
-    token: 'pin-input',
-    label: 'PIN Code',
-    name: 'pin-field',
-    ...overrides,
-  }) as InputMetadata;
-
-// Pre-create all props at module level
-const defaultProps = createPinInputProps();
-const verificationProps = createPinInputProps({
-  label: 'Verification Code',
-});
-const otpProps = createPinInputProps({
-  label: 'One-Time Password',
-});
-const securityProps = createPinInputProps({
-  label: 'Security Code',
-});
-
-// Showcase props
-const showcaseOtpProps = createPinInputProps({
-  label: 'Enter OTP',
-});
-const showcaseVerifyProps = createPinInputProps({
-  label: 'Verify Phone',
-});
-
-const meta: Meta<PinInputComponent> = {
-  title: 'Molecules/PinInput',
-  component: PinInputComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ReactiveFormsModule, PinInputComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'PIN input configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'InputMetadata',
-          detail: `{
-  control: FormControl;
-  token: string;
-  label: string;
-  name: string;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-pin-input
-
-A PIN code input using ng-otp-input, integrated with Angular forms.
-
-### Features
-
-- **5-digit PIN**: Fixed length for security codes
-- **Numbers Only**: Only accepts numeric input
-- **Auto-focus**: Automatically moves to next field
-- **Form Integration**: Works with Angular Reactive Forms
-
-### Usage
-
-\`\`\`html
-<val-pin-input
-  [props]="{
-    control: pinControl
-  }"
-></val-pin-input>
-\`\`\`
-
-### Notes
-
-- Default length is 5 digits
-- Uses ng-otp-input library internally
-- Call the \`reset()\` method to clear the input
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PinInputComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `
-      <div style="max-width: 400px;">
-        <val-pin-input [props]="pinProps"></val-pin-input>
-      </div>
-    `,
-    props: { pinProps: defaultProps },
-  }),
-};
-
-export const VerificationCode: Story = {
-  render: () => ({
-    template: `
-      <div style="max-width: 400px;">
-        <h4 style="margin: 0 0 16px; font-family: system-ui; font-size: 16px;">Enter Verification Code</h4>
-        <val-pin-input [props]="pinProps"></val-pin-input>
-        <p style="margin: 16px 0 0; font-family: system-ui; font-size: 14px; color: #666;">
-          We sent a code to your email.
-        </p>
-      </div>
-    `,
-    props: { pinProps: verificationProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'PIN input for email verification codes.',
-      },
-    },
-  },
-};
-
-export const OneTimePassword: Story = {
-  render: () => ({
-    template: `
-      <div style="max-width: 400px;">
-        <h4 style="margin: 0 0 16px; font-family: system-ui; font-size: 16px;">Enter OTP</h4>
-        <val-pin-input [props]="pinProps"></val-pin-input>
-        <p style="margin: 16px 0 0; font-family: system-ui; font-size: 14px; color: #666;">
-          Enter the code from your authenticator app.
-        </p>
-      </div>
-    `,
-    props: { pinProps: otpProps },
-  }),
-};
-
-export const SecurityCode: Story = {
-  render: () => ({
-    template: `
-      <div style="max-width: 400px;">
-        <h4 style="margin: 0 0 16px; font-family: system-ui; font-size: 16px;">Security Verification</h4>
-        <val-pin-input [props]="pinProps"></val-pin-input>
-        <p style="margin: 16px 0 0; font-family: system-ui; font-size: 14px; color: #666;">
-          Enter your security PIN to continue.
-        </p>
-      </div>
-    `,
-    props: { pinProps: securityProps },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 48px; max-width: 450px;">
-        <h3 style="margin: 0; font-family: system-ui;">PIN Input Examples</h3>
-
-        <div style="background: #f9f9f9; padding: 24px; border-radius: 12px; text-align: center;">
-          <h4 style="margin: 0 0 8px; font-family: system-ui;">Two-Factor Authentication</h4>
-          <p style="margin: 0 0 24px; font-family: system-ui; font-size: 14px; color: #666;">
-            Enter the 5-digit code from your authenticator
-          </p>
-          <val-pin-input [props]="otp"></val-pin-input>
-        </div>
-
-        <div style="background: #f9f9f9; padding: 24px; border-radius: 12px; text-align: center;">
-          <h4 style="margin: 0 0 8px; font-family: system-ui;">Phone Verification</h4>
-          <p style="margin: 0 0 24px; font-family: system-ui; font-size: 14px; color: #666;">
-            We sent a code to +1 (555) ***-**89
-          </p>
-          <val-pin-input [props]="verify"></val-pin-input>
-          <button style="margin-top: 16px; background: none; border: none; color: #3880ff; font-family: system-ui; cursor: pointer;">
-            Resend Code
-          </button>
-        </div>
-      </div>
-    `,
-    props: {
-      otp: showcaseOtpProps,
-      verify: showcaseVerifyProps,
-    },
-  }),
-};