valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/range-input/range-input.component.ts

@@ -1,106 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { IonRange, IonLabel } from '@ionic/angular/standalone';
-import { CommonModule } from '@angular/common';
-import { RangeInputMetadata, RangeValue } from './types';
-import { ComponentStates } from '../../types';
-
-@Component({
-  selector: 'val-range-input',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, IonRange, IonLabel],
-  template: `
-    @if (displayLabel) {
-      <ion-label>{{ displayLabel }}</ion-label>
-    }
-    <ion-range
-      [formControl]="props.control"
-      [min]="props.min ?? 0"
-      [max]="props.max ?? 100"
-      [step]="props.step ?? 1"
-      [pin]="props.pin ?? false"
-      [pinFormatter]="props.pinFormatter || defaultPinFormatter"
-      [ticks]="props.ticks ?? false"
-      [snaps]="props.snaps ?? false"
-      [color]="props.color || 'primary'"
-      [disabled]="props.state === states.DISABLED || props.disabled"
-      [debounce]="props.debounce ?? 0"
-      [dualKnobs]="props.dualKnobs ?? false"
-      (ionChange)="onRangeChange($event)"
-    >
-      @if (props.startLabel) {
-        <ion-label slot="start">{{ props.startLabel }}</ion-label>
-      }
-      @if (props.endLabel) {
-        <ion-label slot="end">{{ props.endLabel }}</ion-label>
-      }
-    </ion-range>
-  `,
-  styleUrls: ['./range-input.component.scss'],
-})
-/**
- * val-range-input
- *
- * A range/slider input for numeric values, integrated with Angular forms.
- * Supports single value or dual knobs for range selection.
- *
- * @example Single value
- * <val-range-input [props]="{
- *   control: volumeControl,
- *   min: 0,
- *   max: 100,
- *   step: 5,
- *   pin: true,
- *   label: 'Volume'
- * }"></val-range-input>
- *
- * @example Dual knobs for price range
- * <val-range-input [props]="{
- *   control: priceControl,
- *   min: 0,
- *   max: 1000,
- *   dualKnobs: true,
- *   pin: true,
- *   pinFormatter: (v) => '$' + v,
- *   startLabel: '$0',
- *   endLabel: '$1000'
- * }"></val-range-input>
- *
- * @input props: RangeInputMetadata - Configuration for the range input
- * @output rangeChange: RangeValue - Emits when the range value changes
- */
-export class RangeInputComponent {
-  /**
-   * Input configuration object.
-   * @type {RangeInputMetadata}
-   */
-  @Input() props: RangeInputMetadata;
-
-  /**
-   * Emits the new value when the range changes.
-   */
-  @Output() rangeChange = new EventEmitter<number | RangeValue>();
-
-  states = ComponentStates;
-
-  defaultPinFormatter = (value: number): string => `${value}`;
-
-  get displayLabel(): string {
-    return this.props.label || this.props.contentFallback || '';
-  }
-
-  onRangeChange(event: CustomEvent): void {
-    const value = event.detail.value;
-    this.rangeChange.emit(value);
-
-    // Update lower/upper controls if using dual knobs
-    if (this.props.dualKnobs && typeof value === 'object') {
-      if (this.props.lowerControl) {
-        this.props.lowerControl.setValue(value.lower);
-      }
-      if (this.props.upperControl) {
-        this.props.upperControl.setValue(value.upper);
-      }
-    }
-  }
-}

package/src/lib/components/molecules/range-input/range-input.stories.ts

@@ -1,331 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { RangeInputComponent } from './range-input.component';
-import { RangeInputMetadata } from './types';
-
-const createRangeInputProps = (overrides: Partial<RangeInputMetadata> = {}): RangeInputMetadata => ({
-  control: new FormControl(50),
-  token: 'range-input',
-  label: 'Value',
-  min: 0,
-  max: 100,
-  step: 1,
-  color: 'primary',
-  ...overrides,
-});
-
-// Pre-create all props at module level
-const defaultProps = createRangeInputProps();
-const volumeProps = createRangeInputProps({
-  control: new FormControl(75),
-  label: 'Volume',
-  min: 0,
-  max: 100,
-  step: 5,
-  pin: true,
-  startLabel: '0',
-  endLabel: '100',
-});
-const brightnessProps = createRangeInputProps({
-  control: new FormControl(50),
-  label: 'Brightness',
-  min: 0,
-  max: 100,
-  pin: true,
-  color: 'warning',
-});
-const withTicksProps = createRangeInputProps({
-  control: new FormControl(3),
-  label: 'Rating',
-  min: 1,
-  max: 5,
-  step: 1,
-  ticks: true,
-  snaps: true,
-  pin: true,
-});
-const temperatureProps = createRangeInputProps({
-  control: new FormControl(22),
-  label: 'Temperature',
-  min: 16,
-  max: 30,
-  step: 0.5,
-  pin: true,
-  pinFormatter: (v: number) => `${v}°C`,
-  startLabel: '16°C',
-  endLabel: '30°C',
-});
-const priceRangeProps = createRangeInputProps({
-  control: new FormControl({ lower: 100, upper: 500 } as any),
-  label: 'Price Range',
-  min: 0,
-  max: 1000,
-  dualKnobs: true,
-  pin: true,
-  pinFormatter: (v: number) => `$${v}`,
-  startLabel: '$0',
-  endLabel: '$1000',
-});
-const disabledProps = createRangeInputProps({
-  control: new FormControl(50),
-  label: 'Disabled',
-  disabled: true,
-});
-const secondaryProps = createRangeInputProps({
-  control: new FormControl(60),
-  label: 'Secondary Color',
-  color: 'secondary',
-  pin: true,
-});
-const successProps = createRangeInputProps({
-  control: new FormControl(80),
-  label: 'Success Color',
-  color: 'success',
-  pin: true,
-});
-const dangerProps = createRangeInputProps({
-  control: new FormControl(20),
-  label: 'Danger Color',
-  color: 'danger',
-  pin: true,
-});
-
-// Showcase props
-const showcaseVolumeProps = createRangeInputProps({
-  control: new FormControl(65),
-  label: 'Volume',
-  pin: true,
-  color: 'primary',
-});
-const showcaseBrightnessProps = createRangeInputProps({
-  control: new FormControl(80),
-  label: 'Brightness',
-  pin: true,
-  color: 'warning',
-});
-const showcasePriceProps = createRangeInputProps({
-  control: new FormControl({ lower: 200, upper: 800 } as any),
-  label: 'Price Range',
-  min: 0,
-  max: 1000,
-  dualKnobs: true,
-  pin: true,
-  pinFormatter: (v: number) => `$${v}`,
-});
-
-const meta: Meta<RangeInputComponent> = {
-  title: 'Molecules/RangeInput',
-  component: RangeInputComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ReactiveFormsModule, RangeInputComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Range input configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'RangeInputMetadata',
-          detail: `{
-  control: FormControl<number>;
-  label?: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  pin?: boolean;
-  pinFormatter?: (value: number) => string;
-  ticks?: boolean;
-  snaps?: boolean;
-  color?: Color;
-  disabled?: boolean;
-  dualKnobs?: boolean;
-  startLabel?: string;
-  endLabel?: string;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-range-input
-
-A range/slider input for numeric values, integrated with Angular forms.
-
-### Features
-
-- **Single or Dual Knobs**: Select a single value or a range
-- **Pin Display**: Shows current value above the knob
-- **Custom Formatter**: Format the pin value (e.g., currency, temperature)
-- **Ticks & Snaps**: Show tick marks and snap to values
-- **Colors**: All Ionic colors supported
-- **Labels**: Start and end labels for context
-
-### Usage
-
-\`\`\`html
-<!-- Single value -->
-<val-range-input
-  [props]="{
-    control: volumeControl,
-    min: 0,
-    max: 100,
-    pin: true,
-    label: 'Volume'
-  }"
-></val-range-input>
-
-<!-- Dual knobs for range -->
-<val-range-input
-  [props]="{
-    control: priceControl,
-    min: 0,
-    max: 1000,
-    dualKnobs: true,
-    pin: true,
-    pinFormatter: (v) => '$' + v
-  }"
-></val-range-input>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<RangeInputComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: defaultProps },
-  }),
-};
-
-export const Volume: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: volumeProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Volume control with pin and start/end labels.',
-      },
-    },
-  },
-};
-
-export const Brightness: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: brightnessProps },
-  }),
-};
-
-export const WithTicks: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: withTicksProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Range with tick marks and snapping behavior.',
-      },
-    },
-  },
-};
-
-export const Temperature: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: temperatureProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Temperature control with custom pin formatter showing °C.',
-      },
-    },
-  },
-};
-
-export const PriceRange: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: priceRangeProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dual knobs for selecting a price range.',
-      },
-    },
-  },
-};
-
-export const Disabled: Story = {
-  render: () => ({
-    template: `<div style="max-width: 400px;"><val-range-input [props]="rangeProps"></val-range-input></div>`,
-    props: { rangeProps: disabledProps },
-  }),
-};
-
-export const Colors: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-        <val-range-input [props]="secondary"></val-range-input>
-        <val-range-input [props]="success"></val-range-input>
-        <val-range-input [props]="danger"></val-range-input>
-      </div>
-    `,
-    props: {
-      secondary: secondaryProps,
-      success: successProps,
-      danger: dangerProps,
-    },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 450px;">
-        <h3 style="margin: 0; font-family: system-ui;">Range Inputs</h3>
-
-        <div style="display: flex; flex-direction: column; gap: 24px;">
-          <div style="background: #f9f9f9; padding: 16px; border-radius: 12px;">
-            <val-range-input [props]="volume"></val-range-input>
-          </div>
-
-          <div style="background: #f9f9f9; padding: 16px; border-radius: 12px;">
-            <val-range-input [props]="brightness"></val-range-input>
-          </div>
-
-          <div style="background: #f9f9f9; padding: 16px; border-radius: 12px;">
-            <val-range-input [props]="price"></val-range-input>
-          </div>
-        </div>
-
-        <p style="margin: 0; font-family: system-ui; font-size: 12px; color: #888;">
-          Drag the knobs to adjust values. The pin shows the current value.
-        </p>
-      </div>
-    `,
-    props: {
-      volume: showcaseVolumeProps,
-      brightness: showcaseBrightnessProps,
-      price: showcasePriceProps,
-    },
-  }),
-};

package/src/lib/components/molecules/range-input/types.ts

@@ -1,61 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { Color } from '@ionic/core';
-import { ComponentState } from '../../types';
-
-/**
- * Metadata for the range/slider input component.
- */
-export interface RangeInputMetadata {
-  /** Associated form control for single value */
-  control: FormControl<number>;
-  /** Unique token for the input */
-  token?: string;
-  /** Display label */
-  label?: string;
-  /** Minimum value */
-  min?: number;
-  /** Maximum value */
-  max?: number;
-  /** Step increment */
-  step?: number;
-  /** Show pin with current value */
-  pin?: boolean;
-  /** Pin format function */
-  pinFormatter?: (value: number) => string;
-  /** Show tick marks */
-  ticks?: boolean;
-  /** Snap to ticks */
-  snaps?: boolean;
-  /** Range color */
-  color?: Color;
-  /** Component state */
-  state?: ComponentState;
-  /** Enable/disable range */
-  disabled?: boolean;
-  /** Debounce time for ionChange event (ms) */
-  debounce?: number;
-  /** Dual knobs for range selection */
-  dualKnobs?: boolean;
-  /** Control for lower bound (only with dualKnobs) */
-  lowerControl?: FormControl<number>;
-  /** Control for upper bound (only with dualKnobs) */
-  upperControl?: FormControl<number>;
-  /** Show start label (min value or custom) */
-  startLabel?: string;
-  /** Show end label (max value or custom) */
-  endLabel?: string;
-  /** Reactive content key for label */
-  contentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-  /** Fallback text if contentKey is not found */
-  contentFallback?: string;
-}
-
-/**
- * Value emitted by range component.
- */
-export interface RangeValue {
-  lower?: number;
-  upper?: number;
-}

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

@@ -1,60 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-.rating-container {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-
-  &.readonly {
-    pointer-events: none;
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  &.size-small ion-icon {
-    font-size: 16px;
-  }
-
-  &.size-medium ion-icon {
-    font-size: 24px;
-  }
-
-  &.size-large ion-icon {
-    font-size: 32px;
-  }
-}
-
-ion-icon {
-  transition: transform 0.15s ease, color 0.15s ease;
-
-  &.clickable {
-    cursor: pointer;
-
-    &:hover {
-      transform: scale(1.2);
-    }
-  }
-}
-
-.rating-value {
-  margin-left: 8px;
-  font-weight: 600;
-  color: var(--ion-color-dark);
-
-  .size-small & {
-    font-size: 12px;
-  }
-
-  .size-medium & {
-    font-size: 14px;
-  }
-
-  .size-large & {
-    font-size: 18px;
-  }
-}

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

@@ -1,154 +0,0 @@
-import { Component, inject, Input, OnChanges, OnInit, Output, EventEmitter, SimpleChanges } from '@angular/core';
-import { IonIcon } from '@ionic/angular/standalone';
-import { CommonModule } from '@angular/common';
-import { PresetService } from '../../../services/presets';
-import { RatingMetadata, RatingChangeEvent } from './types';
-import { addIcons } from 'ionicons';
-import { star, starOutline, starHalf, heart, heartOutline, heartHalf } from 'ionicons/icons';
-
-addIcons({ star, starOutline, starHalf, heart, heartOutline, heartHalf });
-
-@Component({
-  selector: 'val-rating',
-  standalone: true,
-  imports: [CommonModule, IonIcon],
-  template: `
-    <div
-      class="rating-container"
-      [class.readonly]="resolvedProps.readonly"
-      [class.disabled]="resolvedProps.disabled"
-      [class]="'size-' + (resolvedProps.size || 'medium')"
-    >
-      @for (i of getStars(); track i) {
-        <ion-icon
-          [name]="getStarIcon(i)"
-          [color]="getStarColor(i)"
-          [class.clickable]="!resolvedProps.readonly && !resolvedProps.disabled"
-          (click)="onStarClick(i)"
-          (mouseenter)="onStarHover(i)"
-          (mouseleave)="onStarLeave()"
-        ></ion-icon>
-      }
-      @if (resolvedProps.showValue) {
-        <span class="rating-value">{{ displayValue }}</span>
-      }
-    </div>
-  `,
-  styleUrls: ['./rating.component.scss'],
-})
-/**
- * val-rating
- *
- * A star rating component for feedback and reviews.
- * Supports presets for reusable configurations.
- *
- * @example With preset:
- * <val-rating preset="stars" [props]="{ value: 3.5 }"></val-rating>
- *
- * @example Basic usage
- * <val-rating [props]="{
- *   value: 3.5,
- *   max: 5,
- *   allowHalf: true
- * }" (ratingChange)="onRatingChange($event)"></val-rating>
- *
- * @input preset: string - Name of preset to apply
- * @input props: RatingMetadata - Configuration for the rating
- * @output ratingChange: RatingChangeEvent - Emits when rating changes
- */
-export class RatingComponent implements OnInit, OnChanges {
-  private presets = inject(PresetService);
-
-  @Input() preset?: string;
-  @Input() props: Partial<RatingMetadata> = {};
-
-  resolvedProps: RatingMetadata = {} as RatingMetadata;
-
-  @Output() ratingChange = new EventEmitter<RatingChangeEvent>();
-
-  hoverValue: number | null = null;
-
-  ngOnInit() {
-    this.resolveProps();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['preset'] || changes['props']) {
-      this.resolveProps();
-    }
-  }
-
-  private resolveProps(): void {
-    const presetProps = this.preset
-      ? (this.presets.get('rating', this.preset) as Partial<RatingMetadata>)
-      : {};
-
-    this.resolvedProps = {
-      ...presetProps,
-      ...this.props,
-    } as RatingMetadata;
-  }
-
-  get displayValue(): number {
-    return this.hoverValue !== null ? this.hoverValue : this.resolvedProps.value;
-  }
-
-  getStars(): number[] {
-    const max = this.resolvedProps.max || 5;
-    return Array.from({ length: max }, (_, i) => i + 1);
-  }
-
-  getStarIcon(position: number): string {
-    const value = this.hoverValue !== null ? this.hoverValue : this.resolvedProps.value;
-    const baseIcon = this.resolvedProps.icon || 'star';
-    const emptyIcon = this.resolvedProps.iconEmpty || `${baseIcon}-outline`;
-    const halfIcon = this.resolvedProps.iconHalf || `${baseIcon}-half`;
-
-    if (position <= value) {
-      return baseIcon;
-    } else if (this.resolvedProps.allowHalf && position - 0.5 <= value) {
-      return halfIcon;
-    }
-    return emptyIcon;
-  }
-
-  getStarColor(position: number): string {
-    const value = this.hoverValue !== null ? this.hoverValue : this.resolvedProps.value;
-    const isFilled = position <= value || (this.resolvedProps.allowHalf && position - 0.5 <= value);
-    return isFilled ? (this.resolvedProps.color || 'warning') : (this.resolvedProps.emptyColor || 'medium');
-  }
-
-  onStarClick(position: number): void {
-    if (this.resolvedProps.readonly || this.resolvedProps.disabled) return;
-
-    let newValue = position;
-
-    // Toggle half value if clicking same star and allowHalf is true
-    if (this.resolvedProps.allowHalf && position === Math.ceil(this.resolvedProps.value)) {
-      if (this.resolvedProps.value === position) {
-        newValue = position - 0.5;
-      } else if (this.resolvedProps.value === position - 0.5) {
-        newValue = 0;
-      }
-    } else if (position === this.resolvedProps.value) {
-      // Click same star again to clear
-      newValue = 0;
-    }
-
-    if (newValue !== this.resolvedProps.value) {
-      this.ratingChange.emit({
-        value: newValue,
-        previousValue: this.resolvedProps.value,
-      });
-    }
-  }
-
-  onStarHover(position: number): void {
-    if (this.resolvedProps.readonly || this.resolvedProps.disabled) return;
-    this.hoverValue = position;
-  }
-
-  onStarLeave(): void {
-    this.hoverValue = null;
-  }
-}