valtech-components 2.0.688 → 2.0.689

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

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { BoxComponent } from '../../atoms/box/box.component';
+import { HrefComponent } from '../../atoms/href/href.component';
+import { ButtonGroupComponent } from '../button-group/button-group.component';
+import { PrompterMetadata } from './types';
+
+@Component({
+  selector: 'val-prompter',
+  standalone: true,
+  imports: [CommonModule, IonText, BoxComponent, ButtonGroupComponent, HrefComponent],
+  template: `
+    <val-box
+      class="teleprompter-container"
+      [props]="{ icon: '', bordered: props.bordered, color: props.color, leftBorder: false, padding: props.padding }"
+      (onClick)="clickHandler()"
+    >
+      <div class="container" [class.teleprompter-content]="props.teleprompter" body>
+        <div>
+          <ion-text>
+            <p [class]="props.size" class="bold">{{ props.content }}</p>
+          </ion-text>
+        </div>
+        @if (props.buttons || props.hrefs) {
+          <div class="actions-container">
+            <val-button-group
+              class="buttons-container"
+              [props]="{ buttons: props.buttons, position: 'right', columned: false }"
+              (onClick)="clickHandler($event)"
+            ></val-button-group>
+            <val-href
+              class="link"
+              *ngFor="let l of props.hrefs"
+              [props]="l"
+              (onClick)="clickHandler($event)"
+            ></val-href>
+          </div>
+        }
+      </div>
+    </val-box>
+  `,
+  styleUrls: ['./prompter.component.scss'],
+})
+export class PrompterComponent {
+  @Input()
+  props: PrompterMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  clickHandler(token?: string) {
+    this.onClick.emit(token);
+  }
+}

package/src/lib/components/molecules/prompter/prompter.stories.ts

@@ -0,0 +1,193 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { PrompterComponent } from './prompter.component';
+import { PrompterMetadata } from './types';
+
+const createPrompterProps = (overrides: Partial<PrompterMetadata> = {}) => ({
+  teleprompter: false,
+  bordered: true,
+  color: 'light',
+  content: 'This is an informational message for the user.',
+  size: 'medium' as const,
+  ...overrides,
+} as PrompterMetadata);
+
+const defaultProps = createPrompterProps();
+
+const withButtonsProps = createPrompterProps({
+  content: 'Your session is about to expire. Would you like to continue?',
+  color: 'warning',
+  buttons: [
+    { text: 'Continue', color: 'primary', fill: 'solid', state: 'ENABLED', type: 'button' },
+    { text: 'Logout', color: 'medium', fill: 'outline', state: 'ENABLED', type: 'button' },
+  ],
+});
+
+const withLinksProps = createPrompterProps({
+  content: 'Learn more about our services and how we can help you.',
+  color: 'primary',
+  hrefs: [
+    { text: 'Read Documentation', url: '/docs', color: 'light', token: '', download: false, hoverable: true },
+    { text: 'Contact Support', url: '/support', color: 'light', token: '', download: false, hoverable: true },
+  ] as any,
+});
+
+const withBothProps = createPrompterProps({
+  content: 'New features are available! Check out what\'s new in this release.',
+  color: 'success',
+  buttons: [
+    { text: 'Update Now', color: 'light', fill: 'solid', state: 'ENABLED', type: 'button' },
+  ],
+  hrefs: [
+    { text: 'View Changelog', url: '/changelog', color: 'light', token: '', download: false, hoverable: true },
+  ] as any,
+});
+
+const smallProps = createPrompterProps({
+  content: 'A small hint message.',
+  size: 'small',
+  bordered: false,
+  color: 'medium',
+});
+
+const largeProps = createPrompterProps({
+  content: 'An important announcement that needs more attention!',
+  size: 'large',
+  color: 'danger',
+  buttons: [
+    { text: 'Acknowledge', color: 'light', fill: 'solid', state: 'ENABLED', type: 'button' },
+  ],
+});
+
+const teleprompterProps = createPrompterProps({
+  teleprompter: true,
+  content: 'This message uses the teleprompter style for a different visual effect.',
+  color: 'tertiary',
+});
+
+const noBorderProps = createPrompterProps({
+  bordered: false,
+  content: 'A simple message without border.',
+  color: 'light',
+});
+
+const showcaseInfoProps = createPrompterProps({
+  content: 'Your profile has been updated successfully.',
+  color: 'success',
+  size: 'medium',
+  buttons: [
+    { text: 'View Profile', color: 'light', fill: 'solid', state: 'ENABLED', type: 'button' },
+  ],
+});
+
+const showcaseWarningProps = createPrompterProps({
+  content: 'Your subscription expires in 3 days. Renew now to avoid interruption.',
+  color: 'warning',
+  size: 'medium',
+  buttons: [
+    { text: 'Renew', color: 'primary', fill: 'solid', state: 'ENABLED', type: 'button' },
+  ],
+  hrefs: [
+    { text: 'Learn More', url: '/pricing', color: 'dark', token: '', download: false, hoverable: true },
+  ] as any,
+});
+
+const showcaseErrorProps = createPrompterProps({
+  content: 'Payment failed. Please update your payment method.',
+  color: 'danger',
+  size: 'medium',
+  buttons: [
+    { text: 'Update Payment', color: 'light', fill: 'solid', state: 'ENABLED', type: 'button' },
+  ],
+});
+
+const meta: Meta<PrompterComponent> = {
+  title: 'Molecules/Prompter',
+  component: PrompterComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the prompter',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<PrompterComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const WithButtons: Story = {
+  render: () => ({
+    props: { props: withButtonsProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const WithLinks: Story = {
+  render: () => ({
+    props: { props: withLinksProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const WithButtonsAndLinks: Story = {
+  render: () => ({
+    props: { props: withBothProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const SmallSize: Story = {
+  render: () => ({
+    props: { props: smallProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const LargeSize: Story = {
+  render: () => ({
+    props: { props: largeProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const TeleprompterStyle: Story = {
+  render: () => ({
+    props: { props: teleprompterProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const NoBorder: Story = {
+  render: () => ({
+    props: { props: noBorderProps },
+    template: `<val-prompter [props]="props"></val-prompter>`,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      infoProps: showcaseInfoProps,
+      warningProps: showcaseWarningProps,
+      errorProps: showcaseErrorProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 500px;">
+        <h4>Success Message</h4>
+        <val-prompter [props]="infoProps"></val-prompter>
+
+        <h4>Warning Message</h4>
+        <val-prompter [props]="warningProps"></val-prompter>
+
+        <h4>Error Message</h4>
+        <val-prompter [props]="errorProps"></val-prompter>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/prompter/types.ts

@@ -0,0 +1,26 @@
+import { Color } from '@ionic/core';
+import { HrefMetadata } from '../../atoms/href/types';
+import { ButtonMetadata } from '../../types';
+
+/**
+ * Props for val-prompter component.
+ *
+ * @property teleprompter - Whether to use teleprompter style.
+ * @property bordered - Whether the box has a border.
+ * @property color - The background color of the box (optional).
+ * @property content - The main text content.
+ * @property size - The size of the text and box ('small' | 'medium' | 'large' | 'xlarge').
+ * @property buttons - Array of button configurations (optional).
+ * @property hrefs - Array of link configurations (optional).
+ * @property padding - Custom padding for the box (optional).
+ */
+export type PrompterMetadata = {
+  teleprompter: boolean;
+  bordered: boolean;
+  color?: Color;
+  content: string;
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  buttons?: ButtonMetadata[];
+  hrefs?: HrefMetadata[];
+  padding?: string;
+};

package/src/lib/components/molecules/quote-box/quote-box.component.scss

@@ -0,0 +1,253 @@
+.quote-box {
+  position: relative;
+  margin: 2rem 0;
+  text-align: center;
+  max-width: 37.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    transform: translateY(-0.125rem);
+  }
+
+  &__quote-mark {
+    font-size: 3rem;
+    line-height: 1;
+    opacity: 0.3;
+    font-family: Georgia, serif;
+
+    &--small {
+      font-size: 2.25rem;
+    }
+
+    &--medium {
+      font-size: 3rem;
+    }
+
+    &--large {
+      font-size: 4rem;
+    }
+
+    &--xlarge {
+      font-size: 5rem;
+    }
+  }
+
+  &__content {
+    font-style: italic;
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
+    font-family: Georgia, serif;
+    color: var(--ion-color-dark, #000);
+    position: relative;
+
+    &--small {
+      font-size: 1rem;
+    }
+
+    &--medium {
+      font-size: 1.125rem;
+    }
+
+    &--large {
+      font-size: 1.375rem;
+    }
+
+    &--xlarge {
+      font-size: 1.625rem;
+    }
+
+    &--bold {
+      font-weight: 600;
+    }
+  }
+
+  &__attribution {
+    font-style: normal;
+    font-weight: 500;
+    text-align: right;
+    color: var(--ion-color-medium, #666);
+    position: relative;
+
+    &::before {
+      content: '— ';
+      opacity: 0.6;
+    }
+
+    &--small {
+      font-size: 0.875rem;
+    }
+
+    &--medium {
+      font-size: 1rem;
+    }
+
+    &--large {
+      font-size: 1.125rem;
+    }
+
+    &--xlarge {
+      font-size: 1.25rem;
+    }
+
+    &--bold {
+      font-weight: 600;
+    }
+  }
+
+  // Variantes de alineación
+  &--left {
+    text-align: left;
+    max-width: none;
+    margin-left: 0;
+    margin-right: auto;
+
+    .quote-box__attribution {
+      text-align: left;
+    }
+  }
+
+  &--right {
+    text-align: right;
+    max-width: none;
+    margin-left: auto;
+    margin-right: 0;
+
+    .quote-box__attribution {
+      text-align: right;
+    }
+  }
+
+  &--center {
+    text-align: center;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+
+    .quote-box__attribution {
+      text-align: right;
+    }
+  }
+}
+
+// Variantes de color para el contenido de la cita
+.quote-box--primary {
+  .quote-box__content {
+    color: var(--ion-color-primary, #3880ff);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-primary, #3880ff);
+  }
+}
+
+.quote-box--secondary {
+  .quote-box__content {
+    color: var(--ion-color-secondary, #3dc2ff);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-secondary, #3dc2ff);
+  }
+}
+
+.quote-box--tertiary {
+  .quote-box__content {
+    color: var(--ion-color-tertiary, #5260ff);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-tertiary, #5260ff);
+  }
+}
+
+.quote-box--success {
+  .quote-box__content {
+    color: var(--ion-color-success, #2dd36f);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-success, #2dd36f);
+  }
+}
+
+.quote-box--warning {
+  .quote-box__content {
+    color: var(--ion-color-warning, #ffc409);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-warning, #ffc409);
+  }
+}
+
+.quote-box--danger {
+  .quote-box__content {
+    color: var(--ion-color-danger, #eb445a);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-danger, #eb445a);
+  }
+}
+
+.quote-box--dark {
+  .quote-box__content {
+    color: var(--ion-color-dark, #222428);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-dark, #222428);
+  }
+}
+
+.quote-box--light {
+  .quote-box__content {
+    color: var(--ion-color-light, #f4f5f8);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-light, #f4f5f8);
+  }
+}
+
+.quote-box--medium {
+  .quote-box__content {
+    color: var(--ion-color-medium, #92949c);
+  }
+  .quote-box__quote-mark {
+    color: var(--ion-color-medium, #92949c);
+  }
+}
+
+// Variantes de color para el autor
+.quote-box__attribution {
+  &--primary {
+    color: var(--ion-color-primary, #3880ff) !important;
+  }
+
+  &--secondary {
+    color: var(--ion-color-secondary, #3dc2ff) !important;
+  }
+
+  &--tertiary {
+    color: var(--ion-color-tertiary, #5260ff) !important;
+  }
+
+  &--success {
+    color: var(--ion-color-success, #2dd36f) !important;
+  }
+
+  &--warning {
+    color: var(--ion-color-warning, #ffc409) !important;
+  }
+
+  &--danger {
+    color: var(--ion-color-danger, #eb445a) !important;
+  }
+
+  &--dark {
+    color: var(--ion-color-dark, #222428) !important;
+  }
+
+  &--color-medium {
+    color: var(--ion-color-medium, #92949c) !important;
+  }
+
+  &--light {
+    color: var(--ion-color-light, #f4f5f8) !important;
+  }
+}

package/src/lib/components/molecules/quote-box/quote-box.component.ts

@@ -0,0 +1,104 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+export interface QuoteBoxMetadata {
+  /** Contenido de la cita */
+  content: string;
+  /** Autor de la cita */
+  author?: string;
+  /** Fuente de la cita (libro, artículo, etc.) */
+  source?: string;
+  /** Tamaño del texto */
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  /** Color de la cita */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+  /** Color del autor y fuente */
+  authorColor?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+  /** Alineación del contenido */
+  alignment?: 'left' | 'center' | 'right';
+  /** Mostrar comillas decorativas */
+  showQuoteMark?: boolean;
+  /** Texto en negrita */
+  bold?: boolean;
+}
+
+@Component({
+  selector: 'quote-box',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      class="quote-box"
+      [ngClass]="{
+        'quote-box--primary': props.color === 'primary',
+        'quote-box--secondary': props.color === 'secondary',
+        'quote-box--tertiary': props.color === 'tertiary',
+        'quote-box--success': props.color === 'success',
+        'quote-box--warning': props.color === 'warning',
+        'quote-box--danger': props.color === 'danger',
+        'quote-box--dark': props.color === 'dark',
+        'quote-box--light': props.color === 'light',
+        'quote-box--medium': props.color === 'medium',
+        'quote-box--left': props.alignment === 'left',
+        'quote-box--center': props.alignment === 'center' || !props.alignment,
+        'quote-box--right': props.alignment === 'right',
+      }"
+    >
+      <!-- Comillas decorativas -->
+      <div
+        *ngIf="props.showQuoteMark !== false"
+        class="quote-box__quote-mark"
+        [ngClass]="{
+          'quote-box__quote-mark--small': props.size === 'small',
+          'quote-box__quote-mark--medium': props.size === 'medium' || !props.size,
+          'quote-box__quote-mark--large': props.size === 'large',
+          'quote-box__quote-mark--xlarge': props.size === 'xlarge',
+        }"
+      >
+        "
+      </div>
+
+      <!-- Contenido de la cita -->
+      <div
+        class="quote-box__content"
+        [ngClass]="{
+          'quote-box__content--small': props.size === 'small',
+          'quote-box__content--medium': props.size === 'medium' || !props.size,
+          'quote-box__content--large': props.size === 'large',
+          'quote-box__content--xlarge': props.size === 'xlarge',
+          'quote-box__content--bold': props.bold,
+        }"
+      >
+        {{ props.content }}
+      </div>
+
+      <!-- Autor y fuente -->
+      <div
+        *ngIf="props.author"
+        class="quote-box__attribution"
+        [ngClass]="{
+          'quote-box__attribution--small': props.size === 'small',
+          'quote-box__attribution--medium': props.size === 'medium' || !props.size,
+          'quote-box__attribution--large': props.size === 'large',
+          'quote-box__attribution--xlarge': props.size === 'xlarge',
+          'quote-box__attribution--bold': props.bold,
+          'quote-box__attribution--primary': props.authorColor === 'primary',
+          'quote-box__attribution--secondary': props.authorColor === 'secondary',
+          'quote-box__attribution--tertiary': props.authorColor === 'tertiary',
+          'quote-box__attribution--success': props.authorColor === 'success',
+          'quote-box__attribution--warning': props.authorColor === 'warning',
+          'quote-box__attribution--danger': props.authorColor === 'danger',
+          'quote-box__attribution--dark': props.authorColor === 'dark',
+          'quote-box__attribution--light': props.authorColor === 'light',
+          'quote-box__attribution--color-medium': props.authorColor === 'medium',
+        }"
+      >
+        {{ props.author }}<span *ngIf="props.source">, {{ props.source }}</span>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./quote-box.component.scss'],
+})
+export class QuoteBoxComponent {
+  @Input() props!: QuoteBoxMetadata;
+}