@kraft.stitch/angular 0.0.4-beta.1 → 0.0.4-beta.2

package/src/lib/Inputs/checkbox/checkbox.ts

@@ -1,126 +0,0 @@
-// Side-effect import: registers the `ks-checkbox` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-checkbox.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Mirrors `KsCheckboxOption` exported by
- * `core/src/components/Inputs/checkbox/checkbox.tsx`. Duplicated locally
- * — see the note in `Buttons/button-group/button-group.ts` for why.
- */
-export interface KsCheckboxOption {
-  value: string;
-  label?: string;
-  disabled?: boolean;
-  checked?: boolean;
-}
-
-/** DOM shape of the real `<ks-checkbox>` custom element, typed for the wrapper. */
-type KsCheckboxElement = HTMLElement & {
-  label: string;
-  options: KsCheckboxOption[];
-  disabled: boolean;
-  checked: boolean;
-  selected: string[];
-  writeValue(val: unknown): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-checkbox>` Stencil custom element.
- *
- * Supports two modes, mirroring the Stencil source:
- * - **Single** mode (no `options`): two-way bind `checked` (boolean).
- * - **Group** mode (`options` set): two-way bind `selected` (string[]).
- *
- * Two-way binding for either mode is via `ControlValueAccessor` — use
- * `[(ngModel)]`/`formControlName` and it works for whichever mode is
- * active (see `Buttons/chips/chips.ts` for the full rationale on why CVA
- * is used instead of reusing a native event name as an Angular output).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[checked]="c" (ksCheckedChange)="c = $event"` or
- * `[selected]="s" (ksSelectedChange)="s = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-checkbox',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsCheckboxComponent, multi: true }],
-})
-export class KsCheckboxComponent implements ControlValueAccessor {
-  private readonly el: KsCheckboxElement;
-  private onChange: (value: unknown) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Label shown next to the control (single mode) */
-  readonly label = input('');
-
-  /** Optional set of multiple options (multi-select / group mode) */
-  readonly options = input<KsCheckboxOption[]>([]);
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Single mode: initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly checked = input(false);
-
-  /** Group mode: initial/controlled selected values. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly selected = input<string[]>([]);
-
-  /** Emits whenever `checked` changes (single mode). From the native `checkedChange` event. */
-  readonly ksCheckedChange = output<boolean>();
-
-  /** Emits whenever `selected` changes (group mode). From the native `selectedChange` event. */
-  readonly ksSelectedChange = output<string[]>();
-
-  constructor(ref: ElementRef<KsCheckboxElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.options = this.options()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.checked = this.checked()));
-    effect(() => (this.el.selected = this.selected()));
-
-    const onNativeCheckedChange = (event: Event): void => {
-      const detail = (event as CustomEvent<boolean>).detail;
-      this.ksCheckedChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    const onNativeSelectedChange = (event: Event): void => {
-      const detail = (event as CustomEvent<string[]>).detail;
-      this.ksSelectedChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('checkedChange', onNativeCheckedChange);
-    this.el.addEventListener('selectedChange', onNativeSelectedChange);
-    inject(DestroyRef).onDestroy(() => {
-      this.el.removeEventListener('checkedChange', onNativeCheckedChange);
-      this.el.removeEventListener('selectedChange', onNativeSelectedChange);
-    });
-  }
-
-  /** `ControlValueAccessor` — called by `ngModel`/`formControl` to push a value in (either mode). */
-  writeValue(value: unknown): void {
-    void this.el.writeValue(value);
-  }
-
-  registerOnChange(fn: (value: unknown) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/colour-picker/colour-picker.ts

@@ -1,101 +0,0 @@
-// Side-effect import: registers the `ks-colour-picker` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-colour-picker.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/** Mirrors the inline union used by `core/src/components/Inputs/colour-picker/colour-picker.tsx`. */
-export type KsColourPickerVariant = 'input' | 'swatch';
-
-const DEFAULT_SWATCHES = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#64748b', '#000000', '#ffffff'];
-
-/** DOM shape of the real `<ks-colour-picker>` custom element, typed for the wrapper. */
-type KsColourPickerElement = HTMLElement & {
-  label: string;
-  variant: KsColourPickerVariant;
-  swatches: string[];
-  disabled: boolean;
-  value: string;
-  writeValue(val: string): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-colour-picker>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale
- * (the native `valueChange` event can't be reused verbatim as an Angular
- * output name without a double-fire risk).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="hex" (ksValueChange)="hex = $event"`.
- *
- * `template: ''` — the panel is rendered into the internal
- * `<ks-overlay-field>`; there is no slot on `<ks-colour-picker>` itself.
- */
-@Component({
-  selector: 'ks-colour-picker',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsColourPickerComponent, multi: true }],
-})
-export class KsColourPickerComponent implements ControlValueAccessor {
-  private readonly el: KsColourPickerElement;
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Picker UI variant */
-  readonly variant = input<KsColourPickerVariant>('input');
-
-  /** Preset swatch colours */
-  readonly swatches = input<string[]>(DEFAULT_SWATCHES);
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Initial/controlled hex value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input('#3b82f6');
-
-  /** Emits the newly-picked hex colour. From the native `valueChange` event. */
-  readonly ksValueChange = output<string>();
-
-  constructor(ref: ElementRef<KsColourPickerElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.variant = this.variant()));
-    effect(() => (this.el.swatches = this.swatches()));
-    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 ?? '#3b82f6');
-  }
-
-  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/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;
-  }
-}