valtech-components 2.0.691 → 2.0.692

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

@@ -1,55 +0,0 @@
-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

@@ -1,193 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,253 +0,0 @@
-.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

@@ -1,104 +0,0 @@
-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;
-}