valtech-components 2.0.691 → 2.0.692

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

@@ -1,332 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { RatingComponent } from './rating.component';
-import { RatingMetadata } from './types';
-
-const createRatingProps = (overrides: Partial<RatingMetadata> = {}): RatingMetadata => ({
-  value: 3,
-  max: 5,
-  color: 'warning',
-  ...overrides,
-});
-
-// Pre-create all props at module level
-const defaultProps = createRatingProps();
-const halfStarsProps = createRatingProps({
-  value: 3.5,
-  allowHalf: true,
-});
-const showValueProps = createRatingProps({
-  value: 4.2,
-  allowHalf: true,
-  showValue: true,
-});
-const readonlyProps = createRatingProps({
-  value: 4,
-  readonly: true,
-});
-const heartsProps = createRatingProps({
-  value: 4,
-  icon: 'heart',
-  iconEmpty: 'heart-outline',
-  iconHalf: 'heart-half',
-  color: 'danger',
-  allowHalf: true,
-});
-const smallProps = createRatingProps({
-  value: 5,
-  size: 'small',
-});
-const largeProps = createRatingProps({
-  value: 4,
-  size: 'large',
-});
-const maxTenProps = createRatingProps({
-  value: 7,
-  max: 10,
-});
-const disabledProps = createRatingProps({
-  value: 3,
-  disabled: true,
-});
-const primaryColorProps = createRatingProps({
-  value: 4,
-  color: 'primary',
-});
-const successColorProps = createRatingProps({
-  value: 4,
-  color: 'success',
-});
-
-// Showcase props
-const showcaseProductProps = createRatingProps({
-  value: 4.5,
-  allowHalf: true,
-  showValue: true,
-  readonly: true,
-});
-const showcaseUserProps = createRatingProps({
-  value: 0,
-  allowHalf: true,
-});
-const showcaseFavoriteProps = createRatingProps({
-  value: 3,
-  icon: 'heart',
-  iconEmpty: 'heart-outline',
-  color: 'danger',
-  max: 5,
-});
-
-const meta: Meta<RatingComponent> = {
-  title: 'Molecules/Rating',
-  component: RatingComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, RatingComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Rating configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'RatingMetadata',
-          detail: `{
-  value: number;
-  max?: number;
-  icon?: string;
-  iconEmpty?: string;
-  iconHalf?: string;
-  allowHalf?: boolean;
-  readonly?: boolean;
-  disabled?: boolean;
-  color?: Color;
-  emptyColor?: Color;
-  size?: 'small' | 'medium' | 'large';
-  showValue?: boolean;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-rating
-
-A star rating component for feedback and reviews.
-
-### Features
-
-- **Half Stars**: Allow half-star ratings
-- **Custom Icons**: Use stars, hearts, or any Ionicon
-- **Sizes**: Small, medium, and large variants
-- **Readonly Mode**: Display ratings without interaction
-- **Value Display**: Show numeric value alongside stars
-
-### Usage
-
-\`\`\`html
-<!-- Interactive rating -->
-<val-rating
-  [props]="{
-    value: 3.5,
-    max: 5,
-    allowHalf: true
-  }"
-  (ratingChange)="onRatingChange($event)"
-></val-rating>
-
-<!-- Readonly with hearts -->
-<val-rating
-  [props]="{
-    value: 4,
-    icon: 'heart',
-    iconEmpty: 'heart-outline',
-    color: 'danger',
-    readonly: true
-  }"
-></val-rating>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<RatingComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: defaultProps },
-  }),
-};
-
-export const HalfStars: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: halfStarsProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Rating with half-star support enabled.',
-      },
-    },
-  },
-};
-
-export const WithValue: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: showValueProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows numeric value next to the stars.',
-      },
-    },
-  },
-};
-
-export const Readonly: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: readonlyProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Non-interactive readonly rating display.',
-      },
-    },
-  },
-};
-
-export const Hearts: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: heartsProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Custom heart icons instead of stars.',
-      },
-    },
-  },
-};
-
-export const SizeSmall: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: smallProps },
-  }),
-};
-
-export const SizeLarge: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: largeProps },
-  }),
-};
-
-export const MaxTen: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: maxTenProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Rating with 10 stars instead of 5.',
-      },
-    },
-  },
-};
-
-export const Disabled: Story = {
-  render: () => ({
-    template: `<val-rating [props]="ratingProps"></val-rating>`,
-    props: { ratingProps: disabledProps },
-  }),
-};
-
-export const Colors: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <val-rating [props]="warning"></val-rating>
-        <val-rating [props]="primary"></val-rating>
-        <val-rating [props]="success"></val-rating>
-      </div>
-    `,
-    props: {
-      warning: defaultProps,
-      primary: primaryColorProps,
-      success: successColorProps,
-    },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
-        <h3 style="margin: 0; font-family: system-ui;">Rating Components</h3>
-
-        <div style="background: #f9f9f9; padding: 20px; border-radius: 12px;">
-          <h4 style="margin: 0 0 4px; font-family: system-ui;">Product Rating</h4>
-          <div style="display: flex; align-items: center; gap: 8px;">
-            <val-rating [props]="product"></val-rating>
-            <span style="font-family: system-ui; font-size: 14px; color: #666;">(2,458 reviews)</span>
-          </div>
-        </div>
-
-        <div style="background: #f9f9f9; padding: 20px; border-radius: 12px;">
-          <h4 style="margin: 0 0 8px; font-family: system-ui;">Rate this product</h4>
-          <val-rating [props]="user"></val-rating>
-          <p style="margin: 8px 0 0; font-family: system-ui; font-size: 12px; color: #888;">Click to rate</p>
-        </div>
-
-        <div style="background: #f9f9f9; padding: 20px; border-radius: 12px;">
-          <h4 style="margin: 0 0 8px; font-family: system-ui;">Favorite Level</h4>
-          <val-rating [props]="favorite"></val-rating>
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px; color: #666;">Sizes</h4>
-          <div style="display: flex; flex-direction: column; gap: 12px;">
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <span style="font-family: system-ui; font-size: 12px; width: 60px;">Small:</span>
-              <val-rating [props]="small"></val-rating>
-            </div>
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <span style="font-family: system-ui; font-size: 12px; width: 60px;">Medium:</span>
-              <val-rating [props]="medium"></val-rating>
-            </div>
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <span style="font-family: system-ui; font-size: 12px; width: 60px;">Large:</span>
-              <val-rating [props]="large"></val-rating>
-            </div>
-          </div>
-        </div>
-      </div>
-    `,
-    props: {
-      product: showcaseProductProps,
-      user: showcaseUserProps,
-      favorite: showcaseFavoriteProps,
-      small: smallProps,
-      medium: defaultProps,
-      large: largeProps,
-    },
-  }),
-};

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

@@ -1,43 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Metadata for the rating component.
- */
-export interface RatingMetadata {
-  /** Current rating value */
-  value: number;
-  /** Maximum rating value */
-  max?: number;
-  /** Icon name for filled state */
-  icon?: string;
-  /** Icon name for empty state */
-  iconEmpty?: string;
-  /** Icon name for half state */
-  iconHalf?: string;
-  /** Allow half values */
-  allowHalf?: boolean;
-  /** Readonly mode */
-  readonly?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Rating color */
-  color?: Color;
-  /** Empty icon color */
-  emptyColor?: Color;
-  /** Size variant */
-  size?: 'small' | 'medium' | 'large';
-  /** Show numeric value */
-  showValue?: boolean;
-  /** Unique token identifier */
-  token?: string;
-}
-
-/**
- * Event emitted when rating changes.
- */
-export interface RatingChangeEvent {
-  /** New rating value */
-  value: number;
-  /** Previous rating value */
-  previousValue: number;
-}

package/src/lib/components/molecules/recap-card/recap-card.component.scss

@@ -1,35 +0,0 @@
-.recap-card {
-  border-radius: 24px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  margin: 10px;
-  position: relative;
-  overflow: hidden;
-
-  .shapes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.7;
-    pointer-events: none;
-
-    .shape {
-      position: absolute;
-      border-radius: 50%;
-    }
-  }
-
-  .recap-card__content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    min-height: 400px;
-    min-width: 280px;
-    max-width: 280px;
-    padding: 16px;
-  }
-}

package/src/lib/components/molecules/recap-card/recap-card.component.ts

@@ -1,64 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { IonCard, IonCardContent } from '@ionic/angular/standalone';
-import { LinkComponent } from '../link/link.component';
-import { TitleBlockComponent } from '../title-block/title-block.component';
-import { RecapCardMetadata, RecapCardShape } from './types';
-
-/**
- * val-recap-card
- *
- * A decorative card component with geometric shapes, title, and link.
- * Useful for recap sections, feature highlights, or promotional content.
- *
- * @example
- * <val-recap-card
- *   [props]="{
- *     title: { title: 'Feature Title', subtitle: 'Subtitle here' },
- *     link: { text: 'Learn more', url: '/features' },
- *     color: 'primary',
- *     shapes: [
- *       { color: '#ffffff33', style: { top: '-20px', right: '-20px', width: '100px', height: '100px' } }
- *     ]
- *   }"
- * ></val-recap-card>
- *
- * @input props - Card configuration (title, link, shapes, color)
- */
-@Component({
-  selector: 'val-recap-card',
-  standalone: true,
-  imports: [CommonModule, IonCard, IonCardContent, LinkComponent, TitleBlockComponent],
-  template: `
-    <ion-card class="recap-card" [color]="props.color || ''">
-      <div class="shapes">
-        <ng-container *ngFor="let shape of props.shapes">
-          <div class="shape" [ngStyle]="mergeShapeStyle(shape)"></div>
-        </ng-container>
-      </div>
-      <ion-card-content
-        class="recap-card__content"
-        [style.min-height]="props.minHeight || '400px'"
-        [style.min-width]="props.width || '280px'"
-        [style.max-width]="props.width || '280px'"
-      >
-        <val-title-block [props]="props.title" />
-        <val-link [props]="props.link" />
-      </ion-card-content>
-    </ion-card>
-  `,
-  styleUrls: ['./recap-card.component.scss'],
-})
-export class RecapCardComponent {
-  /**
-   * Card configuration.
-   */
-  @Input() props!: RecapCardMetadata;
-
-  /**
-   * Merges shape color with additional styles.
-   */
-  mergeShapeStyle(shape: RecapCardShape): { [key: string]: string | number } {
-    return { 'background-color': shape.color, ...(shape.style || {}) };
-  }
-}

package/src/lib/components/molecules/recap-card/recap-card.stories.ts

@@ -1,174 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { RecapCardComponent } from './recap-card.component';
-
-const meta: Meta<RecapCardComponent> = {
-  title: 'Molecules/RecapCard',
-  component: RecapCardComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, RecapCardComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Card configuration object',
-      control: 'object',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-recap-card
-
-A decorative card component with geometric shapes, title block, and link.
-
-### Problem it solves
-
-When building recap sections, feature highlights, or promotional areas, you need
-cards that are visually appealing with:
-- Decorative background shapes
-- Consistent title and link styling
-- Customizable colors and dimensions
-
-This component provides all of this out of the box.
-
-### Usage
-
-\`\`\`html
-<val-recap-card
-  [props]="{
-    title: { position: 'left', title: { content: 'Feature', size: 'large' } },
-    link: { text: 'Learn more', size: 'default', color: 'light', type: 'internal', link: '/features' },
-    color: 'primary',
-    shapes: [
-      { color: '#ffffff33', style: { top: '-20px', right: '-20px', width: '100px', height: '100px' } }
-    ]
-  }"
-></val-recap-card>
-\`\`\`
-
-### Features
-
-- Decorative geometric shapes with opacity
-- Integrated TitleBlock for consistent typography
-- Integrated Link for navigation
-- Ionic color support
-- Customizable dimensions
-- Cards work great in carousels
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<RecapCardComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'left',
-        title: { content: 'Getting Started', size: 'large', color: 'light', bold: true },
-        bellowTitle: { content: 'Learn the basics of our platform', size: 'small', color: 'light', bold: false },
-      },
-      link: { text: 'Start now', size: 'default', color: 'light', type: 'internal', link: '#' },
-      color: 'primary',
-      shapes: [
-        { color: 'rgba(255, 255, 255, 0.2)', style: { top: '-30px', right: '-30px', width: '120px', height: '120px' } },
-        { color: 'rgba(255, 255, 255, 0.15)', style: { bottom: '20px', left: '-40px', width: '80px', height: '80px' } },
-      ],
-    },
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'left',
-        title: { content: 'Documentation', size: 'large', color: 'light', bold: true },
-        bellowTitle: { content: 'Explore our comprehensive guides', size: 'small', color: 'light', bold: false },
-      },
-      link: { text: 'Read docs', size: 'default', color: 'light', type: 'internal', link: '#' },
-      color: 'secondary',
-      shapes: [
-        { color: 'rgba(255, 255, 255, 0.25)', style: { top: '10px', right: '10px', width: '100px', height: '100px' } },
-        { color: 'rgba(255, 255, 255, 0.1)', style: { bottom: '-20px', right: '50%', width: '150px', height: '150px' } },
-      ],
-    },
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'left',
-        title: { content: 'Components', size: 'large', color: 'light', bold: true },
-        bellowTitle: { content: 'Browse our UI library', size: 'small', color: 'light', bold: false },
-      },
-      link: { text: 'View all', size: 'default', color: 'light', type: 'internal', link: '#' },
-      color: 'tertiary',
-      shapes: [
-        { color: 'rgba(0, 0, 0, 0.1)', style: { top: '-20px', left: '-20px', width: '80px', height: '80px' } },
-        { color: 'rgba(0, 0, 0, 0.05)', style: { bottom: '40px', right: '-30px', width: '120px', height: '120px' } },
-      ],
-    },
-  },
-};
-
-export const Success: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'left',
-        title: { content: 'Completed!', size: 'large', color: 'light', bold: true },
-        bellowTitle: { content: 'Your profile is now set up', size: 'small', color: 'light', bold: false },
-      },
-      link: { text: 'Continue', size: 'default', color: 'light', type: 'internal', link: '#' },
-      color: 'success',
-      shapes: [
-        { color: 'rgba(255, 255, 255, 0.2)', style: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '200px', height: '200px' } },
-      ],
-    },
-  },
-};
-
-export const NoShapes: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'left',
-        title: { content: 'Simple Card', size: 'large', color: 'light', bold: true },
-        bellowTitle: { content: 'Without decorative shapes', size: 'small', color: 'light', bold: false },
-      },
-      link: { text: 'Learn more', size: 'default', color: 'light', type: 'internal', link: '#' },
-      color: 'primary',
-      shapes: [],
-    },
-  },
-};
-
-export const CustomSize: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'left',
-        title: { content: 'Wide Card', size: 'large', color: 'light', bold: true },
-        bellowTitle: { content: 'With custom dimensions', size: 'small', color: 'light', bold: false },
-      },
-      link: { text: 'Explore', size: 'default', color: 'light', type: 'internal', link: '#' },
-      color: 'secondary',
-      minHeight: '300px',
-      width: '350px',
-      shapes: [
-        { color: 'rgba(255, 255, 255, 0.2)', style: { top: '-50px', right: '-50px', width: '150px', height: '150px' } },
-      ],
-    },
-  },
-};

package/src/lib/components/molecules/recap-card/types.ts

@@ -1,30 +0,0 @@
-import { LinkMetadata } from '../link/types';
-import { TitleBlockMetada } from '../title-block/types';
-
-/**
- * Configuration for a decorative shape within the recap card.
- */
-export interface RecapCardShape {
-  /** Background color of the shape */
-  color: string;
-  /** Additional CSS styles (position, size, etc.) */
-  style?: { [key: string]: string | number };
-}
-
-/**
- * Configuration for the recap card component.
- */
-export interface RecapCardMetadata {
-  /** Title block configuration */
-  title: TitleBlockMetada;
-  /** Link configuration */
-  link: LinkMetadata;
-  /** Decorative shapes to display behind content */
-  shapes?: RecapCardShape[];
-  /** Background color of the card (Ionic color) */
-  color?: string;
-  /** Minimum height of the card. Default: '400px' */
-  minHeight?: string;
-  /** Width of the card. Default: '280px' */
-  width?: string;
-}