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

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/rolling-number/rolling-number.ts

@@ -1,136 +0,0 @@
-// Side-effect import: registers the `ks-rolling-number` tag (and its
-// `ks-rolling-digit` dependency) — see `Buttons/button/button.ts` for the full
-// explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-rolling-number.js';
-
-import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
-import type { KsRollingDesign, KsRollingDirection, KsRollingGrouping, KsSize, KsTextTone } from '@kraft.stitch/core';
-
-export type { KsRollingDesign, KsRollingDirection, KsRollingGrouping };
-
-/**
- * DOM shape of the real `<ks-rolling-number>` custom element, typed for the wrapper.
- * `prefixText` / `suffixText` / `animated` are used on the element because
- * `prefix` and `animate` collide with native `Element` members.
- */
-type KsRollingNumberElement = HTMLElement & {
-  value: number | string | bigint;
-  prefixText: string;
-  suffixText: string;
-  startValue: number | string | bigint;
-  decimals: number | null;
-  separator: string;
-  decimalSeparator: string;
-  grouping: KsRollingGrouping;
-  duration: number;
-  delay: number;
-  easing: string;
-  stagger: number | null;
-  spins: number;
-  direction: KsRollingDirection;
-  design: KsRollingDesign;
-  size: KsSize;
-  tone: KsTextTone;
-  animated: boolean;
-  label: string;
-};
-
-/**
- * Angular wrapper around the `<ks-rolling-number>` Stencil custom element.
- * Purely presentational — no events, no `<slot>`, plain inputs only.
- *
- * @example
- * ```html
- * <ks-rolling-number [value]="total()" prefix="$" [decimals]="2" design="finance" />
- * ```
- */
-@Component({
-  selector: 'ks-rolling-number',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsRollingNumberComponent {
-  private readonly el: KsRollingNumberElement;
-
-  /** Target value. Use a string or bigint for numbers beyond 2^53 */
-  readonly value = input<number | string | bigint>(0);
-
-  /** Shown before the number ($, €, ₹ …) */
-  readonly prefix = input('');
-
-  /** Shown after the number (K, M, %, " users" …). Leading spaces are preserved */
-  readonly suffix = input('');
-
-  /** Value the reels roll from on first render */
-  readonly startValue = input<number | string | bigint>(0);
-
-  /** Fixed decimal places. Leave unset to infer from the value */
-  readonly decimals = input<number | null>(null);
-
-  /** Thousands separator. Empty string disables grouping */
-  readonly separator = input(',');
-
-  /** Decimal separator */
-  readonly decimalSeparator = input('.');
-
-  /** Digit grouping style (`indian` gives 12,34,567) */
-  readonly grouping = input<KsRollingGrouping>('standard');
-
-  /** Total roll time in ms, including the cascade between digits */
-  readonly duration = input(2000);
-
-  /** Delay before rolling starts, in ms */
-  readonly delay = input(0);
-
-  /** Any CSS easing. The default decelerates gently into place */
-  readonly easing = input('cubic-bezier(0.22, 1, 0.36, 1)');
-
-  /** Gap in ms between neighbouring digits stopping. Unset = automatic */
-  readonly stagger = input<number | null>(null);
-
-  /** Extra full revolutions each reel makes on the first roll */
-  readonly spins = input(1);
-
-  /** `auto` rolls up when the value grows and down when it shrinks */
-  readonly direction = input<KsRollingDirection>('auto');
-
-  /** Visual style */
-  readonly design = input<KsRollingDesign>('default');
-
-  /** Size */
-  readonly size = input<KsSize>('md');
-
-  /** Text colour */
-  readonly tone = input<KsTextTone>('primary');
-
-  /** Set false to skip animation entirely */
-  readonly animate = input(true);
-
-  /** Accessible name. Defaults to the formatted value */
-  readonly label = input('');
-
-  constructor(ref: ElementRef<KsRollingNumberElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.value = this.value()));
-    effect(() => (this.el.prefixText = this.prefix()));
-    effect(() => (this.el.suffixText = this.suffix()));
-    effect(() => (this.el.startValue = this.startValue()));
-    effect(() => (this.el.decimals = this.decimals()));
-    effect(() => (this.el.separator = this.separator()));
-    effect(() => (this.el.decimalSeparator = this.decimalSeparator()));
-    effect(() => (this.el.grouping = this.grouping()));
-    effect(() => (this.el.duration = this.duration()));
-    effect(() => (this.el.delay = this.delay()));
-    effect(() => (this.el.easing = this.easing()));
-    effect(() => (this.el.stagger = this.stagger()));
-    effect(() => (this.el.spins = this.spins()));
-    effect(() => (this.el.direction = this.direction()));
-    effect(() => (this.el.design = this.design()));
-    effect(() => (this.el.size = this.size()));
-    effect(() => (this.el.tone = this.tone()));
-    effect(() => (this.el.animated = this.animate()));
-    effect(() => (this.el.label = this.label()));
-  }
-}

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

package/src/lib/Inputs/textarea/textarea.ts

@@ -1,129 +0,0 @@
-// Side-effect import: registers the `ks-textarea` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-textarea.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-textarea>` custom element, typed for the wrapper. */
-type KsTextareaElement = HTMLElement & {
-  label: string;
-  placeholder: string;
-  rows: number;
-  maxLength: number;
-  showCounter: boolean;
-  autoResize: boolean;
-  disabled: boolean;
-  error: string;
-  hint: string;
-  value: string;
-};
-
-/**
- * Angular wrapper around the `<ks-textarea>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` (see `Inputs/input/input.ts`
- * for the equivalent no-`writeValue()`-method pattern this follows —
- * `writeValue` here sets `el.value` directly). The native `ksBlur` event
- * is re-exposed as `ksBlurred` for the same reason.
- *
- * 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-textarea',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsTextareaComponent, multi: true }],
-})
-export class KsTextareaComponent implements ControlValueAccessor {
-  private readonly el: KsTextareaElement;
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Textarea label */
-  readonly label = input('');
-
-  /** Placeholder text */
-  readonly placeholder = input('');
-
-  /** Number of visible rows */
-  readonly rows = input(3);
-
-  /** Maximum character count */
-  readonly maxLength = input(500);
-
-  /** Show character counter */
-  readonly showCounter = input(false);
-
-  /** Auto-resize based on content */
-  readonly autoResize = input(false);
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Error state */
-  readonly error = input('');
-
-  /** Helper/error text */
-  readonly hint = input('');
-
-  /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input('');
-
-  /** Emits the newly-typed value. From the native `valueChange` event. */
-  readonly ksValueChange = output<string>();
-
-  /** Emitted on native blur. From the native `ksBlur` event. */
-  readonly ksBlurred = output<void>();
-
-  constructor(ref: ElementRef<KsTextareaElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.placeholder = this.placeholder()));
-    effect(() => (this.el.rows = this.rows()));
-    effect(() => (this.el.maxLength = this.maxLength()));
-    effect(() => (this.el.showCounter = this.showCounter()));
-    effect(() => (this.el.autoResize = this.autoResize()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.error = this.error()));
-    effect(() => (this.el.hint = this.hint()));
-    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/theme-switch/theme-switch.ts

@@ -1,61 +0,0 @@
-// Side-effect import: registers the `ks-theme-switch` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-theme-switch.js';
-
-import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
-import { ThemeMode } from '@kraft.stitch/core';
-import type { Palette } from '@kraft.stitch/core';
-
-/** DOM shape of the real `<ks-theme-switch>` custom element, typed for the wrapper. */
-type KsThemeSwitchElement = HTMLElement & {
-  includeSystem: boolean;
-  includePalette: boolean;
-  onlyIcon: boolean;
-  palette: Palette;
-  mode: ThemeMode;
-};
-
-/**
- * Angular wrapper around the `<ks-theme-switch>` Stencil custom element.
- *
- * Purely presentational — it drives the shared `themeService` singleton
- * (see `core/src/utils/ks-theme.util.ts`) directly and dispatches no
- * events of its own, so this wrapper has plain inputs only, no outputs
- * and no `ControlValueAccessor`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-theme-switch',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsThemeSwitchComponent {
-  private readonly el: KsThemeSwitchElement;
-
-  /** When true the mode-toggle shows three options: System | Light | Dark. */
-  readonly includeSystem = input(true);
-
-  /** When true the colour-palette switcher is shown. */
-  readonly includePalette = input(false);
-
-  /** When true only icons are shown in the mode-toggle switch. */
-  readonly onlyIcon = input(false);
-
-  /** The palette that should be active on init. */
-  readonly palette = input<Palette>('ForestGreen');
-
-  /** The mode that should be active on init. */
-  readonly mode = input<ThemeMode>(ThemeMode.Light);
-
-  constructor(ref: ElementRef<KsThemeSwitchElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.includeSystem = this.includeSystem()));
-    effect(() => (this.el.includePalette = this.includePalette()));
-    effect(() => (this.el.onlyIcon = this.onlyIcon()));
-    effect(() => (this.el.palette = this.palette()));
-    effect(() => (this.el.mode = this.mode()));
-  }
-}