valtech-components 2.0.690 → 2.0.691

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

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

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

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

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

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