@ethlete/cdk 4.27.1 → 4.28.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+/* 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

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

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