valtech-components 2.0.794 → 2.0.795

package/src/lib/components/molecules/docs-section/docs-section.component.ts

@@ -0,0 +1,99 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DocsSectionMetadata } from './types';
+
+/**
+ * val-docs-section
+ *
+ * A semantic section wrapper for documentation pages.
+ * Automatically creates headings with IDs for TOC linking.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-section [props]="{ id: 'installation', title: 'Installation' }">
+ *   <p>Install the package using npm...</p>
+ *   <val-docs-code-example [props]="codeExample"></val-docs-code-example>
+ * </val-docs-section>
+ * ```
+ *
+ * @example With level 3 heading
+ * ```html
+ * <val-docs-section [props]="{ id: 'npm', title: 'Using npm', level: 3 }">
+ *   <val-docs-code-example [props]="npmExample"></val-docs-code-example>
+ * </val-docs-section>
+ * ```
+ */
+@Component({
+  selector: 'val-docs-section',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <section
+      [id]="props.id"
+      class="docs-section"
+      [class]="props.cssClass"
+      [class.docs-section--level-2]="level === 2"
+      [class.docs-section--level-3]="level === 3"
+    >
+      @if (level === 2) {
+        <h2 class="docs-section__title">{{ props.title }}</h2>
+      } @else {
+        <h3 class="docs-section__title">{{ props.title }}</h3>
+      }
+
+      @if (props.description) {
+        <p class="docs-section__description">{{ props.description }}</p>
+      }
+
+      <div class="docs-section__content">
+        <ng-content></ng-content>
+      </div>
+    </section>
+  `,
+  styles: [`
+    .docs-section {
+      margin-bottom: 2.5rem;
+    }
+
+    .docs-section__title {
+      margin: 0 0 1rem;
+      font-weight: 600;
+      color: var(--ion-text-color);
+      scroll-margin-top: 80px;
+    }
+
+    .docs-section--level-2 .docs-section__title {
+      font-size: 1.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--ion-border-color, #e0e0e0);
+    }
+
+    .docs-section--level-3 .docs-section__title {
+      font-size: 1.25rem;
+    }
+
+    .docs-section__description {
+      margin: 0 0 1.25rem;
+      color: var(--ion-color-medium);
+      font-size: 1rem;
+      line-height: 1.6;
+    }
+
+    .docs-section__content > *:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Dark mode */
+    :host-context(.dark) .docs-section--level-2 .docs-section__title,
+    :host-context([color-scheme="dark"]) .docs-section--level-2 .docs-section__title {
+      border-bottom-color: var(--ion-border-color, #333);
+    }
+  `],
+})
+export class DocsSectionComponent {
+  @Input() props: DocsSectionMetadata = { id: '', title: '' };
+
+  get level(): 2 | 3 {
+    return this.props.level ?? 2;
+  }
+}

package/src/lib/components/molecules/docs-section/types.ts

@@ -0,0 +1,31 @@
+/**
+ * Configuration for the docs-section component.
+ */
+export interface DocsSectionMetadata {
+  /**
+   * Unique ID for the section (used for TOC linking).
+   * Will be applied to the section element for anchor navigation.
+   */
+  id: string;
+
+  /**
+   * Section title displayed as heading.
+   */
+  title: string;
+
+  /**
+   * Heading level for the section.
+   * @default 2
+   */
+  level?: 2 | 3;
+
+  /**
+   * Optional description below the title.
+   */
+  description?: string;
+
+  /**
+   * Custom CSS class.
+   */
+  cssClass?: string;
+}

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

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { IonInput } from '@ionic/angular/standalone';
+import { PresetService } from '../../../services/presets';
+import { InputMetadata } from '../../types';
+
+@Component({
+  selector: 'val-email-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonInput],
+  template: ` <ion-input [formControl]="resolvedProps.control" type="email" [placeholder]="resolvedProps.placeholder"></ion-input> `,
+  styleUrls: ['./email-input.component.scss'],
+})
+/**
+ * val-email-input
+ *
+ * An email input field integrated with Angular forms.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset (recommended):
+ * <val-email-input preset="form-field" [props]="{ control: myControl, placeholder: 'Email' }"></val-email-input>
+ *
+ * @example Static (backwards compatible):
+ * <val-email-input [props]="{ control: myControl, placeholder: 'Enter your email' }"></val-email-input>
+ *
+ * @input preset: string - Name of preset to apply (e.g., 'form-field')
+ * @input props: InputMetadata - Configuration for the input (overrides preset values)
+ */
+export class EmailInputComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  /**
+   * Preset name to apply. Presets define reusable input configurations
+   * that can be registered at app level via provideValtechPresets().
+   *
+   * @example
+   * <val-email-input preset="form-field" [props]="{ control: ctrl }"></val-email-input>
+   */
+  @Input() preset?: string;
+
+  /**
+   * Input configuration object. Values here override preset values.
+   * @type {InputMetadata}
+   * @property control - The Angular FormControl for the input.
+   * @property placeholder - The placeholder text.
+   */
+  @Input() props: Partial<InputMetadata> = {};
+
+  /**
+   * Resolved props after merging preset + explicit props.
+   */
+  resolvedProps: InputMetadata = {} as InputMetadata;
+
+  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('emailInput', this.preset) as Partial<InputMetadata>) : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as InputMetadata;
+  }
+}

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

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EmailInputComponent } from './email-input.component';
+import { InputMetadata } from '../../types';
+
+const createEmailInputProps = (overrides: Partial<InputMetadata> = {}): InputMetadata =>
+  ({
+    control: new FormControl(''),
+    token: 'email-input',
+    label: 'Email',
+    name: 'email-field',
+    placeholder: 'Enter your email',
+    ...overrides,
+  }) as InputMetadata;
+
+// Pre-create all props at module level
+const defaultProps = createEmailInputProps();
+const withValueProps = createEmailInputProps({
+  control: new FormControl('john.doe@example.com'),
+  placeholder: 'Has value',
+});
+const workEmailProps = createEmailInputProps({
+  placeholder: 'name@company.com',
+  label: 'Work Email',
+});
+const personalEmailProps = createEmailInputProps({
+  placeholder: 'your.email@gmail.com',
+  label: 'Personal Email',
+});
+const contactEmailProps = createEmailInputProps({
+  placeholder: 'contact@example.com',
+  label: 'Contact Email',
+});
+
+// Showcase props
+const showcasePrimaryProps = createEmailInputProps({
+  placeholder: 'your.email@example.com',
+  label: 'Primary Email',
+});
+const showcaseWorkProps = createEmailInputProps({
+  placeholder: 'name@company.com',
+  label: 'Work Email',
+});
+const showcaseRecoveryProps = createEmailInputProps({
+  placeholder: 'recovery@example.com',
+  label: 'Recovery Email',
+});
+
+const meta: Meta<EmailInputComponent> = {
+  title: 'Molecules/EmailInput',
+  component: EmailInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, EmailInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Email input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'InputMetadata',
+          detail: `{
+  control: FormControl;
+  token: string;
+  label: string;
+  name: string;
+  placeholder: string;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-email-input
+
+An email input field integrated with Angular forms.
+
+### Features
+
+- **Email Type**: Uses \`type="email"\` for native email keyboard on mobile
+- **Form Integration**: Works with Angular Reactive Forms
+- **Validation Ready**: Works with Angular validators like \`Validators.email\`
+
+### Usage
+
+\`\`\`html
+<val-email-input
+  [props]="{
+    control: emailControl,
+    placeholder: 'Enter your email'
+  }"
+></val-email-input>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EmailInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-email-input [props]="inputProps"></val-email-input></div>`,
+    props: { inputProps: defaultProps },
+  }),
+};
+
+export const WithValue: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-email-input [props]="inputProps"></val-email-input></div>`,
+    props: { inputProps: withValueProps },
+  }),
+};
+
+export const WorkEmail: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-email-input [props]="inputProps"></val-email-input></div>`,
+    props: { inputProps: workEmailProps },
+  }),
+};
+
+export const PersonalEmail: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-email-input [props]="inputProps"></val-email-input></div>`,
+    props: { inputProps: personalEmailProps },
+  }),
+};
+
+export const ContactEmail: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-email-input [props]="inputProps"></val-email-input></div>`,
+    props: { inputProps: contactEmailProps },
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 350px;">
+        <h3 style="margin: 0; font-family: system-ui;">Email Inputs</h3>
+
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div>
+            <label style="font-family: system-ui; font-size: 14px; color: #666; display: block; margin-bottom: 4px;">Primary Email</label>
+            <val-email-input [props]="primary"></val-email-input>
+          </div>
+
+          <div>
+            <label style="font-family: system-ui; font-size: 14px; color: #666; display: block; margin-bottom: 4px;">Work Email</label>
+            <val-email-input [props]="work"></val-email-input>
+          </div>
+
+          <div>
+            <label style="font-family: system-ui; font-size: 14px; color: #666; display: block; margin-bottom: 4px;">Recovery Email</label>
+            <val-email-input [props]="recovery"></val-email-input>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      primary: showcasePrimaryProps,
+      work: showcaseWorkProps,
+      recovery: showcaseRecoveryProps,
+    },
+  }),
+};

package/src/lib/components/molecules/expandable-text/expandable-text.component.ts

@@ -0,0 +1,111 @@
+import { Component, inject, Input } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { resolveColor } from '../../../shared/utils/styles';
+import { ExpandableTextInput } from './types';
+
+@Component({
+  selector: 'val-expandable-text',
+  standalone: true,
+  imports: [IonText],
+  template: `
+    <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
+      <div class="content-wrapper">
+        <ion-text>
+          <p class="description">
+            <span class="content">{{ expanded ? props.content : truncatedText }}</span>
+          </p>
+        </ion-text>
+      </div>
+      @if (!expanded && isTruncated) {
+        <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+          {{ getExpandText() }}
+        </span>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .description-container {
+        position: relative;
+        overflow: hidden;
+        transition: max-height 0.3s ease-in-out;
+      }
+
+      .description-container:not(.expanded) {
+        max-height: 10rem; /* Altura para texto truncado */
+      }
+
+      .description-container.expanded {
+        max-height: none; /* Sin límite de altura al expandir */
+      }
+
+      .content-wrapper {
+        overflow: hidden;
+      }
+
+      /* Mask gradient - funciona en cualquier color de fondo */
+      .description-container:not(.expanded).has-gradient .content-wrapper {
+        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+      }
+
+      .description {
+        margin: 0;
+      }
+
+      .see-more {
+        display: block;
+        font-weight: bold;
+        cursor: pointer;
+        margin-top: 0.25rem;
+      }
+    `,
+  ],
+})
+/**
+ * val-expandable-text
+ *
+ * A text component that can be expanded/collapsed to show more or less content.
+ *
+ * @example
+ * <val-expandable-text [props]="{ content: '...', limit: 180, color: 'primary', expandText: 'más' }"></val-expandable-text>
+ *
+ * @input props: ExpandableTextInput - Configuration for the expandable text (content, limit, color, expandText)
+ */
+export class ExpandableTextComponent {
+  /**
+   * Expandable text configuration object.
+   * @type {ExpandableTextInput}
+   * @property content - The text content to display.
+   * @property limit - The character limit before truncation.
+   * @property color - The color for the "see more" link.
+   * @property expandText - The text for the expand link (optional).
+   */
+  @Input() props: ExpandableTextInput;
+  expanded = false;
+  defaultColor = 'primary';
+
+  private i18n = inject(I18nService);
+
+  get truncatedText(): string {
+    const maxLength = this.props.limit || 100;
+    return this.props.content?.length > maxLength ? this.props.content.slice(0, maxLength) + '...' : this.props.content;
+  }
+
+  get isTruncated(): boolean {
+    return this.props.content?.length > (this.props.limit || 100);
+  }
+
+  getExpandText(): string {
+    return this.props.expandText || this.i18n.t('seeMore');
+  }
+
+  toggleExpand() {
+    this.expanded = !this.expanded;
+  }
+
+  color() {
+    return resolveColor(this.props.color || this.defaultColor);
+  }
+}