valtech-components 2.0.688 → 2.0.689

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

@@ -0,0 +1,293 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { I18nService } from '../../../services/i18n';
+import {
+  CountdownMetadata,
+  CountdownTime,
+  CountdownCompleteEvent,
+  CountdownTickEvent,
+  DEFAULT_COUNTDOWN_LABELS,
+} from './types';
+
+@Component({
+  selector: 'val-countdown',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      class="countdown-container"
+      [class]="props.cssClass"
+      [class.expired]="isExpired"
+      [class.format-full]="props.format === 'full' || !props.format"
+      [class.format-compact]="props.format === 'compact'"
+      [class.format-minimal]="props.format === 'minimal'"
+      [class.format-digital]="props.format === 'digital'"
+      [class.size-small]="props.size === 'small'"
+      [class.size-medium]="props.size === 'medium' || !props.size"
+      [class.size-large]="props.size === 'large'"
+      [style.--countdown-color]="getColor()"
+    >
+      @if (isExpired && props.showExpiredMessage !== false) {
+        <div class="expired-message">
+          {{ getExpiredMessage() }}
+        </div>
+      } @else if (!isExpired) {
+        <div class="countdown-units">
+          @if (shouldShowDays()) {
+            <div class="countdown-unit">
+              <span class="countdown-value">{{ formatNumber(time.days) }}</span>
+              @if (props.showLabels !== false) {
+                <span class="countdown-label">{{ getLabel('days', time.days) }}</span>
+              }
+            </div>
+            @if (props.showSeparators !== false && shouldShowHours()) {
+              <span class="countdown-separator">{{ props.separator || ':' }}</span>
+            }
+          }
+
+          @if (shouldShowHours()) {
+            <div class="countdown-unit">
+              <span class="countdown-value">{{ formatNumber(time.hours) }}</span>
+              @if (props.showLabels !== false) {
+                <span class="countdown-label">{{ getLabel('hours', time.hours) }}</span>
+              }
+            </div>
+            @if (props.showSeparators !== false && shouldShowMinutes()) {
+              <span class="countdown-separator">{{ props.separator || ':' }}</span>
+            }
+          }
+
+          @if (shouldShowMinutes()) {
+            <div class="countdown-unit">
+              <span class="countdown-value">{{ formatNumber(time.minutes) }}</span>
+              @if (props.showLabels !== false) {
+                <span class="countdown-label">{{ getLabel('minutes', time.minutes) }}</span>
+              }
+            </div>
+            @if (props.showSeparators !== false && shouldShowSeconds()) {
+              <span class="countdown-separator">{{ props.separator || ':' }}</span>
+            }
+          }
+
+          @if (shouldShowSeconds()) {
+            <div class="countdown-unit">
+              <span class="countdown-value">{{ formatNumber(time.seconds) }}</span>
+              @if (props.showLabels !== false) {
+                <span class="countdown-label">{{ getLabel('seconds', time.seconds) }}</span>
+              }
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styleUrls: ['./countdown.component.scss'],
+})
+/**
+ * val-countdown
+ *
+ * A countdown timer component that counts down to a target date.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-countdown
+ *   [props]="{
+ *     targetDate: '2024-12-31T23:59:59',
+ *     format: 'full'
+ *   }"
+ *   (complete)="onCountdownComplete()"
+ * ></val-countdown>
+ * ```
+ *
+ * @example Compact format
+ * ```html
+ * <val-countdown
+ *   [props]="{
+ *     targetDate: raffleEndDate,
+ *     format: 'compact',
+ *     showDays: true,
+ *     showSeconds: false,
+ *     color: 'danger',
+ *     expiredMessage: '¡Sorteo finalizado!'
+ *   }"
+ * ></val-countdown>
+ * ```
+ *
+ * @example Digital clock style
+ * ```html
+ * <val-countdown
+ *   [props]="{
+ *     targetDate: deadline,
+ *     format: 'digital',
+ *     showLabels: false,
+ *     size: 'large'
+ *   }"
+ * ></val-countdown>
+ * ```
+ */
+export class CountdownComponent implements OnInit, OnDestroy {
+  @Input() props: CountdownMetadata;
+
+  @Output() complete = new EventEmitter<CountdownCompleteEvent>();
+  @Output() tick = new EventEmitter<CountdownTickEvent>();
+
+  private i18n = inject(I18nService);
+
+  time: CountdownTime = {
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    totalSeconds: 0,
+    isExpired: false,
+  };
+
+  isExpired = false;
+
+  private intervalId: any = null;
+
+  ngOnInit(): void {
+    if (this.props.autoStart !== false) {
+      this.start();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.stop();
+  }
+
+  /**
+   * Start the countdown timer.
+   */
+  start(): void {
+    this.updateTime();
+    const interval = this.props.updateInterval || 1000;
+    this.intervalId = setInterval(() => this.updateTime(), interval);
+  }
+
+  /**
+   * Stop the countdown timer.
+   */
+  stop(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  /**
+   * Reset and restart the countdown.
+   */
+  restart(): void {
+    this.stop();
+    this.isExpired = false;
+    this.start();
+  }
+
+  private updateTime(): void {
+    const target = this.getTargetDate();
+    const now = new Date();
+    const diff = target.getTime() - now.getTime();
+
+    if (diff <= 0) {
+      this.time = {
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        totalSeconds: 0,
+        isExpired: true,
+      };
+      this.isExpired = true;
+      this.stop();
+      this.complete.emit({
+        targetDate: target,
+        completedAt: now,
+      });
+      return;
+    }
+
+    const totalSeconds = Math.floor(diff / 1000);
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    this.time = {
+      days,
+      hours,
+      minutes,
+      seconds,
+      totalSeconds,
+      isExpired: false,
+    };
+
+    this.tick.emit({ time: this.time });
+  }
+
+  private getTargetDate(): Date {
+    const target = this.props.targetDate;
+    if (target instanceof Date) {
+      return target;
+    }
+    if (typeof target === 'number') {
+      return new Date(target);
+    }
+    return new Date(target);
+  }
+
+  shouldShowDays(): boolean {
+    if (this.props.showDays === false) return false;
+    if (this.props.showDays === true) return true;
+    // Auto: show if more than 0 days or format is full
+    return this.time.days > 0 || this.props.format === 'full';
+  }
+
+  shouldShowHours(): boolean {
+    if (this.props.showHours === false) return false;
+    return true;
+  }
+
+  shouldShowMinutes(): boolean {
+    if (this.props.showMinutes === false) return false;
+    return true;
+  }
+
+  shouldShowSeconds(): boolean {
+    if (this.props.showSeconds === false) return false;
+    if (this.props.format === 'minimal') return false;
+    return true;
+  }
+
+  formatNumber(value: number): string {
+    if (this.props.padNumbers === false) {
+      return String(value);
+    }
+    return String(value).padStart(2, '0');
+  }
+
+  getLabel(unit: 'days' | 'hours' | 'minutes' | 'seconds', value: number): string {
+    const labels = this.props.labels || DEFAULT_COUNTDOWN_LABELS;
+    const isSingular = value === 1;
+
+    // Get singular or plural form
+    const singularKey = unit.slice(0, -1) as 'day' | 'hour' | 'minute' | 'second';
+
+    if (isSingular && labels[singularKey]) {
+      return labels[singularKey]!;
+    }
+
+    return labels[unit] || unit;
+  }
+
+  getExpiredMessage(): string {
+    return this.props.expiredMessage || this.i18n.t('timeExpired');
+  }
+
+  getColor(): string {
+    if (this.props.color) {
+      return `var(--ion-color-${this.props.color})`;
+    }
+    return 'var(--ion-color-primary)';
+  }
+}

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

@@ -0,0 +1,316 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { CountdownComponent } from './countdown.component';
+import { CountdownMetadata } from './types';
+import { IONIC_COLORS } from '../../../../stories/helpers/storybook-helpers';
+
+// Helper to get a future date
+const getFutureDate = (hours: number, minutes = 0, seconds = 0): Date => {
+  const date = new Date();
+  date.setHours(date.getHours() + hours);
+  date.setMinutes(date.getMinutes() + minutes);
+  date.setSeconds(date.getSeconds() + seconds);
+  return date;
+};
+
+const createCountdownProps = (overrides: Partial<CountdownMetadata> = {}): CountdownMetadata => ({
+  targetDate: getFutureDate(2, 30, 45),
+  format: 'full',
+  showDays: true,
+  showHours: true,
+  showMinutes: true,
+  showSeconds: true,
+  size: 'medium',
+  color: 'primary',
+  ...overrides,
+});
+
+const meta: Meta<CountdownComponent> = {
+  title: 'Atoms/Countdown',
+  component: CountdownComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, CountdownComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Countdown configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'CountdownMetadata',
+          detail: `{
+  targetDate: Date | string | number;
+  format?: 'full' | 'compact' | 'minimal' | 'digital';
+  showDays?: boolean;
+  showHours?: boolean;
+  showMinutes?: boolean;
+  showSeconds?: boolean;
+  labels?: CountdownLabels;
+  expiredMessage?: string;
+  size?: 'small' | 'medium' | 'large';
+  color?: Color;
+}`,
+        },
+      },
+    },
+    isExpired: {
+      action: 'isExpired',
+      description: 'Event emitted when countdown reaches zero',
+    },
+    tick: {
+      action: 'tick',
+      description: 'Event emitted every second with remaining time',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-countdown
+
+A countdown timer component with multiple display formats, ideal for raffle end times, sales, or event countdowns.
+
+### Formats
+
+- **full**: Shows all units with labels (Days, Hours, Minutes, Seconds)
+- **compact**: Condensed view with abbreviated labels
+- **minimal**: Just numbers, no labels
+- **digital**: Clock-style display (00:00:00)
+
+### Usage
+
+\`\`\`html
+<val-countdown
+  [props]="{
+    targetDate: raffleEndDate,
+    format: 'full',
+    color: 'danger',
+    size: 'large'
+  }"
+  (expired)="onRaffleEnd()"
+></val-countdown>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CountdownComponent>;
+
+export const Default: Story = {
+  args: {
+    props: createCountdownProps(),
+  },
+};
+
+export const FormatFull: Story = {
+  args: {
+    props: createCountdownProps({
+      format: 'full',
+      targetDate: getFutureDate(5, 23, 45),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full format showing all units with complete labels.',
+      },
+    },
+  },
+};
+
+export const FormatCompact: Story = {
+  args: {
+    props: createCountdownProps({
+      format: 'compact',
+      targetDate: getFutureDate(1, 15, 30),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact format with abbreviated labels.',
+      },
+    },
+  },
+};
+
+export const FormatMinimal: Story = {
+  args: {
+    props: createCountdownProps({
+      format: 'minimal',
+      targetDate: getFutureDate(0, 45, 20),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Minimal format showing only numbers.',
+      },
+    },
+  },
+};
+
+export const FormatDigital: Story = {
+  args: {
+    props: createCountdownProps({
+      format: 'digital',
+      targetDate: getFutureDate(12, 30, 0),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Digital clock-style format.',
+      },
+    },
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    props: createCountdownProps({ size: 'small' }),
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    props: createCountdownProps({ size: 'large' }),
+  },
+};
+
+export const ColorDanger: Story = {
+  args: {
+    props: createCountdownProps({
+      color: 'danger',
+      targetDate: getFutureDate(0, 5, 0),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Danger color for urgency (e.g., raffle ending soon).',
+      },
+    },
+  },
+};
+
+export const ColorWarning: Story = {
+  args: {
+    props: createCountdownProps({
+      color: 'warning',
+      targetDate: getFutureDate(0, 30, 0),
+    }),
+  },
+};
+
+export const CustomLabels: Story = {
+  args: {
+    props: createCountdownProps({
+      format: 'full',
+      labels: {
+        days: 'Days',
+        hours: 'Hrs',
+        minutes: 'Min',
+        seconds: 'Sec',
+      },
+    }),
+  },
+};
+
+export const HoursMinutesOnly: Story = {
+  args: {
+    props: createCountdownProps({
+      showDays: false,
+      showSeconds: false,
+      targetDate: getFutureDate(3, 45, 0),
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Only showing hours and minutes.',
+      },
+    },
+  },
+};
+
+export const Expired: Story = {
+  args: {
+    props: createCountdownProps({
+      targetDate: new Date(Date.now() - 1000),
+      expiredMessage: '¡Sorteo finalizado!',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows custom message when countdown expires.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Countdown Formats</h3>
+
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Full Format</p>
+            <val-countdown [props]="fullFormat"></val-countdown>
+          </div>
+
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Compact Format</p>
+            <val-countdown [props]="compactFormat"></val-countdown>
+          </div>
+
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Minimal Format</p>
+            <val-countdown [props]="minimalFormat"></val-countdown>
+          </div>
+
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Digital Format</p>
+            <val-countdown [props]="digitalFormat"></val-countdown>
+          </div>
+        </div>
+
+        <h3 style="margin: 0; font-family: system-ui;">Sizes</h3>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <val-countdown [props]="sizeSmall"></val-countdown>
+          <val-countdown [props]="sizeMedium"></val-countdown>
+          <val-countdown [props]="sizeLarge"></val-countdown>
+        </div>
+
+        <h3 style="margin: 0; font-family: system-ui;">Colors (Urgency)</h3>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+          <val-countdown [props]="colorPrimary"></val-countdown>
+          <val-countdown [props]="colorWarning"></val-countdown>
+          <val-countdown [props]="colorDanger"></val-countdown>
+        </div>
+      </div>
+    `,
+    props: {
+      fullFormat: createCountdownProps({ format: 'full', targetDate: getFutureDate(2, 15, 30) }),
+      compactFormat: createCountdownProps({ format: 'compact', targetDate: getFutureDate(2, 15, 30) }),
+      minimalFormat: createCountdownProps({ format: 'minimal', targetDate: getFutureDate(2, 15, 30) }),
+      digitalFormat: createCountdownProps({ format: 'digital', targetDate: getFutureDate(2, 15, 30) }),
+      sizeSmall: createCountdownProps({ size: 'small', format: 'compact', targetDate: getFutureDate(1) }),
+      sizeMedium: createCountdownProps({ size: 'medium', format: 'compact', targetDate: getFutureDate(1) }),
+      sizeLarge: createCountdownProps({ size: 'large', format: 'compact', targetDate: getFutureDate(1) }),
+      colorPrimary: createCountdownProps({ color: 'primary', format: 'digital', targetDate: getFutureDate(24) }),
+      colorWarning: createCountdownProps({ color: 'warning', format: 'digital', targetDate: getFutureDate(1) }),
+      colorDanger: createCountdownProps({ color: 'danger', format: 'digital', targetDate: getFutureDate(0, 10) }),
+    },
+  }),
+};