valtech-components 2.0.688 → 2.0.689

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

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

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

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

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

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

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

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