valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/title-block/title-block.stories.ts

@@ -0,0 +1,351 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { TitleBlockComponent } from './title-block.component';
+import { TitleBlockMetada } from './types';
+import { TitleMetadata } from '../../atoms/title/types';
+
+const meta: Meta<TitleBlockComponent> = {
+  title: 'Molecules/Title Block',
+  component: TitleBlockComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, TitleBlockComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Title block configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-title-block
+
+A flexible title block component that displays up to three titles in a vertical arrangement: above title, main title, and below title.
+
+### Usage
+
+\`\`\`html
+<val-title-block
+  [props]="{
+    position: 'center',
+    aboveTitle: { content: 'STEP 1', size: 'small', color: 'medium', bold: false },
+    title: { content: 'Main Title', size: 'xlarge', color: 'dark', bold: true },
+    bellowTitle: { content: 'Description text here', size: 'medium', color: 'medium', bold: false }
+  }">
+</val-title-block>
+\`\`\`
+
+### Features
+
+- Three-tier title structure
+- Above title is automatically uppercased
+- Configurable text alignment (center, left, right, leftocenter)
+- Full color and size customization
+- Optional thin font weight for subtle text
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TitleBlockComponent>;
+
+const createTitleMeta = (content: string, size: TitleMetadata['size'], color: string, bold: boolean, thin?: boolean): TitleMetadata => ({
+  content,
+  size,
+  color: color as TitleMetadata['color'],
+  bold,
+  thin,
+});
+
+const createProps = (overrides: Partial<TitleBlockMetada> = {}): TitleBlockMetada => ({
+  position: 'center',
+  title: createTitleMeta('Main Title', 'large', 'dark', true),
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    props: createProps(),
+  },
+};
+
+export const WithAboveTitle: Story = {
+  args: {
+    props: createProps({
+      aboveTitle: createTitleMeta('Step 1 of 3', 'small', 'medium', false),
+      title: createTitleMeta('Create Your Account', 'xlarge', 'dark', true),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Title block with an above title (automatically uppercased).',
+      },
+    },
+  },
+};
+
+export const WithBelowTitle: Story = {
+  args: {
+    props: createProps({
+      title: createTitleMeta('Welcome Back', 'xlarge', 'dark', true),
+      bellowTitle: createTitleMeta('Sign in to continue to your account', 'medium', 'medium', false),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Title block with a description below the main title.',
+      },
+    },
+  },
+};
+
+export const FullTitleBlock: Story = {
+  args: {
+    props: createProps({
+      aboveTitle: createTitleMeta('Getting Started', 'small', 'primary', false),
+      title: createTitleMeta('Set Up Your Profile', 'xlarge', 'dark', true),
+      bellowTitle: createTitleMeta('Complete your profile to unlock all features', 'medium', 'medium', false),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full title block with above, main, and below titles.',
+      },
+    },
+  },
+};
+
+export const LeftAligned: Story = {
+  args: {
+    props: createProps({
+      position: 'left',
+      aboveTitle: createTitleMeta('Section', 'small', 'medium', false),
+      title: createTitleMeta('Left Aligned Title', 'large', 'dark', true),
+      bellowTitle: createTitleMeta('Content aligned to the left', 'medium', 'medium', false),
+    }),
+  },
+};
+
+export const RightAligned: Story = {
+  args: {
+    props: createProps({
+      position: 'right',
+      aboveTitle: createTitleMeta('Section', 'small', 'medium', false),
+      title: createTitleMeta('Right Aligned Title', 'large', 'dark', true),
+      bellowTitle: createTitleMeta('Content aligned to the right', 'medium', 'medium', false),
+    }),
+  },
+};
+
+export const CenterAligned: Story = {
+  args: {
+    props: createProps({
+      position: 'center',
+      aboveTitle: createTitleMeta('Welcome', 'small', 'primary', false),
+      title: createTitleMeta('Center Aligned Title', 'large', 'dark', true),
+      bellowTitle: createTitleMeta('Content centered in the container', 'medium', 'medium', false),
+    }),
+  },
+};
+
+export const ColoredTitles: Story = {
+  args: {
+    props: createProps({
+      aboveTitle: createTitleMeta('Special Offer', 'small', 'danger', false),
+      title: createTitleMeta('50% Off Today', 'xlarge', 'primary', true),
+      bellowTitle: createTitleMeta('Limited time only', 'medium', 'warning', false),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Title block with different colors for each title level.',
+      },
+    },
+  },
+};
+
+export const ThinBelowTitle: Story = {
+  args: {
+    props: createProps({
+      title: createTitleMeta('Product Details', 'xlarge', 'dark', true),
+      bellowTitle: createTitleMeta('Lightweight and comfortable for everyday use', 'medium', 'medium', false, true),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Title block with thin font weight for the below title.',
+      },
+    },
+  },
+};
+
+export const OnboardingStep: Story = {
+  args: {
+    props: createProps({
+      position: 'center',
+      aboveTitle: createTitleMeta('Step 2 of 4', 'small', 'tertiary', false),
+      title: createTitleMeta('Verify Your Email', 'xlarge', 'dark', true),
+      bellowTitle: createTitleMeta('We sent a verification code to your email address', 'medium', 'medium', false),
+    }),
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    props: createProps({
+      position: 'center',
+      title: createTitleMeta('Something Went Wrong', 'xlarge', 'danger', true),
+      bellowTitle: createTitleMeta('Please try again or contact support', 'medium', 'medium', false),
+    }),
+  },
+};
+
+export const SuccessState: Story = {
+  args: {
+    props: createProps({
+      position: 'center',
+      title: createTitleMeta('Payment Successful!', 'xlarge', 'success', true),
+      bellowTitle: createTitleMeta('Your order has been confirmed', 'medium', 'medium', false),
+    }),
+  },
+};
+
+export const SmallSizes: Story = {
+  args: {
+    props: createProps({
+      aboveTitle: createTitleMeta('Category', 'small', 'medium', false),
+      title: createTitleMeta('Small Title Block', 'medium', 'dark', true),
+      bellowTitle: createTitleMeta('Compact version', 'small', 'medium', false),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact title block using smaller text sizes.',
+      },
+    },
+  },
+};
+
+export const LargeSizes: Story = {
+  args: {
+    props: createProps({
+      aboveTitle: createTitleMeta('Featured', 'medium', 'primary', false),
+      title: createTitleMeta('Large Title Block', 'xlarge', 'dark', true),
+      bellowTitle: createTitleMeta('Extra prominent version for hero sections', 'large', 'medium', false),
+    }),
+  },
+};
+
+export const OnlyMainTitle: Story = {
+  args: {
+    props: createProps({
+      position: 'center',
+      title: createTitleMeta('Simple Title', 'xlarge', 'dark', true),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Title block with only the main title.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; padding: 16px;">
+        <h3 style="margin: 0; color: #666;">Position Variants</h3>
+
+        <div style="background: #f5f5f5; padding: 16px; border-radius: 8px;">
+          <val-title-block [props]="leftProps"></val-title-block>
+        </div>
+        <div style="background: #f5f5f5; padding: 16px; border-radius: 8px;">
+          <val-title-block [props]="centerProps"></val-title-block>
+        </div>
+        <div style="background: #f5f5f5; padding: 16px; border-radius: 8px;">
+          <val-title-block [props]="rightProps"></val-title-block>
+        </div>
+
+        <h3 style="margin: 0; color: #666;">Size Variants</h3>
+
+        <val-title-block [props]="smallProps"></val-title-block>
+        <val-title-block [props]="mediumProps"></val-title-block>
+        <val-title-block [props]="largeProps"></val-title-block>
+
+        <h3 style="margin: 0; color: #666;">Use Cases</h3>
+
+        <val-title-block [props]="onboardingProps"></val-title-block>
+        <val-title-block [props]="successProps"></val-title-block>
+        <val-title-block [props]="errorProps"></val-title-block>
+      </div>
+    `,
+    props: {
+      leftProps: createProps({
+        position: 'left',
+        aboveTitle: createTitleMeta('Left', 'small', 'medium', false),
+        title: createTitleMeta('Left Aligned', 'large', 'dark', true),
+        bellowTitle: createTitleMeta('Position: left', 'small', 'medium', false),
+      }),
+      centerProps: createProps({
+        position: 'center',
+        aboveTitle: createTitleMeta('Center', 'small', 'medium', false),
+        title: createTitleMeta('Center Aligned', 'large', 'dark', true),
+        bellowTitle: createTitleMeta('Position: center', 'small', 'medium', false),
+      }),
+      rightProps: createProps({
+        position: 'right',
+        aboveTitle: createTitleMeta('Right', 'small', 'medium', false),
+        title: createTitleMeta('Right Aligned', 'large', 'dark', true),
+        bellowTitle: createTitleMeta('Position: right', 'small', 'medium', false),
+      }),
+      smallProps: createProps({
+        title: createTitleMeta('Small Title', 'small', 'dark', true),
+        bellowTitle: createTitleMeta('Small description', 'small', 'medium', false),
+      }),
+      mediumProps: createProps({
+        title: createTitleMeta('Medium Title', 'medium', 'dark', true),
+        bellowTitle: createTitleMeta('Medium description', 'small', 'medium', false),
+      }),
+      largeProps: createProps({
+        title: createTitleMeta('Large Title', 'xlarge', 'dark', true),
+        bellowTitle: createTitleMeta('Large description', 'medium', 'medium', false),
+      }),
+      onboardingProps: createProps({
+        aboveTitle: createTitleMeta('Step 1', 'small', 'tertiary', false),
+        title: createTitleMeta('Onboarding Flow', 'xlarge', 'dark', true),
+        bellowTitle: createTitleMeta('Complete the steps to get started', 'medium', 'medium', false),
+      }),
+      successProps: createProps({
+        title: createTitleMeta('Success!', 'xlarge', 'success', true),
+        bellowTitle: createTitleMeta('Your action was completed', 'medium', 'medium', false),
+      }),
+      errorProps: createProps({
+        title: createTitleMeta('Error', 'xlarge', 'danger', true),
+        bellowTitle: createTitleMeta('Something went wrong', 'medium', 'medium', false),
+      }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of all title block variants.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/title-block/types.ts

@@ -0,0 +1,16 @@
+import { TitleMetadata } from '../../atoms/title/types';
+
+/**
+ * Title block configuration object.
+ * @type {TitleBlockMetada}
+ * @property title - Main title display configuration.
+ * @property aboveTitle - Title above the main title (optional).
+ * @property bellowTitle - Title below the main title (optional).
+ * @property position - Position of the block ('center', etc.).
+ */
+export type TitleBlockMetada = {
+  position: 'center' | 'left' | 'right' | 'leftocenter';
+  title?: TitleMetadata;
+  aboveTitle?: TitleMetadata;
+  bellowTitle?: TitleMetadata;
+};

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+ion-toggle {
+  --handle-spacing: 3px;
+}

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

@@ -0,0 +1,94 @@
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonToggle } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { PresetService } from '../../../services/presets';
+import { ToggleInputMetadata } from './types';
+import { ComponentStates } from '../../types';
+
+@Component({
+  selector: 'val-toggle-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonToggle],
+  template: `
+    <ion-toggle
+      [formControl]="resolvedProps.control"
+      [color]="resolvedProps.color || 'primary'"
+      [disabled]="resolvedProps.state === states.DISABLED || resolvedProps.disabled"
+      [labelPlacement]="resolvedProps.labelPosition || 'end'"
+      [justify]="resolvedProps.justify || 'start'"
+    >
+      {{ getDisplayLabel() }}
+    </ion-toggle>
+  `,
+  styleUrls: ['./toggle-input.component.scss'],
+})
+/**
+ * val-toggle-input
+ *
+ * A toggle/switch input for boolean values, integrated with Angular forms.
+ *
+ * @example
+ * <val-toggle-input [props]="{
+ *   control: myBooleanControl,
+ *   label: 'Activar notificaciones',
+ *   color: 'primary',
+ *   labelPosition: 'end'
+ * }"></val-toggle-input>
+ *
+ * @input props: ToggleInputMetadata - Configuration for the toggle input
+ */
+export class ToggleInputComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable toggle input configurations
+   * that can be registered at app level via provideValtechPresets().
+   *
+   * @example
+   * <val-toggle-input preset="form-field" [props]="{ control: ctrl }"></val-toggle-input>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Input configuration object. Values here override preset values.
+   * @type {ToggleInputMetadata}
+   */
+  @Input() props: Partial<ToggleInputMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: ToggleInputMetadata = {} as ToggleInputMetadata;
+
+  states = ComponentStates;
+
+  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('toggleInput', this.preset) as Partial<ToggleInputMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as ToggleInputMetadata;
+  }
+
+  getDisplayLabel(): string {
+    return this.resolvedProps.label || this.resolvedProps.contentFallback || '';
+  }
+}