@ethlete/cdk 4.28.0 → 4.28.2

package/src/lib/components/forms/components/selection-list/directives/selection-list-field/selection-list-field.directive.ts

@@ -1,145 +0,0 @@
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { A, ENTER, SPACE, hasModifierKey } from '@angular/cdk/keycodes';
-import {
-  ContentChildren,
-  Directive,
-  InjectionToken,
-  Input,
-  QueryList,
-  booleanAttribute,
-  inject,
-  signal,
-} from '@angular/core';
-import { Primitive, TypedQueryList, createDestroy } from '@ethlete/core';
-import { takeUntil } from 'rxjs';
-import { INPUT_TOKEN, InputDirective } from '../../../../directives/input';
-import { SELECTION_LIST_OPTION, SelectionListOptionDirective } from '../selection-list-option';
-
-export const SELECTION_LIST_FIELD = new InjectionToken<SelectionListFieldDirective>(
-  'ET_SELECTION_LIST_FIELD_DIRECTIVE_TOKEN',
-);
-
-@Directive({
-  standalone: true,
-  providers: [{ provide: SELECTION_LIST_FIELD, useExisting: SelectionListFieldDirective }],
-  exportAs: 'etSelectionListField',
-  host: {
-    class: 'et-selection-list-field',
-    '[class.et-selection-list-field--multiple]': 'multiple',
-    role: 'listbox',
-    '[attr.aria-multiselectable]': 'multiple',
-    '[attr.aria-disabled]': 'input.disabled',
-    '(keydown)': '_handleKeydown($event)',
-  },
-})
-export class SelectionListFieldDirective {
-  private readonly _destroy$ = createDestroy();
-
-  private _keyManager: FocusKeyManager<SelectionListOptionDirective> | null = null;
-  readonly input = inject<InputDirective<Primitive | Primitive[] | null>>(INPUT_TOKEN);
-
-  @ContentChildren(SELECTION_LIST_OPTION)
-  set options(value: TypedQueryList<SelectionListOptionDirective> | null) {
-    this._options.set(value);
-
-    if (value && !this._keyManager) {
-      this._setupRovingTabindex(value);
-    }
-  }
-  private _options = signal<TypedQueryList<SelectionListOptionDirective> | null>(null);
-
-  @Input({ transform: booleanAttribute })
-  get multiple(): boolean {
-    return this._multiple();
-  }
-  set multiple(value: boolean) {
-    this._multiple.set(value);
-  }
-  private _multiple = signal<boolean>(false);
-
-  protected _handleKeydown(event: KeyboardEvent) {
-    const activeItem = this._keyManager?.activeItem;
-
-    if (
-      (event.keyCode === ENTER || event.keyCode === SPACE) &&
-      !this._keyManager?.isTyping() &&
-      activeItem &&
-      !activeItem.disabled
-    ) {
-      event.preventDefault();
-      activeItem._toggleSelected();
-    } else if (
-      event.keyCode === A &&
-      this.multiple &&
-      !this._keyManager?.isTyping() &&
-      hasModifierKey(event, 'ctrlKey')
-    ) {
-      const shouldSelect = this._options()?.some(
-        (option) => !option?.disabled && !option?.selected() && !option?.isResetOption,
-      );
-      event.preventDefault();
-      this._setAllOptionsSelected(shouldSelect ?? true);
-    } else {
-      this._keyManager?.onKeydown(event);
-    }
-  }
-
-  private _setupRovingTabindex(queryList: TypedQueryList<SelectionListOptionDirective>) {
-    this._keyManager = new FocusKeyManager(queryList as QueryList<SelectionListOptionDirective>)
-      .withHomeAndEnd()
-      .withTypeAhead()
-      .withWrap()
-      .skipPredicate(() => this.input.disabled);
-
-    // Set the initial focus.
-    this._resetActiveOption();
-
-    // Move the tabindex to the currently-focused list item.
-    this._keyManager.change
-      .pipe(takeUntil(this._destroy$))
-      .subscribe((activeItemIndex) => this._setActiveOption(activeItemIndex));
-
-    // If the active item is removed from the list, reset back to the first one.
-    queryList.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
-      const activeItem = this._keyManager?.activeItem;
-
-      if (!activeItem || !queryList.toArray().indexOf(activeItem)) {
-        this._resetActiveOption();
-      }
-    });
-  }
-
-  private _setActiveOption(index: number) {
-    this._options()?.forEach((item, itemIndex) => item?._setTabindex(itemIndex === index ? 0 : -1));
-    this._keyManager?.updateActiveItem(index);
-  }
-
-  private _resetActiveOption() {
-    if (this.input.disabled) {
-      this._setActiveOption(-1);
-      return;
-    }
-
-    const list = this._options();
-    if (!list) return;
-
-    const activeItem = list.find((item) => !!item && item.selected() && !item.disabled) || list.first;
-    this._setActiveOption(activeItem ? list.toArray().indexOf(activeItem) : -1);
-  }
-
-  private _setAllOptionsSelected(shouldSelectAll: boolean) {
-    if (!this.multiple) return;
-
-    const options = this._options()?.toArray() as SelectionListOptionDirective[] | undefined;
-
-    if (!options) return;
-
-    if (shouldSelectAll) {
-      const values = options.filter((o) => !o.disabled && !o.isResetOption).map((o) => o.value);
-
-      this.input._updateValue(values);
-    } else {
-      this.input._updateValue([]);
-    }
-  }
-}

package/src/lib/components/forms/components/selection-list/directives/selection-list-option/selection-list-option.directive.ts

@@ -1,122 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  Input,
-  booleanAttribute,
-  computed,
-  inject,
-  signal,
-} from '@angular/core';
-import { Primitive } from '@ethlete/core';
-import { INPUT_TOKEN, InputDirective } from '../../../../directives/input';
-import { SELECTION_LIST_FIELD } from '../selection-list-field';
-
-export const SELECTION_LIST_OPTION = new InjectionToken<SelectionListOptionDirective>(
-  'ET_SELECTION_LIST_OPTION_DIRECTIVE_TOKEN',
-);
-
-@Directive({
-  standalone: true,
-  providers: [{ provide: SELECTION_LIST_OPTION, useExisting: SelectionListOptionDirective }],
-  exportAs: 'etSelectionListOption',
-  host: {
-    class: 'et-selection-list-option',
-    '[class.et-selection-list-option--selected]': 'selected()',
-    '[class.et-selection-list-option--disabled]': 'disabled || input.disabled',
-    role: 'option',
-    '[attr.aria-selected]': 'selected()',
-    '[attr.aria-disabled]': 'disabled || input.disabled',
-    tabindex: '0',
-    '(click)': '_onInputInteraction($event)',
-    '(blur)': '_controlTouched()',
-  },
-})
-export class SelectionListOptionDirective {
-  readonly input = inject<InputDirective<Primitive | Primitive[] | null>>(INPUT_TOKEN);
-  readonly field = inject(SELECTION_LIST_FIELD);
-  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  @Input()
-  get value() {
-    return this._value();
-  }
-  set value(value: Primitive) {
-    this._value.set(value);
-  }
-  private _value = signal<Primitive>(undefined);
-
-  @Input({ transform: booleanAttribute })
-  get disabled(): boolean {
-    return this._disabled();
-  }
-  set disabled(value: boolean) {
-    this._disabled.set(value);
-  }
-  private _disabled = signal<boolean>(false);
-
-  @Input({ transform: booleanAttribute })
-  get isResetOption(): boolean {
-    return this._isResetOption();
-  }
-  set isResetOption(value: boolean) {
-    this._isResetOption.set(value);
-  }
-  private _isResetOption = signal<boolean>(false);
-
-  readonly selected = computed(() => {
-    const value = this.input.value;
-
-    return (
-      (Array.isArray(value) && value.includes(this.value)) ||
-      value === this.value ||
-      (this.isResetOption && ((Array.isArray(value) && value.length === 0) || value === null || value === undefined))
-    );
-  });
-
-  focus() {
-    this.elementRef.nativeElement.focus();
-  }
-
-  getLabel() {
-    return this.elementRef.nativeElement.textContent || '';
-  }
-
-  _onInputInteraction(event: Event) {
-    event.stopPropagation();
-
-    if (this.disabled) {
-      return;
-    }
-
-    this._toggleSelected();
-
-    this.input._markAsTouched();
-    this.input._setShouldDisplayError(true);
-  }
-
-  _controlTouched() {
-    this.input._markAsTouched();
-    this.input._setShouldDisplayError(true);
-  }
-
-  _setTabindex(value: number) {
-    this.elementRef.nativeElement.setAttribute('tabindex', value + '');
-  }
-
-  _toggleSelected() {
-    if (this.field.multiple) {
-      if (!Array.isArray(this.input.value)) {
-        this.input._updateValue([this.value]);
-      } else if (this.isResetOption) {
-        this.input._updateValue([]);
-      } else if (this.selected()) {
-        this.input._updateValue(this.input.value.filter((value) => value !== this.value));
-      } else {
-        this.input._updateValue([...this.input.value, this.value]);
-      }
-    } else {
-      this.input._updateValue(this.value);
-    }
-  }
-}

package/src/lib/components/forms/components/selection-list/selection-list.imports.ts

@@ -1,4 +0,0 @@
-import { SelectionListFieldComponent } from './components/selection-list-field';
-import { SelectionListOptionComponent } from './components/selection-list-option';
-
-export const SelectionListImports = [SelectionListFieldComponent, SelectionListOptionComponent] as const;

package/src/lib/components/forms/components/selection-list/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './selection-list-storybook.component';

package/src/lib/components/forms/components/selection-list/stories/components/selection-list-storybook.component.ts

@@ -1,40 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { SelectionListImports } from '../../selection-list.imports';
-
-@Component({
-  selector: 'et-sb-selection-list',
-  template: `
-    <et-selection-list-field [formControl]="fg" [multiple]="multiple" class="et-sb-selection-list-example">
-      <et-selection-list-option isResetOption>Reset</et-selection-list-option>
-      <et-selection-list-option [value]="'1'">Option 1</et-selection-list-option>
-      <et-selection-list-option [value]="'2'">Item 2</et-selection-list-option>
-      <et-selection-list-option [value]="'3'">Select me 3</et-selection-list-option>
-      <et-selection-list-option [value]="'4'" disabled>I am disabled</et-selection-list-option>
-    </et-selection-list-field>
-
-    <pre> {{ fg.value | json }} </pre>
-  `,
-  standalone: true,
-  styles: [
-    `
-      .et-sb-selection-list-example {
-        display: grid;
-        gap: 8px;
-
-        .et-selection-list-option--disabled {
-          color: #ccc;
-        }
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  imports: [SelectionListImports, ReactiveFormsModule, JsonPipe],
-})
-export class StorybookSelectionListComponent {
-  fg = new FormControl({ value: '3', disabled: false });
-
-  multiple = false;
-}

package/src/lib/components/forms/components/selection-list/stories/selection-list.component.stories.ts

@@ -1,37 +0,0 @@
-import { applicationConfig, Meta, StoryFn } from '@storybook/angular';
-import { provideValidatorErrorsService } from '../../../services';
-import { StorybookSelectionListComponent } from './components';
-import CustomMDXDocumentation from './selection-list.docs.mdx';
-
-export default {
-  title: 'CDK/Forms/Selection list',
-  component: StorybookSelectionListComponent,
-  decorators: [
-    applicationConfig({
-      providers: [provideValidatorErrorsService()],
-    }),
-  ],
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-  argTypes: {
-    multiple: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    multiple: false,
-  },
-} as Meta<StorybookSelectionListComponent>;
-
-const Template: StoryFn<StorybookSelectionListComponent> = (args) => ({
-  props: args,
-});
-
-export const Default = {
-  render: Template,
-};

package/src/lib/components/forms/components/selection-list/stories/selection-list.docs.mdx

@@ -1,16 +0,0 @@
-# Selection list
-
-A selection list provides an interface for selecting values, where each list item is an option. It can either be single or multiple selection.
-Options within a selection list should not contain further interactive controls such as buttons or checkboxes.
-
-## Usage
-
-```html
-<p id="selectionListLabel">Please choose options:</p>
-
-<et-selection-list-field [formControl]="fg" multiple aria-labelledby="selectionListLabel">
-  <et-selection-list-option [value]="'1'">Option 1</et-selection-list-option>
-  <et-selection-list-option [value]="'2'">Option 2</et-selection-list-option>
-  <et-selection-list-option [value]="'3'">Option 3</et-selection-list-option>
-</et-selection-list-field>
-```

package/src/lib/components/forms/components/slide-toggle/components/slide-toggle/slide-toggle.component.html

@@ -1,17 +0,0 @@
-<button
-  [attr.tabindex]="(input.disabled$ | async) ? -1 : 0"
-  [attr.aria-checked]="slideToggle.checked$ | async"
-  [attr.aria-labelledby]="input.labelId$ | async"
-  [attr.aria-required]="(input.required$ | async) || null"
-  [attr.aria-describedby]="input.describedBy$ | async"
-  [disabled]="input.disabled$ | async"
-  [attr.id]="input.id"
-  (click)="slideToggle._onInputInteraction($event)"
-  (blur)="slideToggle._controlTouched()"
-  class="et-slide-toggle-button"
-  role="switch"
-  type="button"
-  etNativeInputRef
->
-  <div class="et-slide-toggle-handle"></div>
-</button>

package/src/lib/components/forms/components/slide-toggle/components/slide-toggle/slide-toggle.component.scss

@@ -1,76 +0,0 @@
-:where(.et-slide-toggle-button) {
-  --et-slide-toggle-button-inline-size: 42px;
-  --et-slide-toggle-button-block-size: 22px;
-  --et-slide-toggle-button-border-radius: 9999px;
-
-  --et-slide-toggle-border-size: 1px;
-  --et-slide-toggle-border-style: solid;
-
-  --et-slide-toggle-track-unchecked-color: #e0e0e0;
-  --et-slide-toggle-track-checked-color: #ff8686;
-
-  --et-slide-toggle-border-unchecked-color: var(--et-slide-toggle-track-unchecked-color);
-  --et-slide-toggle-border-checked-color: var(--et-slide-toggle-track-checked-color);
-
-  --et-slide-toggle-thumb-size: calc(
-    var(--et-slide-toggle-button-block-size) - (var(--et-slide-toggle-thumb-spacing) * 2)
-  );
-  --et-slide-toggle-thumb-spacing: 3px;
-  --et-slide-toggle-border-radius: 9999px;
-  --et-slide-toggle-thumb-unchecked-color: #525252;
-  --et-slide-toggle-thumb-checked-color: var(--et-slide-toggle-thumb-unchecked-color);
-}
-
-:where(.et-slide-toggle) {
-  display: inline-block;
-}
-
-.et-slide-toggle-button {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  inline-size: var(--et-slide-toggle-button-inline-size);
-  block-size: var(--et-slide-toggle-button-block-size);
-  border-radius: var(--et-slide-toggle-button-border-radius);
-  background-color: var(--et-slide-toggle-track-unchecked-color);
-  border: var(--et-slide-toggle-border-size) var(--et-slide-toggle-border-style)
-    var(--et-slide-toggle-border-unchecked-color);
-  padding: 0;
-  transition:
-    background-color 0.2s var(--ease-5),
-    border-color 0.2s var(--ease-5);
-}
-
-.et-slide-toggle-button:not(:disabled) {
-  cursor: pointer;
-}
-
-.et-slide-toggle-handle {
-  position: absolute;
-  inset-block-start: calc(var(--et-slide-toggle-thumb-spacing) - var(--et-slide-toggle-border-size));
-  inset-inline-start: calc(var(--et-slide-toggle-thumb-spacing) - var(--et-slide-toggle-border-size));
-  inline-size: var(--et-slide-toggle-thumb-size);
-  block-size: var(--et-slide-toggle-thumb-size);
-  border-radius: var(--et-slide-toggle-border-radius);
-  background-color: var(--et-slide-toggle-thumb-unchecked-color);
-  transition:
-    transform 0.2s var(--ease-5),
-    background-color 0.2s var(--ease-5);
-}
-
-.et-slide-toggle--checked {
-  .et-slide-toggle-button {
-    background-color: var(--et-slide-toggle-track-checked-color);
-    border-color: var(--et-slide-toggle-border-checked-color);
-  }
-
-  .et-slide-toggle-handle {
-    transform: translateX(
-      calc(
-        var(--et-slide-toggle-button-inline-size) - var(--et-slide-toggle-thumb-size) -
-          (var(--et-slide-toggle-thumb-spacing) * 2)
-      )
-    );
-    background-color: var(--et-slide-toggle-thumb-checked-color);
-  }
-}

package/src/lib/components/forms/components/slide-toggle/components/slide-toggle/slide-toggle.component.ts

@@ -1,23 +0,0 @@
-import { AsyncPipe, NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
-import { InputDirective } from '../../../../directives/input';
-import { NativeInputRefDirective } from '../../../../directives/native-input-ref';
-import { InputBase } from '../../../../utils';
-import { SLIDE_TOGGLE_TOKEN, SlideToggleDirective } from '../../directives/slide-toggle';
-
-@Component({
-  selector: 'et-slide-toggle',
-  templateUrl: './slide-toggle.component.html',
-  styleUrls: ['./slide-toggle.component.scss'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'et-slide-toggle',
-  },
-  imports: [NgClass, AsyncPipe, NativeInputRefDirective],
-  hostDirectives: [SlideToggleDirective, InputDirective],
-})
-export class SlideToggleComponent extends InputBase {
-  protected readonly slideToggle = inject(SLIDE_TOGGLE_TOKEN);
-}

package/src/lib/components/forms/components/slide-toggle/components/slide-toggle-field/slide-toggle-field.component.ts

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

package/src/lib/components/forms/components/slide-toggle/directives/slide-toggle/slide-toggle.directive.ts

@@ -1,36 +0,0 @@
-import { Directive, inject, InjectionToken } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { signalHostClasses } from '@ethlete/core';
-import { map } from 'rxjs';
-import { INPUT_TOKEN, InputDirective } from '../../../../directives/input';
-
-export const SLIDE_TOGGLE_TOKEN = new InjectionToken<SlideToggleDirective>('ET_SLIDE_TOGGLE_DIRECTIVE_TOKEN');
-
-@Directive({
-  standalone: true,
-  providers: [{ provide: SLIDE_TOGGLE_TOKEN, useExisting: SlideToggleDirective }],
-  exportAs: 'etSlideToggle',
-})
-export class SlideToggleDirective {
-  readonly input = inject<InputDirective<boolean>>(INPUT_TOKEN);
-  readonly checked$ = this.input.value$.pipe(map((value) => !!value));
-
-  readonly hostClassBindings = signalHostClasses({
-    'et-slide-toggle--checked': toSignal(this.checked$),
-    'et-slide-toggle--disabled': toSignal(this.input.disabled$),
-  });
-
-  _onInputInteraction(event: Event) {
-    event.stopPropagation();
-
-    this.input._updateValue(!this.input.value);
-
-    this.input._markAsTouched();
-    this.input._setShouldDisplayError(true);
-  }
-
-  _controlTouched() {
-    this.input._markAsTouched();
-    this.input._setShouldDisplayError(true);
-  }
-}

package/src/lib/components/forms/components/slide-toggle/slide-toggle.imports.ts

@@ -1,5 +0,0 @@
-import { LabelComponent } from '../label/components/label';
-import { SlideToggleComponent } from './components/slide-toggle';
-import { SlideToggleFieldComponent } from './components/slide-toggle-field';
-
-export const SlideToggleImports = [SlideToggleComponent, SlideToggleFieldComponent, LabelComponent] as const;

package/src/lib/components/forms/components/slide-toggle/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './slide-toggle-storybook.component';

package/src/lib/components/forms/components/slide-toggle/stories/components/slide-toggle-storybook.component.ts

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { SlideToggleImports } from '../../slide-toggle.imports';
-
-@Component({
-  selector: 'et-sb-slide-toggle',
-  template: `
-    <et-slide-toggle-field [formControl]="fg">
-      <et-slide-toggle />
-      <et-label>Slide it</et-label>
-    </et-slide-toggle-field>
-  `,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  imports: [SlideToggleImports, ReactiveFormsModule],
-})
-export class StorybookSlideToggleComponent {
-  fg = new FormControl(false);
-}

package/src/lib/components/forms/components/slide-toggle/stories/slide-toggle.component.stories.ts

@@ -1,28 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { applicationConfig, Meta, StoryFn } from '@storybook/angular';
-import { provideValidatorErrorsService } from '../../../services';
-import { StorybookSlideToggleComponent } from './components';
-import CustomMDXDocumentation from './slide-toggle.docs.mdx';
-
-export default {
-  title: 'CDK/Forms/Slide toggle',
-  component: StorybookSlideToggleComponent,
-  decorators: [
-    applicationConfig({
-      providers: [provideValidatorErrorsService()],
-    }),
-  ],
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-} as Meta<StorybookSlideToggleComponent>;
-
-const Template: StoryFn<StorybookSlideToggleComponent> = (args) => ({
-  props: args,
-});
-
-export const Default = {
-  render: Template,
-};

package/src/lib/components/forms/components/slide-toggle/stories/slide-toggle.docs.mdx

@@ -1,13 +0,0 @@
-# Slide Toggle
-
-The slide toggle component is a simple on/off toggle switch. It is used to quickly switch between two states.
-Imported by adding the `SlideToggleImports` array to the `imports` array of your standalone component.
-
-## Usage
-
-```html
-<et-slide-toggle-field [formControl]="fg">
-  <et-slide-toggle />
-  <et-label>Slide it</et-label>
-</et-slide-toggle-field>
-```

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

@@ -1,22 +0,0 @@
-<div class="et-slider-track-container">
-  @if (trackBackgroundStyles$ | async; as trackBackgroundStyles) {
-    <div [style.transform]="trackBackgroundStyles.transform" class="et-slider-track-background"></div>
-  }
-  @if (trackFillStyles$ | async; as trackFillStyles) {
-    <div
-      [style.transform]="trackFillStyles.transform"
-      [style.display]="trackFillStyles.display"
-      class="et-slider-track-fill"
-    ></div>
-  }
-</div>
-
-@if (thumbContainerStyles$ | async; as thumbContainerStyles) {
-  <div [style.transform]="thumbContainerStyles.transform" class="et-slider-thumb-container">
-    <div class="et-slider-thumb">
-      @if (renderValueTooltip) {
-        <div class="et-slider-value-tooltip">{{ valueText$ | async }}</div>
-      }
-    </div>
-  </div>
-}