@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/forms/components/slider/components/slider/slider.component.scss

@@ -0,0 +1,212 @@
+:where(.et-slider) {
+  --et-slider-track-block-size: 2px;
+  --et-slider-track-border-radius: 0;
+
+  --et-slider-inactive-track-color: #646464;
+  --et-slider-active-track-color: #ffffff;
+
+  --et-slider-block-size: 32px;
+  --et-slider-min-inline-size: 112px;
+
+  --et-slider-thumb-target-size: 32px;
+  --et-slider-thumb-size: 12px;
+  --et-slider-thumb-border-radius: 9999px;
+  --et-slider-thumb-color: #ffffff;
+
+  --et-slider-transition-duration: 80ms;
+
+  --et-slider-tooltip-arrow-size: 10px;
+  --et-slider-tooltip-arrow-radius: 2px;
+  --et-slider-tooltip-background-color: hsl(0 0% 20%);
+  --et-slider-tooltip-border-radius: 4px;
+  --et-slider-tooltip-foreground-color: CanvasText;
+  --et-slider-tooltip-padding-inline: 1.5ch;
+  --et-slider-tooltip-padding-block: 0.75ch;
+  --et-slider-tooltip-inline-min-size: 2ch;
+  --et-slider-tooltip-inline-max-size: 10ch;
+
+  outline: none;
+}
+
+.et-slider {
+  position: relative;
+  display: block;
+
+  &.et-slider--disable-animations {
+    --et-slider-transition-duration: 0ms;
+  }
+
+  &[aria-orientation='horizontal'] {
+    block-size: var(--et-slider-block-size);
+    min-inline-size: var(--et-slider-min-inline-size);
+
+    .et-slider-track-container {
+      inset-block-start: calc(50% - (var(--et-slider-track-block-size) / 2));
+      inset-inline-start: 0;
+      block-size: var(--et-slider-track-block-size);
+      inline-size: 100%;
+    }
+
+    .et-slider-track-fill {
+      block-size: var(--et-slider-track-block-size);
+      inline-size: 100%;
+      transform-origin: 0 0;
+    }
+
+    .et-slider-track-background {
+      block-size: var(--et-slider-track-block-size);
+      inline-size: 100%;
+      transform-origin: 100% 100%;
+    }
+
+    .et-slider-thumb-container {
+      inline-size: 100%;
+      block-size: 0;
+      inset-block-start: 50%;
+    }
+
+    &.et-slider--inverted {
+      .et-slider-track-fill {
+        transform-origin: 100% 100%;
+      }
+      .et-slider-track-background {
+        transform-origin: 0 0;
+      }
+    }
+  }
+
+  &[aria-orientation='vertical'] {
+    inline-size: var(--et-slider-block-size);
+    min-block-size: var(--et-slider-min-inline-size);
+
+    .et-slider-track-container {
+      inset-block-start: 0;
+      inset-inline-start: calc(50% - (var(--et-slider-track-block-size) / 2));
+      block-size: 100%;
+      inline-size: var(--et-slider-track-block-size);
+    }
+
+    .et-slider-track-fill {
+      inline-size: var(--et-slider-track-block-size);
+      block-size: 100%;
+      transform-origin: 100% 100%;
+    }
+
+    .et-slider-track-background {
+      inline-size: var(--et-slider-track-block-size);
+      block-size: 100%;
+      transform-origin: 0 0;
+    }
+
+    .et-slider-thumb-container {
+      inline-size: 0;
+      block-size: 100%;
+      inset-inline-start: 50%;
+    }
+
+    &.et-slider--inverted {
+      .et-slider-track-fill {
+        transform-origin: 0 0;
+      }
+      .et-slider-track-background {
+        transform-origin: 100% 100%;
+      }
+    }
+  }
+
+  [dir='rtl'] & {
+    &[aria-orientation='horizontal'] {
+      .et-slider-track-fill {
+        transform-origin: 100% 100%;
+      }
+      .et-slider-track-background {
+        transform-origin: 0 0;
+      }
+
+      &.et-slider--inverted {
+        .et-slider-track-fill {
+          transform-origin: 0 0;
+        }
+        .et-slider-track-background {
+          transform-origin: 100% 100%;
+        }
+      }
+    }
+  }
+
+  .et-slider-track-container {
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .et-slider-track-fill {
+    position: absolute;
+    transition: transform var(--et-slider-transition-duration);
+    background-color: var(--et-slider-active-track-color);
+  }
+
+  .et-slider-track-background {
+    position: absolute;
+    transition: transform var(--et-slider-transition-duration);
+    background-color: var(--et-slider-inactive-track-color);
+  }
+
+  .et-slider-thumb-container {
+    position: absolute;
+    z-index: 1;
+    transition: transform var(--et-slider-transition-duration);
+  }
+
+  .et-slider-thumb {
+    position: absolute;
+    inset-inline-end: calc(var(--et-slider-thumb-target-size) / 2 * -1);
+    inset-block-end: calc(var(--et-slider-thumb-target-size) / 2 * -1);
+    inline-size: var(--et-slider-thumb-target-size);
+    block-size: var(--et-slider-thumb-target-size);
+    transition: transform var(--et-slider-transition-duration);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &::after {
+      content: '';
+      position: relative;
+      inline-size: var(--et-slider-thumb-size);
+      block-size: var(--et-slider-thumb-size);
+      background-color: var(--et-slider-thumb-color);
+      border-radius: var(--et-slider-thumb-border-radius);
+      cursor: grab;
+    }
+  }
+
+  &.et-slider--is-sliding .et-slider-thumb::after {
+    cursor: grabbing;
+  }
+
+  .et-slider-value-tooltip {
+    box-sizing: border-box;
+    position: absolute;
+    padding-inline: var(--et-slider-tooltip-padding-inline);
+    padding-block: var(--et-slider-tooltip-padding-block);
+    background-color: var(--et-slider-tooltip-background-color);
+    border-radius: var(--et-slider-tooltip-border-radius);
+    min-inline-size: var(--et-slider-tooltip-inline-min-size);
+    max-inline-size: var(--et-slider-tooltip-inline-max-size);
+    color: var(--et-slider-tooltip-foreground-color);
+    text-align: center;
+    top: -100%;
+
+    &::before {
+      inline-size: var(--et-slider-tooltip-arrow-size);
+      block-size: var(--et-slider-tooltip-arrow-size);
+      border-radius: var(--et-slider-tooltip-arrow-radius);
+      position: absolute;
+      z-index: -1;
+      transform: translateX(-50%) rotate(45deg);
+      background: var(--et-slider-tooltip-background-color);
+      bottom: -4px;
+      left: 50%;
+      content: '';
+    }
+  }
+}

package/src/lib/components/forms/components/slider/components/slider/slider.component.ts

@@ -0,0 +1,467 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { AsyncPipe, DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+  booleanAttribute,
+  inject,
+  numberAttribute,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { LetDirective, clamp, createDestroy, signalHostAttributes, signalHostClasses } from '@ethlete/core';
+import {
+  BehaviorSubject,
+  combineLatest,
+  filter,
+  fromEvent,
+  map,
+  merge,
+  of,
+  startWith,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+  withLatestFrom,
+} from 'rxjs';
+import { INPUT_TOKEN, InputDirective } from '../../../../directives/input';
+import { FormFieldStateService } from '../../../../services';
+
+const isTouchEvent = (event: Event): event is TouchEvent => {
+  return event.type[0] === 't';
+};
+
+const getTouchIdForSlider = (event: TouchEvent, slider: HTMLElement) => {
+  for (let i = 0; i < event.touches.length; i++) {
+    const target = event.touches[i]!.target as HTMLElement;
+
+    if (slider === target || slider.contains(target)) {
+      return event.touches[i]!.identifier;
+    }
+  }
+
+  return null;
+};
+
+const findMatchingTouch = (touches: TouchList, id: number) => {
+  for (let i = 0; i < touches.length; i++) {
+    if (touches[i]!.identifier === id) {
+      return touches[i];
+    }
+  }
+
+  return null;
+};
+
+const getPointerPositionOnPage = (event: MouseEvent | TouchEvent, id: number | null) => {
+  let point: { clientX: number; clientY: number } | null;
+
+  if (isTouchEvent(event)) {
+    if (typeof id === 'number') {
+      point = findMatchingTouch(event.touches, id) || findMatchingTouch(event.changedTouches, id) || null;
+    } else {
+      point = event.touches[0] || event.changedTouches[0] || null;
+    }
+  } else {
+    point = event;
+  }
+
+  return point ? { x: point.clientX, y: point.clientY } : null;
+};
+
+@Component({
+  selector: 'et-slider',
+  templateUrl: './slider.component.html',
+  styleUrls: ['./slider.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-slider',
+    role: 'slider',
+    '[id]': '_input.id',
+  },
+  imports: [LetDirective, AsyncPipe],
+  hostDirectives: [{ directive: InputDirective, inputs: ['autocomplete'] }],
+})
+export class SliderComponent implements OnInit {
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _dirService = inject(Directionality);
+  private readonly _document = inject(DOCUMENT);
+  private readonly _destroy$ = createDestroy();
+
+  private readonly _mouseDown$ = fromEvent<MouseEvent>(this._elementRef.nativeElement, 'mousedown', { passive: false });
+  private readonly _touchStart$ = fromEvent<TouchEvent>(this._elementRef.nativeElement, 'touchstart', {
+    passive: false,
+  });
+  private readonly _keyDown$ = fromEvent<KeyboardEvent>(this._elementRef.nativeElement, 'keydown', { passive: false });
+  private readonly _keyUp$ = fromEvent<KeyboardEvent>(this._elementRef.nativeElement, 'keyup', { passive: false });
+
+  private readonly _input = inject<InputDirective<number>>(INPUT_TOKEN);
+  private readonly _formFieldStateService = inject(FormFieldStateService);
+
+  @Input()
+  get min(): number {
+    return this._min$.value;
+  }
+  set min(value: unknown) {
+    this._min$.next(numberAttribute(value, 0));
+  }
+  private _min$ = new BehaviorSubject(0);
+
+  @Input()
+  get max(): number {
+    return this._max$.value;
+  }
+  set max(value: unknown) {
+    this._max$.next(numberAttribute(value, 100));
+  }
+  private _max$ = new BehaviorSubject(100);
+
+  @Input()
+  get step(): number {
+    return this._step$.value;
+  }
+  set step(value: unknown) {
+    this._step$.next(numberAttribute(value, 1));
+  }
+  private _step$ = new BehaviorSubject(1);
+
+  @Input()
+  get vertical(): boolean {
+    return this._vertical$.value;
+  }
+  set vertical(value: unknown) {
+    this._vertical$.next(booleanAttribute(value));
+  }
+  private _vertical$ = new BehaviorSubject(false);
+
+  @Input()
+  get inverted(): boolean {
+    return this._inverted$.value;
+  }
+  set inverted(value: unknown) {
+    this._inverted$.next(booleanAttribute(value));
+  }
+  private _inverted$ = new BehaviorSubject(false);
+
+  @Input({ transform: booleanAttribute })
+  get renderValueTooltip(): boolean {
+    return this._renderValueTooltip$.value;
+  }
+  set renderValueTooltip(value: boolean) {
+    this._renderValueTooltip$.next(value);
+  }
+  private _renderValueTooltip$ = new BehaviorSubject(false);
+
+  private readonly _dir$ = this._dirService.change.pipe(startWith(this._dirService.value));
+
+  private readonly _value$ = combineLatest([this._input.value$, this._min$, this._max$]).pipe(
+    map(([value, min, max]) => clamp(value ?? 0, min, max)),
+  );
+
+  private readonly _roundToDecimal$ = this._step$.pipe(
+    map((step) => {
+      const stepString = step.toString();
+
+      return stepString.includes('.') ? stepString.split('.')[1]!.length : 0;
+    }),
+  );
+
+  private readonly _percent$ = combineLatest([this._value$, this._min$, this._max$]).pipe(
+    map(([value, min, max]) => (value - min) / (max - min)),
+  );
+  private readonly _shouldInvertAxis$ = combineLatest([this._vertical$, this._inverted$]).pipe(
+    map(([vertical, inverted]) => (vertical ? !inverted : inverted)),
+  );
+  private readonly _shouldInvertMouseCoords$ = combineLatest([
+    this._vertical$,
+    this._shouldInvertAxis$,
+    this._dir$,
+  ]).pipe(
+    map(([vertical, shouldInvertAxis, dir]) => (dir === 'rtl' && !vertical ? !shouldInvertAxis : shouldInvertAxis)),
+  );
+  private readonly _sliderDimensions$ = new BehaviorSubject(this._elementRef.nativeElement.getBoundingClientRect());
+
+  protected readonly valueText$ = combineLatest([this._value$, this._roundToDecimal$]).pipe(
+    map(([value, roundToDecimal]) => value.toFixed(roundToDecimal)),
+  );
+
+  protected readonly trackBackgroundStyles$ = combineLatest([this._percent$, this._vertical$]).pipe(
+    map(([percent, vertical]) => {
+      const scale = vertical ? `1, ${1 - percent}, 1` : `${1 - percent}, 1, 1`;
+
+      return {
+        transform: `scale3d(${scale})`,
+      };
+    }),
+  );
+
+  protected readonly trackFillStyles$ = combineLatest([this._percent$, this._vertical$]).pipe(
+    map(([percent, vertical]) => {
+      const scale = vertical ? `1, ${percent}, 1` : `${percent}, 1, 1`;
+
+      return {
+        transform: `scale3d(${scale})`,
+        display: percent === 0 ? 'none' : '',
+      };
+    }),
+  );
+
+  protected readonly thumbContainerStyles$ = combineLatest([
+    this._percent$,
+    this._shouldInvertMouseCoords$,
+    this._vertical$,
+    this._dir$,
+  ]).pipe(
+    map(([percent, shouldInvertMouseCoords, vertical, dir]) => {
+      const axis = vertical ? 'Y' : 'X';
+      const invertOffset = dir === 'rtl' && !vertical ? !shouldInvertMouseCoords : shouldInvertMouseCoords;
+      const offset = (invertOffset ? percent : 1 - percent) * 100;
+      const sign = vertical ? '-' : dir === 'rtl' ? '' : '-';
+
+      return {
+        transform: `translate${axis}(${sign}${offset}%)`,
+      };
+    }),
+  );
+
+  protected readonly isSlidingVia$ = new BehaviorSubject<'keyboard' | 'pointer' | null>(null);
+  protected readonly disableAnimations$ = new BehaviorSubject(false);
+  protected readonly touchId$ = new BehaviorSubject<number | null>(null);
+  protected readonly lastPointerEvent$ = new BehaviorSubject<MouseEvent | TouchEvent | null>(null);
+
+  readonly hostClassBindings = signalHostClasses({
+    'et-slider--is-sliding': toSignal(this.isSlidingVia$),
+    'et-slider--inverted': toSignal(this._inverted$),
+    'et-slider--disable-animations': toSignal(this.disableAnimations$),
+  });
+
+  readonly hostAttributeBindings = signalHostAttributes({
+    'aria-orientation': toSignal(this._vertical$.pipe(map((vertical) => (vertical ? 'vertical' : 'horizontal')))),
+    'aria-disabled': toSignal(this._input.disabled$),
+    'aria-valuenow': toSignal(this._value$),
+    'aria-valuemin': toSignal(this._min$),
+    'aria-valuemax': toSignal(this._max$),
+    'aria-valuetext': toSignal(this.valueText$),
+    tabindex: toSignal(this._input.disabled$.pipe(map((disabled) => (disabled ? -1 : 0)))),
+    'aria-labeledby': this._formFieldStateService.labelId,
+    'aria-describedby': this._formFieldStateService.describedBy,
+  });
+
+  ngOnInit(): void {
+    merge(this._mouseDown$, this._touchStart$)
+      .pipe(
+        filter((event) => {
+          const isDisabled = this._input.disabled;
+          const isSliding = !!this.isSlidingVia$.value;
+          const isInvalidMouseButton = !isTouchEvent(event) && event.button !== 0;
+
+          return !isDisabled && !isSliding && !isInvalidMouseButton;
+        }),
+        switchMap((event) =>
+          combineLatest([of(event), this._freshSliderDimensions(), this._shouldInvertMouseCoords$]).pipe(
+            tap(([event, sliderDimensions, shouldInvertMouseCoords]) => {
+              this._elementRef.nativeElement.focus();
+
+              this._initializeSlide(event, sliderDimensions, shouldInvertMouseCoords);
+            }),
+          ),
+        ),
+        takeUntil(this._destroy$),
+      )
+      .subscribe();
+
+    this._keyDown$
+      .pipe(
+        filter((event) => {
+          const isDisabled = this._input.disabled;
+          const isSliding = this.isSlidingVia$.value && this.isSlidingVia$.value !== 'keyboard';
+          const isModifierPressed = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.metaKey;
+
+          return !isDisabled && !isSliding && !isModifierPressed;
+        }),
+        takeUntil(this._destroy$),
+        withLatestFrom(this._dir$),
+        tap(([event, dir]) => this._updateSliderViaKeyboard(event, dir)),
+      )
+      .subscribe();
+
+    this._keyUp$
+      .pipe(
+        takeUntil(this._destroy$),
+        filter(() => this.isSlidingVia$.value === 'keyboard'),
+        tap(() => this.isSlidingVia$.next(null)),
+      )
+      .subscribe();
+
+    fromEvent(this._elementRef.nativeElement, 'blur')
+      .pipe(
+        takeUntil(this._destroy$),
+        tap(() => {
+          this._input._markAsTouched();
+          this._input._setShouldDisplayError(true);
+        }),
+        take(1),
+      )
+      .subscribe();
+  }
+
+  private _initializeSlide(
+    event: MouseEvent | TouchEvent,
+    sliderDimensions: DOMRect,
+    shouldInvertMouseCoords: boolean,
+  ) {
+    if (isTouchEvent(event)) {
+      this.touchId$.next(getTouchIdForSlider(event, this._elementRef.nativeElement));
+    }
+
+    const pointerPosition = getPointerPositionOnPage(event, this.touchId$.value);
+
+    if (!pointerPosition) {
+      return;
+    }
+
+    this.isSlidingVia$.next('pointer');
+
+    this._bindGlobalEvents(event);
+    this._updateValueFromPosition(pointerPosition, sliderDimensions, shouldInvertMouseCoords);
+    this._document.documentElement.style.cursor = 'grabbing';
+
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+  }
+
+  private _bindGlobalEvents(event: MouseEvent | TouchEvent) {
+    const isTouch = isTouchEvent(event);
+    const moveEventName = isTouch ? 'touchmove' : 'mousemove';
+    const endEventName = isTouch ? 'touchend' : 'mouseup';
+
+    const eventConfig = { passive: false };
+
+    const pointerUp$ = fromEvent<MouseEvent | TouchEvent>(window, endEventName, eventConfig);
+    const touchCancel$ = fromEvent<TouchEvent>(window, 'touchcancel', eventConfig);
+    const windowBlur$ = fromEvent<FocusEvent>(window, 'blur');
+
+    const slideEnd$ = merge(pointerUp$, touchCancel$, windowBlur$);
+
+    fromEvent<MouseEvent | TouchEvent>(window, moveEventName, eventConfig)
+      .pipe(
+        takeUntil(slideEnd$),
+        takeUntil(this._destroy$),
+        withLatestFrom(this._sliderDimensions$, this._shouldInvertMouseCoords$),
+        tap(([event, sliderDimensions, shouldInvertMouseCoords]) => {
+          const pointerPosition = getPointerPositionOnPage(event, this.touchId$.value);
+
+          if (!pointerPosition) {
+            return;
+          }
+
+          if (!this.disableAnimations$.value) {
+            this.disableAnimations$.next(true);
+          }
+
+          this._updateValueFromPosition(pointerPosition, sliderDimensions, shouldInvertMouseCoords);
+        }),
+      )
+      .subscribe();
+
+    slideEnd$
+      .pipe(
+        takeUntil(this._destroy$),
+        take(1),
+        tap((event) => {
+          event.preventDefault();
+          this.isSlidingVia$.next(null);
+          this.touchId$.next(null);
+          this._document.documentElement.style.cursor = '';
+          this.disableAnimations$.next(false);
+        }),
+      )
+      .subscribe();
+  }
+
+  private _updateValueFromPosition = (
+    pos: { x: number; y: number },
+    sliderDimensions: DOMRect,
+    shouldInvertMouseCoords: boolean,
+  ) => {
+    const offset = this.vertical ? sliderDimensions.top : sliderDimensions.left;
+    const size = this.vertical ? sliderDimensions.height : sliderDimensions.width;
+    const posComponent = this.vertical ? pos.y : pos.x;
+
+    let percent = clamp((posComponent - offset) / size, 0, 1);
+
+    if (shouldInvertMouseCoords) {
+      percent = 1 - percent;
+    }
+
+    if (percent === 0) {
+      this._input._updateValue(this.min);
+    } else if (percent === 1) {
+      this._input._updateValue(this.max);
+    } else {
+      const exactValue = percent * (this.max - this.min) + this.min;
+      const closestValue = Math.round((exactValue - this.min) / this.step) * this.step + this.min;
+      this._input._updateValue(clamp(closestValue, this.min, this.max));
+    }
+
+    this._input._markAsTouched();
+    this._input._setShouldDisplayError(true);
+  };
+
+  private _updateSliderViaKeyboard(event: KeyboardEvent, dir: string) {
+    switch (event.key) {
+      case 'PageUp':
+        this._updateSliderValueBy(10);
+        break;
+      case 'PageDown':
+        this._updateSliderValueBy(-10);
+        break;
+      case 'End':
+        this._input._updateValue(this.max);
+        break;
+      case 'Home':
+        this._input._updateValue(this.min);
+        break;
+      case 'ArrowLeft':
+        this._updateSliderValueBy(dir === 'rtl' ? 1 : -1);
+        break;
+      case 'ArrowUp':
+        this._updateSliderValueBy(1);
+        break;
+      case 'ArrowRight':
+        this._updateSliderValueBy(dir === 'rtl' ? -1 : 1);
+        break;
+      case 'ArrowDown':
+        this._updateSliderValueBy(-1);
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    this.isSlidingVia$.next('keyboard');
+
+    this._input._markAsTouched();
+    this._input._setShouldDisplayError(true);
+  }
+
+  private async _updateSliderValueBy(offset: number) {
+    const currentValue = this._input.value || 0;
+    const value = clamp(currentValue + this.step * offset, this.min, this.max);
+
+    this._input._updateValue(value);
+  }
+
+  private _freshSliderDimensions() {
+    this._sliderDimensions$.next(this._elementRef.nativeElement.getBoundingClientRect());
+
+    return this._sliderDimensions$;
+  }
+}

package/src/lib/components/forms/components/slider/components/slider-field/slider-field.component.ts

@@ -0,0 +1,36 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Type, ViewEncapsulation, forwardRef, inject } from '@angular/core';
+import { DynamicFormFieldDirective } from '../../../../directives/dynamic-form-field';
+import { StaticFormFieldDirective } from '../../../../directives/static-form-field';
+import { WriteableInputDirective } from '../../../../directives/writeable-input';
+import { InputStateService } from '../../../../services';
+import { ErrorComponent } from '../../../error/components/error';
+
+@Component({
+  selector: 'et-slider-field',
+  template: `
+    <ng-content select="et-label" />
+    <div class="et-slider-field-container">
+      <ng-content select="et-slider" />
+    </div>
+    <et-error [errors]="inputState.errors$ | async" />
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-form-field et-slider-field',
+  },
+  hostDirectives: [
+    StaticFormFieldDirective,
+    WriteableInputDirective,
+    {
+      directive: forwardRef(() => DynamicFormFieldDirective) as Type<DynamicFormFieldDirective>,
+      inputs: ['hideErrorMessage'],
+    },
+  ],
+  imports: [ErrorComponent, AsyncPipe],
+})
+export class SliderFieldComponent {
+  protected readonly inputState = inject(InputStateService);
+}