valtech-components 2.0.687 → 2.0.689

package/src/lib/components/atoms/countdown/types.ts

@@ -0,0 +1,144 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Time unit for countdown display.
+ */
+export interface CountdownUnit {
+  /** Value of the unit */
+  value: number;
+  /** Label for the unit */
+  label: string;
+  /** Whether to show this unit */
+  show: boolean;
+}
+
+/**
+ * Countdown time breakdown.
+ */
+export interface CountdownTime {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  totalSeconds: number;
+  isExpired: boolean;
+}
+
+/**
+ * Labels for countdown units.
+ */
+export interface CountdownLabels {
+  days?: string;
+  hours?: string;
+  minutes?: string;
+  seconds?: string;
+  /** Singular forms (optional) */
+  day?: string;
+  hour?: string;
+  minute?: string;
+  second?: string;
+}
+
+/**
+ * Default labels in Spanish.
+ */
+export const DEFAULT_COUNTDOWN_LABELS: CountdownLabels = {
+  days: 'días',
+  hours: 'horas',
+  minutes: 'minutos',
+  seconds: 'segundos',
+  day: 'día',
+  hour: 'hora',
+  minute: 'minuto',
+  second: 'segundo',
+};
+
+/**
+ * Default labels in English.
+ */
+export const DEFAULT_COUNTDOWN_LABELS_EN: CountdownLabels = {
+  days: 'days',
+  hours: 'hours',
+  minutes: 'minutes',
+  seconds: 'seconds',
+  day: 'day',
+  hour: 'hour',
+  minute: 'minute',
+  second: 'second',
+};
+
+/**
+ * Metadata for the countdown component.
+ */
+export interface CountdownMetadata {
+  /** Target date/time to count down to */
+  targetDate: Date | string | number;
+
+  // === Display options ===
+  /** Display format */
+  format?: 'full' | 'compact' | 'minimal' | 'digital';
+  /** Show days */
+  showDays?: boolean;
+  /** Show hours */
+  showHours?: boolean;
+  /** Show minutes */
+  showMinutes?: boolean;
+  /** Show seconds */
+  showSeconds?: boolean;
+  /** Show labels below numbers */
+  showLabels?: boolean;
+  /** Show separators between units */
+  showSeparators?: boolean;
+  /** Separator character (default: ':') */
+  separator?: string;
+  /** Pad numbers with zeros */
+  padNumbers?: boolean;
+
+  // === Labels ===
+  /** Custom labels for time units */
+  labels?: CountdownLabels;
+  /** Message to show when expired */
+  expiredMessage?: string;
+  /** Show expired message or hide component */
+  showExpiredMessage?: boolean;
+
+  // === Styling ===
+  /** Component color */
+  color?: Color;
+  /** Size variant */
+  size?: 'small' | 'medium' | 'large';
+  /** Custom CSS class */
+  cssClass?: string;
+
+  // === Behavior ===
+  /** Auto-start countdown */
+  autoStart?: boolean;
+  /** Update interval in ms (default: 1000) */
+  updateInterval?: number;
+
+  // === Reactive content ===
+  /** Content key for expired message */
+  expiredMessageContentKey?: string;
+  /** Content class for reactive content */
+  contentClass?: string;
+}
+
+/**
+ * Event emitted when countdown completes.
+ */
+export interface CountdownCompleteEvent {
+  /** Target date that was reached */
+  targetDate: Date;
+  /** Timestamp when completed */
+  completedAt: Date;
+}
+
+/**
+ * Event emitted on each countdown tick.
+ */
+export interface CountdownTickEvent {
+  /** Current time breakdown */
+  time: CountdownTime;
+  /** Percentage of time elapsed (if start time known) */
+  percentageElapsed?: number;
+}

package/src/lib/components/atoms/display/display.component.scss

@@ -0,0 +1,17 @@
+@import '../../styles/typography.scss';
+
+.small {
+  @include display-small;
+}
+
+.medium {
+  @include display-medium;
+}
+
+.large {
+  @include display-large;
+}
+
+.xlarge {
+  @include display-xlarge;
+}

package/src/lib/components/atoms/display/display.component.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { DisplayMetadata } from './types';
+
+@Component({
+  selector: 'val-display',
+  standalone: true,
+  imports: [CommonModule, IonText],
+  template: `
+    <ion-text [color]="props.color">
+      <p [class]="props.size">
+        {{ getDisplayContent() }}
+      </p>
+    </ion-text>
+  `,
+  styleUrls: ['./display.component.scss'],
+})
+/**
+ * val-display
+ *
+ * Displays prominent text or titles with custom color and size.
+ *
+ * @example
+ * <val-display [props]="{ content: 'Title', color: 'dark', size: 'large' }"></val-display>
+ *
+ * @input props: DisplayMetadata - Configuration for the display (content, color, size)
+ */
+export class DisplayComponent {
+  /**
+   * Display configuration object.
+   * @type {DisplayMetadata}
+   * @property content - Static text to display.
+   * @property color - The text color (Ionic color string).
+   * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge').
+   */
+  @Input()
+  props: DisplayMetadata;
+
+  /**
+   * Returns the content to display.
+   * Uses static content, or contentConfig fallback for backwards compatibility.
+   */
+  getDisplayContent(): string {
+    if (this.props.content !== undefined) {
+      return this.props.content;
+    }
+    // Backwards compatibility: use fallback from contentConfig if present
+    if (this.props.contentConfig?.fallback) {
+      return this.props.contentConfig.fallback;
+    }
+    return '';
+  }
+}

package/src/lib/components/atoms/display/display.stories.ts

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { DisplayComponent } from './display.component';
+
+const meta: Meta<DisplayComponent> = {
+  title: 'Atoms/Display',
+  component: DisplayComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, DisplayComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Display configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-display
+
+Displays prominent text or titles with custom color and size. Supports both static content and reactive content from the language service.
+
+### Usage
+
+\`\`\`html
+<!-- Static content -->
+<val-display [props]="{
+  content: 'Welcome!',
+  color: 'primary',
+  size: 'large'
+}"></val-display>
+
+<!-- Reactive content (from language service) -->
+<val-display [props]="{
+  contentConfig: {
+    key: 'welcome.title',
+    className: 'HomeComponent',
+    fallback: 'Welcome!'
+  },
+  color: 'primary',
+  size: 'large'
+}"></val-display>
+\`\`\`
+
+### Sizes
+
+- \`small\`: Subtle display text
+- \`medium\`: Standard display
+- \`large\`: Prominent heading
+- \`xlarge\`: Hero display text
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DisplayComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      content: 'Display Text',
+      color: 'dark',
+      size: 'medium',
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    props: {
+      content: 'Small Display',
+      color: 'dark',
+      size: 'small',
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    props: {
+      content: 'Medium Display',
+      color: 'dark',
+      size: 'medium',
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    props: {
+      content: 'Large Display',
+      color: 'dark',
+      size: 'large',
+    },
+  },
+};
+
+export const XLarge: Story = {
+  args: {
+    props: {
+      content: 'Extra Large Display',
+      color: 'dark',
+      size: 'xlarge',
+    },
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    props: {
+      content: 'Primary Display',
+      color: 'primary',
+      size: 'large',
+    },
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    props: {
+      content: 'Secondary Display',
+      color: 'secondary',
+      size: 'large',
+    },
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    props: {
+      content: 'Danger Display',
+      color: 'danger',
+      size: 'large',
+    },
+  },
+};
+
+export const Success: Story = {
+  args: {
+    props: {
+      content: 'Success Display',
+      color: 'success',
+      size: 'large',
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Sizes</h3>
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+          <val-display [props]="{ content: 'Small Display', color: 'dark', size: 'small' }"></val-display>
+          <val-display [props]="{ content: 'Medium Display', color: 'dark', size: 'medium' }"></val-display>
+          <val-display [props]="{ content: 'Large Display', color: 'dark', size: 'large' }"></val-display>
+          <val-display [props]="{ content: 'XLarge Display', color: 'dark', size: 'xlarge' }"></val-display>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Colors</h3>
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+          <val-display [props]="{ content: 'Primary', color: 'primary', size: 'large' }"></val-display>
+          <val-display [props]="{ content: 'Secondary', color: 'secondary', size: 'large' }"></val-display>
+          <val-display [props]="{ content: 'Success', color: 'success', size: 'large' }"></val-display>
+          <val-display [props]="{ content: 'Warning', color: 'warning', size: 'large' }"></val-display>
+          <val-display [props]="{ content: 'Danger', color: 'danger', size: 'large' }"></val-display>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Hero Section Example</h3>
+        <div style="padding: 32px; background: linear-gradient(135deg, #3880ff 0%, #5260ff 100%); border-radius: 12px; text-align: center;">
+          <val-display [props]="{ content: 'Welcome to Our App', color: 'light', size: 'xlarge' }"></val-display>
+          <val-display [props]="{ content: 'Build amazing things', color: 'light', size: 'medium' }"></val-display>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/atoms/display/types.ts

@@ -0,0 +1,35 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Props for val-display component with reactive content support.
+ * Supports both static and reactive content patterns.
+ *
+ * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge').
+ * @property color - The text color (Ionic color string).
+ * @property content - Static content text (takes precedence over contentConfig).
+ * @property contentConfig - Reactive content configuration.
+ */
+export interface DisplayMetadata {
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  color: Color;
+  /** Static content (takes precedence over contentConfig) */
+  content?: string;
+  /** Reactive content configuration */
+  contentConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+}
+
+/**
+ * Configuration for reactive content in val-display component.
+ * Use this interface when you only need to specify content-related properties.
+ */
+export interface DisplayContentConfig {
+  key: string;
+  className?: string;
+  fallback?: string;
+  interpolation?: Record<string, string | number>;
+}

package/src/lib/components/atoms/divider/divider.component.scss

@@ -0,0 +1,62 @@
+@import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+.solid {
+  border-top: pxToRem(1) solid $color-default-hr;
+}
+
+.gradient {
+  height: pxToRem(2);
+
+  &.primary {
+    background: linear-gradient(to right, var(--ion-color-primary), var(--ion-color-light));
+  }
+
+  &.secondary {
+    background: linear-gradient(to right, var(--ion-color-secondary), var(--ion-color-light));
+  }
+
+  &.dark {
+    background: linear-gradient(to right, var(--ion-color-dark), var(--ion-color-light));
+  }
+
+  &.light {
+    background: linear-gradient(to right, var(--ion-color-light), $color-classic-white);
+  }
+
+  &.medium {
+    background: linear-gradient(to right, var(--ion-color-medium), $color-classic-white);
+  }
+}
+
+.small {
+  margin: pxToRem(16);
+}
+
+.medium {
+  margin: pxToRem(24) pxToRem(16);
+}
+
+.large {
+  margin: pxToRem(36) pxToRem(16);
+}
+
+.primary {
+  border-color: var(--ion-color-primary);
+}
+
+.secondary {
+  border-color: var(--ion-color-secondary);
+}
+
+.dark {
+  border-color: var(--ion-color-dark);
+}
+
+.light {
+  border-color: var(--ion-color-light);
+}
+
+.medium {
+  border-color: var(--ion-color-medium);
+}

package/src/lib/components/atoms/divider/divider.component.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { DividerMetadata } from './types';
+
+/**
+ * val-divider
+ *
+ * A horizontal divider for separating content sections.
+ *
+ * @example
+ * <val-divider [props]="{ size: 'medium', color: 'light', fill: 'solid' }"></val-divider>
+ *
+ * @input props: DividerMetadata - Configuration for the divider (size, color, fill)
+ */
+@Component({
+  selector: 'val-divider',
+  standalone: true,
+  imports: [CommonModule],
+  template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `,
+  styleUrls: ['./divider.component.scss'],
+})
+export class DividerComponent implements OnInit {
+  /**
+   * Divider configuration object.
+   * @type {DividerMetadata}
+   * @property size - The divider size ('small' | 'medium' | 'large').
+   * @property color - The divider color.
+   * @property fill - The divider fill style ('solid' | 'gradient').
+   */
+  @Input()
+  props: DividerMetadata;
+  constructor() {}
+
+  ngOnInit() {}
+}