valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/popover-selector/types.ts

@@ -0,0 +1,71 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Option for the popover selector.
+ */
+export interface PopoverOption {
+  /** Option value */
+  value: string;
+  /** Option display label */
+  label: string;
+  /** Option icon (optional) */
+  icon?: string;
+  /** Whether the option is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * Props for val-popover-selector component.
+ * A generic reusable popover selector component.
+ *
+ * @property options - Array of selectable options.
+ * @property selectedValue - Currently selected value.
+ * @property label - Display label for the selector.
+ * @property icon - Icon to display in the trigger button (optional).
+ * @property placeholder - Placeholder text when no option is selected.
+ * @property color - Button color (Ionic color string).
+ * @property size - Button size ('small' | 'default' | 'large').
+ * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default').
+ * @property shape - Button shape ('round' | undefined).
+ * @property expand - Button expansion ('full' | 'block' | undefined).
+ * @property disabled - Whether the selector is disabled.
+ * @property interface - Popover interface style ('popover' | 'action-sheet' | 'alert').
+ * @property showCheckmark - Whether to show checkmarks for selected options.
+ * @property multiple - Whether multiple selection is allowed.
+ * @property cancelText - Text for cancel button.
+ * @property okText - Text for OK button.
+ */
+export interface PopoverSelectorMetadata {
+  /** Array of selectable options */
+  options: PopoverOption[];
+  /** Currently selected value(s) */
+  selectedValue?: string | string[];
+  /** Display label for the selector */
+  label?: string;
+  /** Icon to display in the trigger */
+  icon?: string;
+  /** Placeholder text when no option is selected */
+  placeholder?: string;
+  /** Button color */
+  color?: Color;
+  /** Button size */
+  size?: 'small' | 'default' | 'large';
+  /** Button fill style */
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  /** Button shape */
+  shape?: 'round';
+  /** Button expansion */
+  expand?: 'full' | 'block';
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Popover interface style */
+  interface?: 'popover' | 'action-sheet' | 'alert';
+  /** Whether to show checkmarks for selected options */
+  showCheckmark?: boolean;
+  /** Whether multiple selection is allowed */
+  multiple?: boolean;
+  /** Cancel button text */
+  cancelText?: string;
+  /** OK button text */
+  okText?: string;
+}

package/src/lib/components/molecules/progress-status/progress-status.component.scss

@@ -0,0 +1,41 @@
+@import '../../styles/mixins.scss';
+
+.status-container {
+  min-height: pxToRem(100);
+  margin: pxToRem(16) pxToRem(8);
+}
+
+.progress-bar-container {
+  max-width: 60%;
+  margin: 0 auto;
+}
+
+.title-container {
+  margin-bottom: pxToRem(8);
+}
+
+.subtitle-container {
+  width: 100%;
+  display: flex;
+}
+
+.subtitle {
+  padding: pxToRem(16);
+  margin: 0 auto;
+  height: pxToRem(16);
+}
+
+.blink {
+  animation: blink 1s infinite alternate ease-in;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    margin-top: 6px;
+  }
+  100% {
+    opacity: 1;
+    margin-top: 0;
+  }
+}

package/src/lib/components/molecules/progress-status/progress-status.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ProgressBarComponent } from '../../atoms/progress-bar/progress-bar.component';
+import { TextComponent } from '../../atoms/text/text.component';
+import { TitleBlockComponent } from '../title-block/title-block.component';
+import { ProgressStatusMetadata } from './types';
+
+//TODO: support automatic or manual interval for messages. Include the interval number as a parameter.
+@Component({
+  selector: 'val-progress-status',
+  standalone: true,
+  imports: [TitleBlockComponent, ProgressBarComponent, TextComponent],
+  template: `
+    <div class="status-container">
+      <div class="title-container">
+        <val-title-block
+          [props]="{
+            position: 'center',
+            aboveTitle: props.titles.aboveTitle,
+            title: props.titles.title,
+            bellowTitle: props.titles.bellowTitle,
+          }"
+        ></val-title-block>
+      </div>
+      <div class="progress-bar-container">
+        <val-progress-bar
+          [props]="{
+            progress: props.progress,
+            size: 'xlarge',
+            color: props.color,
+            rounded: true,
+            type: 'determinate',
+            buffer: 1,
+          }"
+        ></val-progress-bar>
+      </div>
+      <div class="subtitle-container">
+        <div class="subtitle" [class.blink]="blinking">
+          <val-text [props]="{ content: Content, color: 'medium', bold: false, size: props.size }"></val-text>
+        </div>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./progress-status.component.scss'],
+})
+/**
+ * val-progress-status
+ *
+ * Displays a progress bar with status messages and titles, useful for multi-step or loading processes.
+ *
+ * @example
+ * <val-progress-status [props]="{ progress: 0.5, color: 'primary', size: 'medium', titles: {...}, messages: [...] }"></val-progress-status>
+ *
+ * @input props: ProgressStatusMetadata - Configuration for the progress status (progress, color, size, titles, messages)
+ */
+export class ProgressStatusComponent implements OnInit {
+  /**
+   * Progress status configuration object.
+   * @type {ProgressStatusMetadata}
+   * @property progress - The progress value (0 to 1).
+   * @property color - The color of the progress bar.
+   * @property size - The size of the text and bar.
+   * @property titles - Title block configuration.
+   * @property messages - Array of status messages.
+   */
+  @Input()
+  props: ProgressStatusMetadata;
+
+  currentIndex = 0;
+  blinking = false;
+
+  constructor() {}
+
+  ngOnInit() {
+    setInterval(() => {
+      this.blinking = !this.blinking;
+    }, 1000);
+
+    setInterval(() => {
+      this.getNextMessage();
+    }, 9000);
+  }
+
+  get Content(): string {
+    return this.props.messages[this.currentIndex];
+  }
+
+  getNextMessage(): void {
+    this.currentIndex = (this.currentIndex + 1) % this.props.messages.length;
+  }
+}

package/src/lib/components/molecules/progress-status/progress-status.stories.ts

@@ -0,0 +1,415 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ProgressStatusComponent } from './progress-status.component';
+import { ProgressStatusMetadata } from './types';
+
+const meta: Meta<ProgressStatusComponent> = {
+  title: 'Molecules/Progress Status',
+  component: ProgressStatusComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ProgressStatusComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Progress status configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-progress-status
+
+A progress indicator component with title block and rotating status messages. Ideal for multi-step processes, file uploads, or any long-running operation.
+
+### Usage
+
+\`\`\`html
+<val-progress-status
+  [props]="{
+    progress: 0.65,
+    color: 'primary',
+    size: 'medium',
+    titles: {
+      position: 'center',
+      title: { content: 'Processing', size: 'xlarge', color: 'dark', bold: true },
+      bellowTitle: { content: 'Please wait...', size: 'medium', color: 'medium', bold: false }
+    },
+    messages: ['Validating data...', 'Processing files...', 'Almost done...']
+  }">
+</val-progress-status>
+\`\`\`
+
+### Features
+
+- Animated progress bar with determinate value
+- Title block with up to three title levels
+- Auto-rotating status messages (every 9 seconds)
+- Blinking text animation for status messages
+- Full color customization
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ProgressStatusComponent>;
+
+const createProps = (overrides: Partial<ProgressStatusMetadata> = {}): ProgressStatusMetadata => ({
+  progress: 0.5,
+  color: 'primary',
+  size: 'medium',
+  titles: {
+    position: 'center',
+    title: { content: 'Processing', size: 'xlarge', color: 'dark', bold: true },
+    bellowTitle: { content: 'Please wait while we complete your request', size: 'medium', color: 'medium', bold: false },
+  },
+  messages: ['Initializing...', 'Processing data...', 'Almost done...'],
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    props: createProps(),
+  },
+};
+
+export const EarlyProgress: Story = {
+  args: {
+    props: createProps({
+      progress: 0.15,
+      titles: {
+        position: 'center',
+        aboveTitle: { content: 'Step 1 of 4', size: 'small', color: 'medium', bold: false },
+        title: { content: 'Getting Started', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: 'Preparing your workspace', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: ['Loading resources...', 'Setting up environment...', 'Checking dependencies...'],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress status at the beginning of a process (15%).',
+      },
+    },
+  },
+};
+
+export const MidwayProgress: Story = {
+  args: {
+    props: createProps({
+      progress: 0.5,
+      titles: {
+        position: 'center',
+        aboveTitle: { content: 'Step 2 of 4', size: 'small', color: 'medium', bold: false },
+        title: { content: 'Processing Data', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: 'Analyzing your information', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: ['Validating entries...', 'Running analysis...', 'Organizing results...'],
+    }),
+  },
+};
+
+export const NearComplete: Story = {
+  args: {
+    props: createProps({
+      progress: 0.85,
+      color: 'success',
+      titles: {
+        position: 'center',
+        aboveTitle: { content: 'Step 4 of 4', size: 'small', color: 'success', bold: false },
+        title: { content: 'Finalizing', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: 'Almost there!', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: ['Saving results...', 'Cleaning up...', 'Preparing summary...'],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress status near completion (85%) with success color.',
+      },
+    },
+  },
+};
+
+export const FileUpload: Story = {
+  args: {
+    props: createProps({
+      progress: 0.67,
+      color: 'tertiary',
+      titles: {
+        position: 'center',
+        title: { content: 'Uploading Files', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: '3 of 5 files completed', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: [
+        'Uploading document.pdf...',
+        'Compressing images...',
+        'Verifying file integrity...',
+        'Updating metadata...',
+      ],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example use case: File upload progress.',
+      },
+    },
+  },
+};
+
+export const DataSync: Story = {
+  args: {
+    props: createProps({
+      progress: 0.45,
+      color: 'secondary',
+      titles: {
+        position: 'center',
+        title: { content: 'Syncing Data', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: 'Synchronizing with cloud storage', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: [
+        'Connecting to server...',
+        'Downloading updates...',
+        'Merging changes...',
+        'Resolving conflicts...',
+      ],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example use case: Data synchronization.',
+      },
+    },
+  },
+};
+
+export const AccountSetup: Story = {
+  args: {
+    props: createProps({
+      progress: 0.33,
+      color: 'primary',
+      titles: {
+        position: 'center',
+        aboveTitle: { content: 'Account Setup', size: 'small', color: 'primary', bold: false },
+        title: { content: 'Creating Your Account', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: 'This may take a few moments', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: [
+        'Verifying email address...',
+        'Setting up preferences...',
+        'Configuring security...',
+        'Preparing dashboard...',
+      ],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example use case: Account creation process.',
+      },
+    },
+  },
+};
+
+export const ImportProcess: Story = {
+  args: {
+    props: createProps({
+      progress: 0.72,
+      color: 'warning',
+      titles: {
+        position: 'center',
+        title: { content: 'Importing Records', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: '720 of 1000 records processed', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: [
+        'Reading CSV file...',
+        'Validating data format...',
+        'Inserting records...',
+        'Updating indexes...',
+      ],
+    }),
+  },
+};
+
+export const SmallText: Story = {
+  args: {
+    props: createProps({
+      size: 'small',
+      titles: {
+        position: 'center',
+        title: { content: 'Processing', size: 'large', color: 'dark', bold: true },
+      },
+      messages: ['Working...', 'Please wait...'],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress status with small text size.',
+      },
+    },
+  },
+};
+
+export const LargeText: Story = {
+  args: {
+    props: createProps({
+      size: 'large',
+      titles: {
+        position: 'center',
+        title: { content: 'Processing', size: 'xlarge', color: 'dark', bold: true },
+        bellowTitle: { content: 'Large text for better visibility', size: 'large', color: 'medium', bold: false },
+      },
+      messages: ['Working on your request...', 'This may take a moment...'],
+    }),
+  },
+};
+
+export const SingleMessage: Story = {
+  args: {
+    props: createProps({
+      progress: 0.5,
+      messages: ['Processing your request...'],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress status with a single static message.',
+      },
+    },
+  },
+};
+
+export const ManyMessages: Story = {
+  args: {
+    props: createProps({
+      progress: 0.5,
+      messages: [
+        'Step 1: Initializing...',
+        'Step 2: Loading resources...',
+        'Step 3: Validating input...',
+        'Step 4: Processing data...',
+        'Step 5: Generating output...',
+        'Step 6: Finalizing...',
+      ],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress status with many rotating messages.',
+      },
+    },
+  },
+};
+
+export const DangerColor: Story = {
+  args: {
+    props: createProps({
+      progress: 0.25,
+      color: 'danger',
+      titles: {
+        position: 'center',
+        title: { content: 'Critical Operation', size: 'xlarge', color: 'danger', bold: true },
+        bellowTitle: { content: 'Do not close this window', size: 'medium', color: 'medium', bold: false },
+      },
+      messages: ['Performing critical update...', 'Modifying system files...', 'Verifying changes...'],
+    }),
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 48px; padding: 16px;">
+        <h3 style="margin: 0; color: #666;">Progress Stages</h3>
+
+        <val-progress-status [props]="earlyProps"></val-progress-status>
+        <val-progress-status [props]="midProps"></val-progress-status>
+        <val-progress-status [props]="lateProps"></val-progress-status>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Color Variants</h3>
+
+        <val-progress-status [props]="primaryProps"></val-progress-status>
+        <val-progress-status [props]="successProps"></val-progress-status>
+        <val-progress-status [props]="warningProps"></val-progress-status>
+      </div>
+    `,
+    props: {
+      earlyProps: createProps({
+        progress: 0.2,
+        titles: {
+          position: 'center',
+          aboveTitle: { content: 'Early Stage', size: 'small', color: 'medium', bold: false },
+          title: { content: '20% Complete', size: 'large', color: 'dark', bold: true },
+        },
+        messages: ['Starting...'],
+      }),
+      midProps: createProps({
+        progress: 0.5,
+        titles: {
+          position: 'center',
+          aboveTitle: { content: 'Mid Stage', size: 'small', color: 'medium', bold: false },
+          title: { content: '50% Complete', size: 'large', color: 'dark', bold: true },
+        },
+        messages: ['Processing...'],
+      }),
+      lateProps: createProps({
+        progress: 0.9,
+        color: 'success',
+        titles: {
+          position: 'center',
+          aboveTitle: { content: 'Late Stage', size: 'small', color: 'success', bold: false },
+          title: { content: '90% Complete', size: 'large', color: 'dark', bold: true },
+        },
+        messages: ['Almost done...'],
+      }),
+      primaryProps: createProps({
+        progress: 0.6,
+        color: 'primary',
+        titles: {
+          position: 'center',
+          title: { content: 'Primary', size: 'large', color: 'dark', bold: true },
+        },
+        messages: ['Primary color...'],
+      }),
+      successProps: createProps({
+        progress: 0.6,
+        color: 'success',
+        titles: {
+          position: 'center',
+          title: { content: 'Success', size: 'large', color: 'dark', bold: true },
+        },
+        messages: ['Success color...'],
+      }),
+      warningProps: createProps({
+        progress: 0.6,
+        color: 'warning',
+        titles: {
+          position: 'center',
+          title: { content: 'Warning', size: 'large', color: 'dark', bold: true },
+        },
+        messages: ['Warning color...'],
+      }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of progress status at different stages and colors.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/progress-status/types.ts

@@ -0,0 +1,21 @@
+import { Color } from '@ionic/core';
+import { TitleBlockMetada } from '../title-block/types';
+
+/**
+ * Props for val-progress-status component.
+ *
+ * @property progress - The progress value (0 to 1).
+ * @property titles - Title block configuration.
+ * @property color - The color of the progress bar.
+ * @property size - The size of the text and bar (optional).
+ * @property type - The type of progress bar (optional).
+ * @property messages - Array of status messages.
+ */
+export type ProgressStatusMetadata = {
+  progress: number;
+  titles: TitleBlockMetada;
+  color: Color;
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  type?: 'determinate' | 'indeterminate';
+  messages: string[];
+};

package/src/lib/components/molecules/prompter/prompter.component.scss

@@ -0,0 +1,45 @@
+@import '../../styles/mixins.scss';
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+
+  @include media-medium {
+    flex-direction: row;
+  }
+}
+
+.teleprompter-container {
+  overflow: hidden;
+  width: 100%;
+}
+
+.teleprompter-content {
+  white-space: nowrap;
+  animation: scroll-left 15s linear infinite;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(
+      100%
+    ); /* Inicia la animación con el contenido desplazado completamente a la derecha */
+  }
+  100% {
+    transform: translateX(
+      -100%
+    ); /* Termina la animación con el contenido desplazado completamente a la izquierda */
+  }
+}
+
+.link {
+  margin: 0 pxToRem(8);
+  width: max-content;
+}
+
+.actions-container {
+  display: flex;
+  align-items: center;
+}