@ethlete/cdk 4.28.0 → 4.28.1

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

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

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

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