valtech-components 2.0.687 → 2.0.689

package/src/lib/components/organisms/no-content/no-content.stories.ts

@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { NoContentComponent } from './no-content.component';
+import { ComponentStates } from '../../types';
+
+const meta: Meta<NoContentComponent> = {
+  title: 'Organisms/NoContent',
+  component: NoContentComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, NoContentComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'NoContent configuration object',
+      control: 'object',
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'Event emitted when a banner action is clicked',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-no-content
+
+A component for displaying "no content" screens with an image and optional banners. Perfect for empty states, error messages, or informational displays.
+
+### Use Cases
+
+- Empty states (no data, no results)
+- Error pages
+- Success confirmations
+- Onboarding screens
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<NoContentComponent>;
+
+export const EmptyState: Story = {
+  args: {
+    props: {
+      image: {
+        src: 'https://ionicframework.com/docs/img/demos/avatar.svg',
+        alt: 'Empty state',
+        size: 'medium',
+        mode: 'rounded',
+        shaded: false,
+        bordered: false,
+      },
+      bottomContent: {
+        content: {
+          position: 'center',
+          title: { content: 'No Items Found', size: 'large', color: 'dark', bold: true },
+          bellowTitle: { content: 'There are no items to display', size: 'medium', color: 'medium', bold: false },
+        },
+        mode: 'center',
+        alignment: 'center',
+        bordered: false,
+        closable: false,
+        color: 'light',
+      },
+    } as any,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    props: {
+      image: {
+        src: 'https://ionicframework.com/docs/img/demos/avatar.svg',
+        alt: 'Cart empty',
+        size: 'medium',
+        mode: 'rounded',
+        shaded: false,
+        bordered: false,
+      },
+      bottomContent: {
+        content: {
+          position: 'center',
+          title: { content: 'Your Cart is Empty', size: 'large', color: 'dark', bold: true },
+          bellowTitle: { content: 'Start shopping to add items', size: 'medium', color: 'medium', bold: false },
+        },
+        actions: {
+          position: 'center',
+          columned: false,
+          buttons: [
+            { text: 'Browse Products', color: 'primary', state: ComponentStates.ENABLED, fill: 'solid', type: 'button', token: 'browse' },
+          ],
+        },
+        mode: 'center',
+        alignment: 'center',
+        bordered: false,
+        closable: false,
+        color: 'light',
+      },
+    } as any,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    props: {
+      image: {
+        src: 'https://ionicframework.com/docs/img/demos/avatar.svg',
+        alt: 'Error',
+        size: 'medium',
+        mode: 'rounded',
+        shaded: false,
+        bordered: false,
+      },
+      bottomContent: {
+        content: {
+          position: 'center',
+          title: { content: 'Something Went Wrong', size: 'large', color: 'dark', bold: true },
+          bellowTitle: { content: 'We encountered an error', size: 'medium', color: 'medium', bold: false },
+        },
+        actions: {
+          position: 'center',
+          columned: false,
+          buttons: [
+            { text: 'Try Again', color: 'primary', state: ComponentStates.ENABLED, fill: 'solid', type: 'button', token: 'retry' },
+            { text: 'Go Back', color: 'medium', state: ComponentStates.ENABLED, fill: 'outline', type: 'button', token: 'back' },
+          ],
+        },
+        mode: 'center',
+        alignment: 'center',
+        bordered: false,
+        closable: false,
+        color: 'light',
+      },
+    } as any,
+  },
+};
+
+export const NoSearchResults: Story = {
+  args: {
+    props: {
+      image: {
+        src: 'https://ionicframework.com/docs/img/demos/avatar.svg',
+        alt: 'No results',
+        size: 'small',
+        mode: 'rounded',
+        shaded: false,
+        bordered: false,
+      },
+      bottomContent: {
+        content: {
+          position: 'center',
+          title: { content: 'No Results Found', size: 'medium', color: 'dark', bold: true },
+          bellowTitle: { content: 'Try different keywords', size: 'small', color: 'medium', bold: false },
+        },
+        actions: {
+          position: 'center',
+          columned: false,
+          buttons: [
+            { text: 'Clear Filters', color: 'primary', state: ComponentStates.ENABLED, fill: 'outline', type: 'button', token: 'clear' },
+          ],
+        },
+        mode: 'center',
+        alignment: 'center',
+        bordered: false,
+        closable: false,
+        color: 'light',
+      },
+    } as any,
+  },
+};
+
+export const SuccessState: Story = {
+  args: {
+    props: {
+      image: {
+        src: 'https://ionicframework.com/docs/img/demos/avatar.svg',
+        alt: 'Success',
+        size: 'medium',
+        mode: 'rounded',
+        shaded: false,
+        bordered: false,
+      },
+      bottomContent: {
+        content: {
+          position: 'center',
+          title: { content: 'Order Complete!', size: 'large', color: 'dark', bold: true },
+          bellowTitle: { content: 'Your order has been placed', size: 'medium', color: 'medium', bold: false },
+        },
+        actions: {
+          position: 'center',
+          columned: false,
+          buttons: [
+            { text: 'View Order', color: 'success', state: ComponentStates.ENABLED, fill: 'solid', type: 'button', token: 'view' },
+          ],
+        },
+        mode: 'center',
+        alignment: 'center',
+        bordered: false,
+        closable: false,
+        color: 'light',
+      },
+    } as any,
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 48px; max-width: 500px;">
+        <h3 style="margin: 0; font-family: system-ui;">Empty State</h3>
+        <val-no-content [props]="{
+          image: { src: 'https://ionicframework.com/docs/img/demos/avatar.svg', alt: '', size: 'small', mode: 'rounded', shaded: false, bordered: false },
+          bottomContent: {
+            content: {
+              position: 'center',
+              title: { content: 'No Data', size: 'medium', color: 'dark', bold: true },
+              bellowTitle: { content: 'No items to display', size: 'small', color: 'medium', bold: false }
+            },
+            mode: 'center',
+            alignment: 'center',
+            bordered: false,
+            closable: false,
+            color: 'light'
+          }
+        }"></val-no-content>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Action</h3>
+        <val-no-content [props]="{
+          image: { src: 'https://ionicframework.com/docs/img/demos/avatar.svg', alt: '', size: 'small', mode: 'rounded', shaded: false, bordered: false },
+          bottomContent: {
+            content: {
+              position: 'center',
+              title: { content: 'Cart Empty', size: 'medium', color: 'dark', bold: true }
+            },
+            actions: {
+              position: 'center',
+              columned: false,
+              buttons: [
+                { text: 'Shop Now', color: 'primary', state: 'ENABLED', fill: 'solid', type: 'button', token: 'shop' }
+              ]
+            },
+            mode: 'center',
+            alignment: 'center',
+            bordered: false,
+            closable: false,
+            color: 'light'
+          }
+        }"></val-no-content>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/organisms/no-content/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Tipos y metadatos para el componente NoContentComponent.
+ * Permiten definir la imagen y los banners opcionales a mostrar en la pantalla de "sin contenido".
+ */
+import { ImageMetadata } from '../../atoms/image/types';
+import { BannerMetadata } from '../../organisms/banner/types';
+
+/**
+ * Metadatos para la pantalla de "sin contenido".
+ * @property image Imagen principal a mostrar.
+ * @property topContent (opcional) Banner superior.
+ * @property bottomContent Banner inferior.
+ */
+export type NoContentMetadata = {
+  image: ImageMetadata;
+  topContent?: BannerMetadata;
+  bottomContent: BannerMetadata;
+};

package/src/lib/components/organisms/rotating-text/rotating-text.component.ts

@@ -0,0 +1,239 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnDestroy, OnInit, signal, computed } from '@angular/core';
+import { RotatingTextMetadata, RotatingTextMessage } from './types';
+
+/**
+ * val-rotating-text
+ *
+ * A component that rotates through an array of text messages with smooth animations.
+ * Features entrance/exit animations with fade, blur, and scale effects.
+ *
+ * @example
+ * <val-rotating-text
+ *   [props]="{
+ *     messages: [
+ *       { aboveTitle: 'Welcome', title: 'Hello World' },
+ *       { aboveTitle: 'Tip:', title: 'Stay curious' }
+ *     ],
+ *     interval: 4000,
+ *     showDots: true
+ *   }"
+ * ></val-rotating-text>
+ *
+ * @input props - Configuration for the rotating text component
+ */
+@Component({
+  selector: 'val-rotating-text',
+  standalone: true,
+  imports: [CommonModule],
+  styles: [
+    `
+      .rotating-banner {
+        text-align: center;
+        padding: 2rem 1rem;
+        min-height: 120px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .rotating-text {
+        position: relative;
+        overflow: hidden;
+      }
+
+      .rotating-text .above-title {
+        font-size: 1.125rem;
+        margin-bottom: 0.75rem;
+        font-family: monospace;
+      }
+
+      .rotating-text .title {
+        font-size: 2rem;
+        font-weight: 900;
+      }
+
+      .text-enter {
+        animation: textEnter 0.6s ease-out forwards;
+      }
+
+      .text-exit {
+        animation: textExit 0.4s ease-in forwards;
+      }
+
+      @keyframes textEnter {
+        0% {
+          opacity: 0;
+          transform: translateY(20px) scale(0.95);
+          filter: blur(4px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+          filter: blur(0);
+        }
+      }
+
+      @keyframes textExit {
+        0% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+          filter: blur(0);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-20px) scale(0.95);
+          filter: blur(4px);
+        }
+      }
+
+      .progress-dots {
+        display: flex;
+        gap: 8px;
+        margin-top: 1.5rem;
+      }
+
+      .progress-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--ion-color-medium-tint);
+        transition: all 0.3s ease;
+        cursor: pointer;
+      }
+
+      .progress-dot.active {
+        background: var(--ion-color-dark);
+        transform: scale(1.3);
+      }
+    `,
+  ],
+  template: `
+    <div
+      class="rotating-banner"
+      [ngStyle]="{ background: props.backgroundColor || 'transparent' }"
+    >
+      <div
+        class="rotating-text"
+        [class.text-enter]="isEntering()"
+        [class.text-exit]="isExiting()"
+      >
+        <div
+          class="above-title"
+          [ngStyle]="{ color: aboveTitleColorValue }"
+        >
+          {{ currentMessage()?.aboveTitle }}
+        </div>
+        <div
+          class="title"
+          [ngStyle]="{ color: titleColorValue }"
+        >
+          {{ currentMessage()?.title }}
+        </div>
+      </div>
+      <div class="progress-dots" *ngIf="props.showDots !== false">
+        <div
+          *ngFor="let message of props.messages; let i = index"
+          class="progress-dot"
+          [class.active]="i === currentIndex()"
+          (click)="goToMessage(i)"
+        ></div>
+      </div>
+    </div>
+  `,
+})
+export class RotatingTextComponent implements OnInit, OnDestroy {
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+
+  /**
+   * Component configuration.
+   */
+  @Input() props: RotatingTextMetadata = {
+    messages: [],
+    interval: 4000,
+    showDots: true,
+    aboveTitleColor: 'medium',
+    titleColor: 'dark',
+  };
+
+  // Animation state
+  currentIndex = signal(0);
+  isEntering = signal(true);
+  isExiting = signal(false);
+
+  // Current message computed from index
+  currentMessage = computed(() => this.props.messages[this.currentIndex()]);
+
+  // Color values
+  get aboveTitleColorValue(): string {
+    const color = this.props.aboveTitleColor || 'medium';
+    return color.startsWith('--') || color.startsWith('#') || color.startsWith('rgb')
+      ? color
+      : `var(--ion-color-${color})`;
+  }
+
+  get titleColorValue(): string {
+    const color = this.props.titleColor || 'dark';
+    return color.startsWith('--') || color.startsWith('#') || color.startsWith('rgb')
+      ? color
+      : `var(--ion-color-${color})`;
+  }
+
+  ngOnInit(): void {
+    if (this.props.messages.length > 1) {
+      this.startRotation();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.stopRotation();
+  }
+
+  private startRotation(): void {
+    const interval = this.props.interval ?? 4000;
+    this.intervalId = setInterval(() => {
+      this.rotateToNext();
+    }, interval);
+  }
+
+  private stopRotation(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  private rotateToNext(): void {
+    // Start exit animation
+    this.isEntering.set(false);
+    this.isExiting.set(true);
+
+    // After exit animation, change text and start enter animation
+    setTimeout(() => {
+      this.currentIndex.update((i) => (i + 1) % this.props.messages.length);
+      this.isExiting.set(false);
+      this.isEntering.set(true);
+    }, 400); // Match exit animation duration
+  }
+
+  /**
+   * Navigate to a specific message by index.
+   */
+  goToMessage(index: number): void {
+    if (index === this.currentIndex()) return;
+
+    this.stopRotation();
+    this.isEntering.set(false);
+    this.isExiting.set(true);
+
+    setTimeout(() => {
+      this.currentIndex.set(index);
+      this.isExiting.set(false);
+      this.isEntering.set(true);
+      if (this.props.messages.length > 1) {
+        this.startRotation();
+      }
+    }, 400);
+  }
+}

package/src/lib/components/organisms/rotating-text/types.ts

@@ -0,0 +1,29 @@
+/**
+ * A single message to display in the rotating text component.
+ *
+ * @property aboveTitle - Small text displayed above the main title.
+ * @property title - The main title text.
+ */
+export interface RotatingTextMessage {
+  aboveTitle: string;
+  title: string;
+}
+
+/**
+ * Props for val-rotating-text component.
+ *
+ * @property messages - Array of messages to rotate through.
+ * @property interval - Time in milliseconds between rotations (default: 4000).
+ * @property showDots - Whether to show navigation dots (default: true).
+ * @property aboveTitleColor - Color for above title text (default: 'medium').
+ * @property titleColor - Color for main title text (default: 'dark').
+ * @property backgroundColor - Background color for the section.
+ */
+export interface RotatingTextMetadata {
+  messages: RotatingTextMessage[];
+  interval?: number;
+  showDots?: boolean;
+  aboveTitleColor?: string;
+  titleColor?: string;
+  backgroundColor?: string;
+}

package/src/lib/components/organisms/tabbed-content/tabbed-content.component.scss

@@ -0,0 +1,89 @@
+.tabbed-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  // Segment control styling
+  val-segment-control {
+    margin-bottom: 1rem;
+
+    ion-segment {
+      --background: var(--ion-color-light);
+      border-radius: 12px;
+      padding: 4px;
+    }
+  }
+
+  // Content panel
+  &__panel {
+    width: 100%;
+    min-height: 100px;
+
+    // Animated panel
+    &--animated {
+      animation: fadeIn var(--animation-duration, 300ms) ease-out;
+    }
+
+    // Transitioning state (fade out)
+    &--transitioning {
+      opacity: 0;
+      animation: fadeOut calc(var(--animation-duration, 300ms) / 2) ease-out forwards;
+    }
+  }
+}
+
+// Fade in animation
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Fade out animation
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+// Dark theme support
+:host-context(.dark),
+:host-context([data-theme='dark']) {
+  .tabbed-content {
+    val-segment-control {
+      ion-segment {
+        --background: var(--ion-color-dark-tint);
+      }
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 576px) {
+  .tabbed-content {
+    val-segment-control {
+      ion-segment {
+        padding: 2px;
+      }
+
+      ion-segment-button {
+        min-width: auto;
+        padding: 8px 12px;
+
+        ion-label {
+          font-size: 0.75rem;
+        }
+      }
+    }
+  }
+}