@kraft.stitch/angular 0.0.1 → 0.0.2

package/src/lib/Inputs/input/input.ts

@@ -1,139 +0,0 @@
-// Side-effect import: registers the `ks-input` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-input.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, model, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { KsSize } from '@kraft.stitch/core';
-
-/** Mirrors `KsInputType` exported by `core/src/components/Inputs/input/input.tsx`. */
-export type KsInputType = 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
-
-/** DOM shape of the real `<ks-input>` custom element, typed for the wrapper. */
-type KsInputElement = HTMLElement & {
-  type: KsInputType;
-  placeholder: string;
-  label: string;
-  hint: string;
-  error: string;
-  prefixIcon: string;
-  suffixIcon: string;
-  size: KsSize;
-  value: string;
-  disabled: boolean;
-};
-
-/**
- * Angular wrapper around the `<ks-input>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. `<ks-input>` has no `@Method() writeValue()` of its
- * own (unlike `chips`/`dropdown`/…), so this wrapper's `writeValue` sets
- * `el.value` directly instead of delegating to a Stencil method.
- *
- * The native `ksBlur` event is already prefixed `ks` by the Stencil
- * author, so re-using that exact name here as the Angular output would
- * still hit the double-fire collision described in `Buttons/button.ts`
- * (Ivy's `tNode.outputs` match is purely by literal name, `ks`-prefix or
- * not) — hence `ksBlurred` (distinct spelling) instead.
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="v" (ksValueChange)="v = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-input',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsInputComponent, multi: true }],
-})
-export class KsInputComponent implements ControlValueAccessor {
-  private readonly el: KsInputElement;
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** HTML input type */
-  readonly type = input<KsInputType>('text');
-
-  /** Placeholder text */
-  readonly placeholder = input('');
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Helper / hint text shown below the input */
-  readonly hint = input('');
-
-  /** Error message — also triggers the error state */
-  readonly error = input('');
-
-  /** Leading icon class (e.g. Material Symbol name) */
-  readonly prefixIcon = input('');
-
-  /** Trailing icon class */
-  readonly suffixIcon = input('');
-
-  /** Size variant */
-  readonly size = input<KsSize>('md');
-
-  /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = model('');
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Emits the newly-typed value. From the native `valueChange` event. */
-  readonly ksValueChange = output<string>();
-
-  /** Emitted on native blur (mirrors Angular's onTouched callback). From the native `ksBlur` event. */
-  readonly ksBlurred = output<void>();
-
-  constructor(ref: ElementRef<KsInputElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.type = this.type()));
-    effect(() => (this.el.placeholder = this.placeholder()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.hint = this.hint()));
-    effect(() => (this.el.error = this.error()));
-    effect(() => (this.el.prefixIcon = this.prefixIcon()));
-    effect(() => (this.el.suffixIcon = this.suffixIcon()));
-    effect(() => (this.el.size = this.size()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.value = this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<string>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-    };
-    const onNativeBlur = (): void => {
-      this.ksBlurred.emit();
-      this.onTouched();
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    this.el.addEventListener('ksBlur', onNativeBlur);
-    inject(DestroyRef).onDestroy(() => {
-      this.el.removeEventListener('valueChange', onNativeValueChange);
-      this.el.removeEventListener('ksBlur', onNativeBlur);
-    });
-  }
-
-  writeValue(value: string): void {
-    this.el.value = value ?? '';
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/otp-input/otp-input.ts

@@ -1,113 +0,0 @@
-// Side-effect import: registers the `ks-otp-input` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-otp-input.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/** DOM shape of the real `<ks-otp-input>` custom element, typed for the wrapper. */
-type KsOtpInputElement = HTMLElement & {
-  length: number;
-  inputType: 'number' | 'text';
-  label: string;
-  error: string;
-  masked: boolean;
-  disabled: boolean;
-  value: string;
-  writeValue(val: string): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-otp-input>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="v" (ksValueChange)="v = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-otp-input',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsOtpInputComponent, multi: true }],
-})
-export class KsOtpInputComponent implements ControlValueAccessor {
-  private readonly el: KsOtpInputElement;
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Number of digits */
-  readonly length = input(6);
-
-  /** Input type: 'number' | 'text' */
-  readonly inputType = input<'number' | 'text'>('number');
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Error message */
-  readonly error = input('');
-
-  /** Mask the input (like a password) */
-  readonly masked = input(false);
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input('');
-
-  /** Emits whenever `value` changes. From the native `valueChange` event. */
-  readonly ksValueChange = output<string>();
-
-  /** Emits the full OTP string when all digits are filled. From the native `completed` event. */
-  readonly ksCompleted = output<string>();
-
-  constructor(ref: ElementRef<KsOtpInputElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.length = this.length()));
-    effect(() => (this.el.inputType = this.inputType()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.error = this.error()));
-    effect(() => (this.el.masked = this.masked()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<string>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    const onNativeCompleted = (event: Event): void => {
-      this.ksCompleted.emit((event as CustomEvent<string>).detail);
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    this.el.addEventListener('completed', onNativeCompleted);
-    inject(DestroyRef).onDestroy(() => {
-      this.el.removeEventListener('valueChange', onNativeValueChange);
-      this.el.removeEventListener('completed', onNativeCompleted);
-    });
-  }
-
-  writeValue(value: string): void {
-    void this.el.writeValue(value ?? '');
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/radio/radio.ts

@@ -1,115 +0,0 @@
-// Side-effect import: registers the `ks-radio` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-radio.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { KsBaseVariant, KsSize } from '@kraft.stitch/core';
-
-/**
- * Mirrors `KsRadioOption` exported by
- * `core/src/components/Inputs/radio/radio.tsx`. Duplicated locally — see
- * the note in `Buttons/button-group/button-group.ts` for why.
- */
-export interface KsRadioOption {
-  value: string;
-  label?: string;
-  disabled?: boolean;
-}
-
-/** DOM shape of the real `<ks-radio>` custom element, typed for the wrapper. */
-type KsRadioElement = HTMLElement & {
-  options: KsRadioOption[];
-  label: string;
-  name: string;
-  variant: KsBaseVariant;
-  size: KsSize;
-  disabled: boolean;
-  value: string;
-  writeValue(val: string): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-radio>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="v" (ksValueChange)="v = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-radio',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsRadioComponent, multi: true }],
-})
-export class KsRadioComponent implements ControlValueAccessor {
-  private readonly el: KsRadioElement;
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** List of options — the component renders a radio group */
-  readonly options = input<KsRadioOption[]>([]);
-
-  /** Label shown above the group */
-  readonly label = input('');
-
-  /** Name attribute shared across all radio inputs in the group */
-  readonly name = input('ks-radio');
-
-  /** Colour variant applied to the selected indicator */
-  readonly variant = input<KsBaseVariant>('brand');
-
-  /** Size variant — affects label text size */
-  readonly size = input<KsSize>('md');
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Initial/controlled selected value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input('');
-
-  /** Emits the selected value on every change. From the native `valueChange` event. */
-  readonly ksValueChange = output<string>();
-
-  constructor(ref: ElementRef<KsRadioElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.options = this.options()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.name = this.name()));
-    effect(() => (this.el.variant = this.variant()));
-    effect(() => (this.el.size = this.size()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<string>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
-  }
-
-  writeValue(value: string): void {
-    void this.el.writeValue(value ?? '');
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/rating/rating.ts

@@ -1,104 +0,0 @@
-// Side-effect import: registers the `ks-rating` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-rating.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { KsBaseSize } from '@kraft.stitch/core';
-
-/** DOM shape of the real `<ks-rating>` custom element, typed for the wrapper. */
-type KsRatingElement = HTMLElement & {
-  max: number;
-  size: KsBaseSize;
-  readOnly: boolean;
-  showLabel: boolean;
-  label: string;
-  disabled: boolean;
-  value: number;
-  writeValue(val: number): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-rating>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="v" (ksValueChange)="v = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-rating',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsRatingComponent, multi: true }],
-})
-export class KsRatingComponent implements ControlValueAccessor {
-  private readonly el: KsRatingElement;
-  private onChange: (value: number) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Total number of stars */
-  readonly max = input(5);
-
-  /** Size */
-  readonly size = input<KsBaseSize>('md');
-
-  /** Read-only / non-interactive */
-  readonly readOnly = input(false);
-
-  /** Show numeric label */
-  readonly showLabel = input(false);
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input(0);
-
-  /** Emits the newly-picked rating. From the native `valueChange` event. */
-  readonly ksValueChange = output<number>();
-
-  constructor(ref: ElementRef<KsRatingElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.max = this.max()));
-    effect(() => (this.el.size = this.size()));
-    effect(() => (this.el.readOnly = this.readOnly()));
-    effect(() => (this.el.showLabel = this.showLabel()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<number>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
-  }
-
-  writeValue(value: number): void {
-    void this.el.writeValue(value ?? 0);
-  }
-
-  registerOnChange(fn: (value: number) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/slider/slider.ts

@@ -1,121 +0,0 @@
-// Side-effect import: registers the `ks-slider` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-slider.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/** DOM shape of the real `<ks-slider>` custom element, typed for the wrapper. */
-type KsSliderElement = HTMLElement & {
-  min: number;
-  max: number;
-  step: number;
-  showTooltip: boolean;
-  showLabels: boolean;
-  label: string;
-  disabled: boolean;
-  value: number;
-  writeValue(val: number): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-slider>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
- * The native `ksBlur` event (already `ks`-prefixed by the Stencil author)
- * is re-exposed as `ksBlurred` — see `Inputs/input/input.ts` for why the
- * literal name can't be reused.
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="v" (ksValueChange)="v = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-slider',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsSliderComponent, multi: true }],
-})
-export class KsSliderComponent implements ControlValueAccessor {
-  private readonly el: KsSliderElement;
-  private onChange: (value: number) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Minimum value */
-  readonly min = input(0);
-
-  /** Maximum value */
-  readonly max = input(100);
-
-  /** Step increment */
-  readonly step = input(1);
-
-  /** Show value tooltip */
-  readonly showTooltip = input(true);
-
-  /** Show min/max labels */
-  readonly showLabels = input(false);
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input(0);
-
-  /** Emits the newly-picked value. From the native `valueChange` event. */
-  readonly ksValueChange = output<number>();
-
-  /** Emitted on native blur. From the native `ksBlur` event. */
-  readonly ksBlurred = output<void>();
-
-  constructor(ref: ElementRef<KsSliderElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.min = this.min()));
-    effect(() => (this.el.max = this.max()));
-    effect(() => (this.el.step = this.step()));
-    effect(() => (this.el.showTooltip = this.showTooltip()));
-    effect(() => (this.el.showLabels = this.showLabels()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<number>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-    };
-    const onNativeBlur = (): void => {
-      this.ksBlurred.emit();
-      this.onTouched();
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    this.el.addEventListener('ksBlur', onNativeBlur);
-    inject(DestroyRef).onDestroy(() => {
-      this.el.removeEventListener('valueChange', onNativeValueChange);
-      this.el.removeEventListener('ksBlur', onNativeBlur);
-    });
-  }
-
-  writeValue(value: number): void {
-    void this.el.writeValue(value ?? 0);
-  }
-
-  registerOnChange(fn: (value: number) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/switch/switch.ts

@@ -1,100 +0,0 @@
-// Side-effect import: registers the `ks-switch` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-switch.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import type { KsBaseVariant } from '@kraft.stitch/core';
-
-/** DOM shape of the real `<ks-switch>` custom element, typed for the wrapper. */
-type KsSwitchElement = HTMLElement & {
-  label: string;
-  variant: KsBaseVariant;
-  disabled: boolean;
-  checked: boolean;
-  labelPosition: 'left' | 'right';
-  formDisabled: boolean;
-  setDisabledState(isDisabled: boolean): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-switch>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. Unlike most other form-control wrappers here,
- * `<ks-switch>` has no `@Method() writeValue()`, so `writeValue` below
- * sets `el.checked` directly; it DOES expose a real
- * `@Method() setDisabledState()` (mirroring CVA exactly), which
- * `setDisabledState` below delegates to instead of setting a plain prop.
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[checked]="c" (ksCheckedChange)="c = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-switch',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsSwitchComponent, multi: true }],
-})
-export class KsSwitchComponent implements ControlValueAccessor {
-  private readonly el: KsSwitchElement;
-  private onChange: (value: boolean) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Label text */
-  readonly label = input('');
-
-  /** Colour variant */
-  readonly variant = input<KsBaseVariant>('brand');
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly checked = input(false);
-
-  /** Label position relative to the switch track */
-  readonly labelPosition = input<'left' | 'right'>('left');
-
-  /** Emits whenever `checked` changes. From the native `checkedChange` event. */
-  readonly ksCheckedChange = output<boolean>();
-
-  constructor(ref: ElementRef<KsSwitchElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.variant = this.variant()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.checked = this.checked()));
-    effect(() => (this.el.labelPosition = this.labelPosition()));
-
-    const onNativeCheckedChange = (event: Event): void => {
-      const detail = (event as CustomEvent<boolean>).detail;
-      this.ksCheckedChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('checkedChange', onNativeCheckedChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('checkedChange', onNativeCheckedChange));
-  }
-
-  writeValue(value: boolean): void {
-    this.el.checked = value ?? false;
-  }
-
-  registerOnChange(fn: (value: boolean) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  /** Delegates to `<ks-switch>`'s own `@Method() setDisabledState()`. */
-  setDisabledState(isDisabled: boolean): void {
-    void this.el.setDisabledState(isDisabled);
-  }
-}