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

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

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

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

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

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

@@ -0,0 +1,115 @@
+// 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;
+  }
+}