valtech-components 2.0.787 → 2.0.795

package/src/lib/components/molecules/notes-box/notes-box.stories.ts

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { NotesBoxComponent } from './notes-box.component';
+import { NotesBoxMetadata } from './types';
+
+const meta: Meta<NotesBoxComponent> = {
+  title: 'Molecules/Notes Box',
+  component: NotesBoxComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, NotesBoxComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Notes box configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-notes-box
+
+A styled information box with an optional prefix and left border accent. Ideal for displaying notes, tips, warnings, or important information.
+
+### Usage
+
+\`\`\`html
+<val-notes-box
+  [props]="{
+    text: 'This is important information.',
+    prefix: 'Note:',
+    color: 'warning',
+    textColor: 'dark',
+    size: 'medium',
+    rounded: true,
+    padding: '16px'
+  }">
+</val-notes-box>
+\`\`\`
+
+### Features
+
+- Left border accent for visual distinction
+- Optional bold prefix text
+- Configurable background and text colors
+- Multiple size options
+- Optional rounded corners
+- Customizable padding
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NotesBoxComponent>;
+
+const createProps = (overrides: Partial<NotesBoxMetadata> = {}): NotesBoxMetadata => ({
+  text: 'This is important information that the user should be aware of.',
+  prefix: 'Note:',
+  color: 'light',
+  textColor: 'dark',
+  size: 'medium',
+  rounded: true,
+  padding: '16px',
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    props: createProps(),
+  },
+};
+
+export const InfoNote: Story = {
+  args: {
+    props: createProps({
+      text: 'You can customize your settings at any time from the preferences menu.',
+      prefix: 'Info:',
+      color: 'primary',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An informational note with primary color accent.',
+      },
+    },
+  },
+};
+
+export const WarningNote: Story = {
+  args: {
+    props: createProps({
+      text: 'This action cannot be undone. Please proceed with caution.',
+      prefix: 'Warning:',
+      color: 'warning',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A warning note to alert users of potential risks.',
+      },
+    },
+  },
+};
+
+export const ErrorNote: Story = {
+  args: {
+    props: createProps({
+      text: 'There was an error processing your request. Please try again later.',
+      prefix: 'Error:',
+      color: 'danger',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An error note for displaying error messages.',
+      },
+    },
+  },
+};
+
+export const SuccessNote: Story = {
+  args: {
+    props: createProps({
+      text: 'Your changes have been saved successfully.',
+      prefix: 'Success:',
+      color: 'success',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A success note for positive feedback.',
+      },
+    },
+  },
+};
+
+export const TipNote: Story = {
+  args: {
+    props: createProps({
+      text: 'Press Ctrl+S to save your work quickly.',
+      prefix: 'Tip:',
+      color: 'tertiary',
+      textColor: 'dark',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A tip note for helpful suggestions.',
+      },
+    },
+  },
+};
+
+export const WithoutPrefix: Story = {
+  args: {
+    props: createProps({
+      text: 'This note does not have a prefix, showing just the main text content.',
+      prefix: '',
+      color: 'light',
+      textColor: 'medium',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notes box without a prefix, useful for simple informational text.',
+      },
+    },
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    props: createProps({
+      text: 'Small text for compact layouts.',
+      prefix: 'Note:',
+      size: 'small',
+      padding: '8px',
+    }),
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    props: createProps({
+      text: 'Larger text for more prominent notes.',
+      prefix: 'Important:',
+      size: 'large',
+      padding: '20px',
+    }),
+  },
+};
+
+export const XLargeSize: Story = {
+  args: {
+    props: createProps({
+      text: 'Extra large text for maximum visibility.',
+      prefix: 'Alert:',
+      size: 'xlarge',
+      padding: '24px',
+    }),
+  },
+};
+
+export const NotRounded: Story = {
+  args: {
+    props: createProps({
+      text: 'This box has sharp corners for a different visual style.',
+      prefix: 'Note:',
+      rounded: false,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notes box without rounded corners.',
+      },
+    },
+  },
+};
+
+export const CustomPadding: Story = {
+  args: {
+    props: createProps({
+      text: 'This box has extra padding for emphasis.',
+      prefix: 'Featured:',
+      color: 'secondary',
+      padding: '24px 32px',
+    }),
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    props: createProps({
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+      prefix: 'Details:',
+      color: 'light',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Notes box with longer content demonstrating text wrapping.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
+        <h3 style="margin: 0; color: #666;">Color Variants</h3>
+
+        <val-notes-box [props]="infoProps"></val-notes-box>
+        <val-notes-box [props]="warningProps"></val-notes-box>
+        <val-notes-box [props]="errorProps"></val-notes-box>
+        <val-notes-box [props]="successProps"></val-notes-box>
+        <val-notes-box [props]="tipProps"></val-notes-box>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Size Variants</h3>
+
+        <val-notes-box [props]="smallProps"></val-notes-box>
+        <val-notes-box [props]="mediumProps"></val-notes-box>
+        <val-notes-box [props]="largeProps"></val-notes-box>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Without Prefix</h3>
+
+        <val-notes-box [props]="noPrefixProps"></val-notes-box>
+      </div>
+    `,
+    props: {
+      infoProps: createProps({ text: 'General information for the user.', prefix: 'Info:', color: 'primary' }),
+      warningProps: createProps({ text: 'Proceed with caution.', prefix: 'Warning:', color: 'warning' }),
+      errorProps: createProps({ text: 'An error has occurred.', prefix: 'Error:', color: 'danger' }),
+      successProps: createProps({ text: 'Operation completed successfully.', prefix: 'Success:', color: 'success' }),
+      tipProps: createProps({ text: 'Here is a helpful tip.', prefix: 'Tip:', color: 'tertiary' }),
+      smallProps: createProps({ text: 'Small note', prefix: 'Small:', size: 'small', padding: '8px' }),
+      mediumProps: createProps({ text: 'Medium note', prefix: 'Medium:', size: 'medium' }),
+      largeProps: createProps({ text: 'Large note', prefix: 'Large:', size: 'large', padding: '20px' }),
+      noPrefixProps: createProps({ text: 'This note has no prefix and uses only the main text.', prefix: '', color: 'light' }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of all notes box variants including colors and sizes.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/notes-box/types.ts

@@ -0,0 +1,36 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Props for val-notes-box component.
+ *
+ * @property color - The background color of the box.
+ * @property textColor - The color of the text.
+ * @property prefix - Optional prefix text (bold). Pass `''` (empty string) to suppress the prefix entirely.
+ * @property text - The main text content. May contain `<strong>` / `<b>` tags when `allowPartialBold` is enabled.
+ * @property size - The size of the text and box ('small' | 'medium' | 'large' | 'xlarge').
+ * @property rounded - Whether the box has rounded corners.
+ * @property padding - Custom padding for the box (optional).
+ * @property allowPartialBold - Render inline `<strong>`/`<b>` tags in `text` as bold via innerHTML. Default `false`.
+ * @property processLinks - Auto-process URLs and `[text](url)` markdown links in `text`. Default `false`.
+ */
+export interface NotesBoxMetadata {
+  color: Color;
+  textColor: Color;
+  prefix: string;
+  text: string;
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  rounded: boolean;
+  padding?: string;
+  allowPartialBold?: boolean;
+  processLinks?: boolean;
+  /**
+   * Compact mode — renders the box as inline-block with `fit-content` width and
+   * tighter padding. Ideal for short labels (status chips, doc metadata, badges)
+   * where a full-width banner feels oversized.
+   */
+  compact?: boolean;
+  /**
+   * Text alignment inside the box. Default `'left'`.
+   */
+  align?: 'left' | 'center' | 'right';
+}

package/src/lib/components/molecules/number-from-to/number-from-to.component.scss

@@ -0,0 +1,10 @@
+.number-from-to-container {
+  // display: flex;
+  // gap: 1rem;
+  // align-items: flex-end;
+
+  // @media (max-width: 768px) {
+  //   flex-direction: column;
+  //   gap: 0.5rem;
+  // }
+}

package/src/lib/components/molecules/number-from-to/number-from-to.component.ts

@@ -0,0 +1,134 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { IonInput, IonLabel } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { NumberFromToMetadata } from './types';
+
+@Component({
+  selector: 'val-number-from-to',
+  standalone: true,
+  imports: [ReactiveFormsModule, IonInput, IonLabel],
+  template: `
+    <div class="number-from-to-container">
+      <ion-label position="stacked">{{ getFromLabel() }}</ion-label>
+      <ion-input
+        [formControl]="fromControl"
+        type="number"
+        [placeholder]="props.fromPlaceholder || props.placeholder"
+        [min]="props.min"
+        [max]="props.max"
+        [step]="props.step"
+      >
+      </ion-input>
+
+      <ion-label position="stacked">{{ getToLabel() }}</ion-label>
+      <ion-input
+        [formControl]="toControl"
+        type="number"
+        [placeholder]="props.toPlaceholder || props.placeholder"
+        [min]="props.min"
+        [max]="props.max"
+        [step]="props.step"
+      >
+      </ion-input>
+    </div>
+  `,
+  styleUrls: ['./number-from-to.component.scss'],
+})
+/**
+ * val-number-from-to
+ *
+ * A dual number input for specifying a range (from/to values), integrated with Angular forms.
+ *
+ * @example
+ * <val-number-from-to [props]="{ fromControl: fromCtrl, toControl: toCtrl, min: 0, max: 100 }"></val-number-from-to>
+ *
+ * @input props: NumberFromToMetadata - Configuration for the number range input.
+ */
+export class NumberFromToComponent implements OnInit {
+  /**
+   * Input configuration object.
+   * @type {NumberFromToMetadata}
+   * @property fromControl - The Angular FormControl for the "from" value.
+   * @property toControl - The Angular FormControl for the "to" value.
+   */
+  @Input() props: NumberFromToMetadata;
+
+  private i18n = inject(I18nService);
+
+  /** Get from label with i18n fallback */
+  getFromLabel(): string {
+    return this.props.fromLabel || this.i18n.t('from');
+  }
+
+  /** Get to label with i18n fallback */
+  getToLabel(): string {
+    return this.props.toLabel || this.i18n.t('to');
+  }
+
+  constructor() {}
+
+  ngOnInit() {
+    // Apply default values if configured
+    if (this.props?.withDefault || this.props?.value) {
+      this.applyDefaultValues();
+    }
+  }
+
+  private applyDefaultValues() {
+    const defaultValue = this.resolveDefaultValue();
+    if (defaultValue !== null) {
+      if (typeof defaultValue === 'object' && defaultValue.from !== undefined) {
+        this.fromControl?.setValue(defaultValue.from);
+        this.toControl?.setValue(defaultValue.to);
+      } else {
+        // Si es un valor simple, aplicarlo a ambos controles
+        this.fromControl?.setValue(defaultValue);
+        this.toControl?.setValue(defaultValue);
+      }
+      this.fromControl?.markAsPristine();
+      this.toControl?.markAsPristine();
+      this.fromControl?.updateValueAndValidity();
+      this.toControl?.updateValueAndValidity();
+    }
+  }
+
+  private resolveDefaultValue(): any {
+    // Explicit value takes precedence
+    if (this.props.value !== undefined && this.props.value !== null && this.props.value !== '') {
+      return this.parseValue(this.props.value);
+    }
+
+    // No default configuration
+    if (!this.props.withDefault) {
+      return null;
+    }
+
+    // Custom default value
+    if (typeof this.props.withDefault === 'string') {
+      return this.parseValue(this.props.withDefault);
+    }
+
+    // Auto default value (withDefault === true)
+    return { from: 0, to: 0 };
+  }
+
+  private parseValue(value: string): any {
+    try {
+      // Try to parse as JSON first (for object values)
+      return JSON.parse(value);
+    } catch {
+      // If not JSON, treat as number
+      const numValue = parseFloat(value) || 0;
+      return { from: numValue, to: numValue };
+    }
+  }
+
+  get fromControl(): FormControl {
+    return this.props.fromControl;
+  }
+
+  get toControl(): FormControl {
+    return this.props.toControl;
+  }
+}

package/src/lib/components/molecules/number-from-to/number-from-to.stories.ts

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FormControl } from '@angular/forms';
+import { NumberFromToComponent } from './number-from-to.component';
+
+const createNumberFromToProps = (overrides: Record<string, any> = {}) => ({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  placeholder: 'Enter value',
+  fromLabel: 'From',
+  toLabel: 'To',
+  fromPlaceholder: 'Min',
+  toPlaceholder: 'Max',
+  ...overrides,
+});
+
+const defaultProps = createNumberFromToProps();
+
+const priceRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(100),
+  toControl: new FormControl(500),
+  fromLabel: 'Min Price',
+  toLabel: 'Max Price',
+  fromPlaceholder: '$0',
+  toPlaceholder: '$10000',
+  range: { min: 0, max: 10000 },
+});
+
+const ageRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(18),
+  toControl: new FormControl(65),
+  fromLabel: 'Min Age',
+  toLabel: 'Max Age',
+  fromPlaceholder: '0',
+  toPlaceholder: '120',
+  range: { min: 0, max: 120 },
+});
+
+const quantityRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Quantity',
+  toLabel: 'Max Quantity',
+  fromPlaceholder: '1',
+  toPlaceholder: '1000',
+  range: { min: 1, max: 1000 },
+});
+
+const yearRangeProps = createNumberFromToProps({
+  fromControl: new FormControl(2020),
+  toControl: new FormControl(2024),
+  fromLabel: 'Start Year',
+  toLabel: 'End Year',
+  fromPlaceholder: '1900',
+  toPlaceholder: '2030',
+  range: { min: 1900, max: 2030 },
+});
+
+const disabledProps = createNumberFromToProps({
+  fromControl: new FormControl({ value: 50, disabled: true }),
+  toControl: new FormControl({ value: 100, disabled: true }),
+  fromLabel: 'From (disabled)',
+  toLabel: 'To (disabled)',
+});
+
+const showcasePriceProps = createNumberFromToProps({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Price ($)',
+  toLabel: 'Max Price ($)',
+  fromPlaceholder: '0',
+  toPlaceholder: '10000',
+  range: { min: 0, max: 10000 },
+});
+
+const showcaseSizeProps = createNumberFromToProps({
+  fromControl: new FormControl(null),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Size (m²)',
+  toLabel: 'Max Size (m²)',
+  fromPlaceholder: '20',
+  toPlaceholder: '500',
+  range: { min: 20, max: 500 },
+});
+
+const showcaseRoomsProps = createNumberFromToProps({
+  fromControl: new FormControl(1),
+  toControl: new FormControl(null),
+  fromLabel: 'Min Rooms',
+  toLabel: 'Max Rooms',
+  fromPlaceholder: '1',
+  toPlaceholder: '10',
+  range: { min: 1, max: 10 },
+});
+
+const meta: Meta<NumberFromToComponent> = {
+  title: 'Molecules/NumberFromTo',
+  component: NumberFromToComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the number from-to input',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NumberFromToComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const PriceRange: Story = {
+  render: () => ({
+    props: { props: priceRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const AgeRange: Story = {
+  render: () => ({
+    props: { props: ageRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const QuantityRange: Story = {
+  render: () => ({
+    props: { props: quantityRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const YearRange: Story = {
+  render: () => ({
+    props: { props: yearRangeProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    props: { props: disabledProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-number-from-to [props]="props"></val-number-from-to>
+      </div>
+    `,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      priceProps: showcasePriceProps,
+      sizeProps: showcaseSizeProps,
+      roomsProps: showcaseRoomsProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <h3>Property Search Filters</h3>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Price Range</h4>
+          <val-number-from-to [props]="priceProps"></val-number-from-to>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Property Size</h4>
+          <val-number-from-to [props]="sizeProps"></val-number-from-to>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Number of Rooms</h4>
+          <val-number-from-to [props]="roomsProps"></val-number-from-to>
+        </div>
+      </div>
+    `,
+  }),
+};