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

package/src/lib/Dropdowns/listbox/listbox.ts

@@ -0,0 +1,116 @@
+// Side-effect import: registers the `ks-listbox` tag — see
+// `button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-listbox.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Mirrors `KsListBoxOption` exported by
+ * `core/src/components/Dropdowns/listbox/listbox.tsx`. Duplicated locally
+ * — see the note in `button-group/button-group.ts` for why.
+ */
+export interface KsListBoxOption {
+  value: string | number;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  /** Optional group key — used when `groupBy` is enabled */
+  group?: string;
+}
+
+export type KsListBoxValue = (string | number)[] | string | number;
+
+/** DOM shape of the real `<ks-listbox>` custom element, typed for the wrapper. */
+type KsListBoxElement = HTMLElement & {
+  options: KsListBoxOption[];
+  multi: boolean;
+  searchable: boolean;
+  disabled: boolean;
+  selected: (string | number)[];
+  groupBy: boolean;
+  writeValue(val: (string | number) | (string | number)[] | null): Promise<void>;
+};
+
+/**
+ * Angular wrapper around the `<ks-listbox>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `chips/chips.ts` for the full rationale (the
+ * native `selectedChange` 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:
+ * `[selected]="v" (ksSelectedChange)="v = $event"`.
+ *
+ * `template: ''` — no slot is exposed on `<ks-listbox>` itself.
+ */
+@Component({
+  selector: 'ks-listbox',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsListBoxComponent, multi: true }],
+})
+export class KsListBoxComponent implements ControlValueAccessor {
+  private readonly el: KsListBoxElement;
+  private onChange: (value: KsListBoxValue) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  /** Options list */
+  readonly options = input<KsListBoxOption[]>([]);
+
+  /** Allow multi-select */
+  readonly multi = input(false);
+
+  /** Show search box */
+  readonly searchable = input(false);
+
+  /** Disabled */
+  readonly disabled = input(false);
+
+  /** Enable group headers using the `group` field on each option */
+  readonly groupBy = input(false);
+
+  /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+  readonly selected = input<(string | number)[]>([]);
+
+  /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedChange` event. */
+  readonly ksSelectedChange = output<KsListBoxValue>();
+
+  constructor(ref: ElementRef<KsListBoxElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.options = this.options()));
+    effect(() => (this.el.multi = this.multi()));
+    effect(() => (this.el.searchable = this.searchable()));
+    effect(() => (this.el.disabled = this.disabled()));
+    effect(() => (this.el.groupBy = this.groupBy()));
+    effect(() => void this.el.writeValue(this.selected()));
+
+    const onNativeSelectedChange = (event: Event): void => {
+      const detail = (event as CustomEvent<KsListBoxValue>).detail;
+      this.ksSelectedChange.emit(detail);
+      this.onChange(detail);
+      this.onTouched();
+    };
+    this.el.addEventListener('selectedChange', onNativeSelectedChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('selectedChange', onNativeSelectedChange));
+  }
+
+  writeValue(value: KsListBoxValue | null): void {
+    void this.el.writeValue(value ?? null);
+  }
+
+  registerOnChange(fn: (value: KsListBoxValue) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.el.disabled = isDisabled;
+  }
+}

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;
+  }
+}