@kraft.stitch/angular 0.0.1 → 0.0.2

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

package/src/lib/Inputs/uploader/uploader.ts

@@ -1,97 +0,0 @@
-// Side-effect import: registers the `ks-uploader` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-uploader.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-
-/**
- * Mirrors `KsUploadedFile` exported by
- * `core/src/components/Inputs/uploader/uploader.tsx`. Duplicated locally
- * — see the note in `Buttons/button-group/button-group.ts` for why.
- */
-export interface KsUploadedFile {
-  file: File;
-  name: string;
-  size: number;
-  type: string;
-  /** Data-URL preview (images only, when previewImages is true) */
-  preview?: string;
-}
-
-/** DOM shape of the real `<ks-uploader>` custom element, typed for the wrapper. */
-type KsUploaderElement = HTMLElement & {
-  accept: string;
-  multiple: boolean;
-  maxSize: number;
-  previewImages: boolean;
-  label: string;
-  disabled: boolean;
-};
-
-/**
- * Angular wrapper around the `<ks-uploader>` Stencil custom element.
- *
- * No two-way "value" here — the Stencil source has no `writeValue()`
- * method and no single controlled prop, just a plain `filesChange`/
- * `filesRejected` event pair, so no `ControlValueAccessor` is implemented
- * (unlike the other `Inputs/*` wrappers).
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-uploader',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsUploaderComponent {
-  private readonly el: KsUploaderElement;
-
-  /** Accepted MIME types / extensions, e.g. "image/*,.pdf" */
-  readonly accept = input('');
-
-  /** Allow selecting multiple files */
-  readonly multiple = input(false);
-
-  /** Maximum file size in bytes (0 = no limit) */
-  readonly maxSize = input(0);
-
-  /** Show image thumbnails for image/* files */
-  readonly previewImages = input(true);
-
-  /** Custom drop-zone label */
-  readonly label = input('or Drop files here');
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Emits the accepted files whenever the selection changes. From the native `filesChange` event. */
-  readonly ksFilesChange = output<KsUploadedFile[]>();
-
-  /** Emits rejected files (wrong type / over size limit). From the native `filesRejected` event. */
-  readonly ksFilesRejected = output<File[]>();
-
-  constructor(ref: ElementRef<KsUploaderElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.accept = this.accept()));
-    effect(() => (this.el.multiple = this.multiple()));
-    effect(() => (this.el.maxSize = this.maxSize()));
-    effect(() => (this.el.previewImages = this.previewImages()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.disabled = this.disabled()));
-
-    const onNativeFilesChange = (event: Event): void => {
-      this.ksFilesChange.emit((event as CustomEvent<KsUploadedFile[]>).detail);
-    };
-    const onNativeFilesRejected = (event: Event): void => {
-      this.ksFilesRejected.emit((event as CustomEvent<File[]>).detail);
-    };
-    this.el.addEventListener('filesChange', onNativeFilesChange);
-    this.el.addEventListener('filesRejected', onNativeFilesRejected);
-    inject(DestroyRef).onDestroy(() => {
-      this.el.removeEventListener('filesChange', onNativeFilesChange);
-      this.el.removeEventListener('filesRejected', onNativeFilesRejected);
-    });
-  }
-}

package/src/lib/Layout/avatar/avatar.ts

@@ -1,66 +0,0 @@
-// Side-effect import: registers the `ks-avatar` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-avatar.js';
-
-import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
-import type { KsBaseVariant, KsSize } from '@kraft.stitch/core';
-
-/** DOM shape of the real `<ks-avatar>` custom element, typed for the wrapper. */
-type KsAvatarElement = HTMLElement & {
-  src: string;
-  alt: string;
-  initials: string;
-  icon: string;
-  size: KsSize;
-  variant: KsBaseVariant;
-  square: boolean;
-};
-
-/**
- * Angular wrapper around the `<ks-avatar>` Stencil custom element.
- *
- * Purely presentational — no events, no `<slot>` in the wrapped Stencil
- * render, plain inputs only (same shape as `Inputs/theme-switch/theme-switch.ts`).
- */
-@Component({
-  selector: 'ks-avatar',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsAvatarComponent {
-  private readonly el: KsAvatarElement;
-
-  /** Image URL — takes priority over initials */
-  readonly src = input('');
-
-  /** Alt text for the image */
-  readonly alt = input('');
-
-  /** Initials shown when no image (e.g. "KS") */
-  readonly initials = input('');
-
-  /** Icon class shown when neither src nor initials */
-  readonly icon = input('');
-
-  /** Size */
-  readonly size = input<KsSize>('md');
-
-  /** Colour variant — used when showing initials or icon */
-  readonly variant = input<KsBaseVariant>('brand');
-
-  /** Circular (default) or rounded-square */
-  readonly square = input(false);
-
-  constructor(ref: ElementRef<KsAvatarElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.src = this.src()));
-    effect(() => (this.el.alt = this.alt()));
-    effect(() => (this.el.initials = this.initials()));
-    effect(() => (this.el.icon = this.icon()));
-    effect(() => (this.el.size = this.size()));
-    effect(() => (this.el.variant = this.variant()));
-    effect(() => (this.el.square = this.square()));
-  }
-}

package/src/lib/Layout/card/card.ts

@@ -1,88 +0,0 @@
-// Side-effect import: registers the `ks-card` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-card.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-
-/** Mirrors the inline union used by `core/src/components/Layout/card/card.tsx`. */
-export type KsCardVariant = 'default' | 'outlined' | 'elevated' | 'flat';
-
-/** DOM shape of the real `<ks-card>` custom element, typed for the wrapper. */
-type KsCardElement = HTMLElement & {
-  label: string;
-  cardTitle: string;
-  subtitle: string;
-  imageUrl: string;
-  imageAlt: string;
-  iconClass: string;
-  variant: KsCardVariant;
-};
-
-/**
- * Angular wrapper around the `<ks-card>` Stencil custom element.
- *
- * ## Slots
- * Unlike the Buttons/Calendars/Dropdowns wrappers, `<ks-card>` renders
- * real, consumer-facing `<slot name="header" />`, `<slot />` (default) and
- * `<slot name="footer" />` in its scoped (non-shadow) Stencil `render()`.
- * `template: '<ng-content></ng-content>'` (a single unfiltered pass-through,
- * not per-slot `<ng-content select="...">`) projects ALL of this Angular
- * component's content as real light-DOM children of the `<ks-card>` host
- * node; Stencil's own scoped-slot relocation logic (see `shadow: false,
- * scoped: true` on the Stencil class) then places each child into the
- * right native `<slot>` based on that child's own `slot="header"` /
- * `slot="footer"` attribute — same as plain HTML, nothing Angular-specific
- * needed beyond forwarding the projected content through untouched.
- * Usage: `<ks-card><ks-header slot="header">…</ks-header>Body<ks-footer slot="footer">…</ks-footer></ks-card>`.
- */
-@Component({
-  selector: 'ks-card',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsCardComponent {
-  private readonly el: KsCardElement;
-
-  /** Card title */
-  readonly label = input('');
-
-  /** Card title (Angular input name was `title`; aliased to avoid clashing with the native `title` attribute/tooltip). */
-  readonly cardTitle = input('');
-
-  /** Subtitle / subheading */
-  readonly subtitle = input('');
-
-  /** URL for header image */
-  readonly imageUrl = input('');
-
-  /** Alt text for image */
-  readonly imageAlt = input('');
-
-  /** SVG icon class */
-  readonly iconClass = input('');
-
-  /** Card visual variant */
-  readonly variant = input<KsCardVariant>('default');
-
-  /** Emits when clicked (only when clickable). From the native `cardClick` event. */
-  readonly ksCardClick = output<MouseEvent>();
-
-  constructor(ref: ElementRef<KsCardElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.cardTitle = this.cardTitle()));
-    effect(() => (this.el.subtitle = this.subtitle()));
-    effect(() => (this.el.imageUrl = this.imageUrl()));
-    effect(() => (this.el.imageAlt = this.imageAlt()));
-    effect(() => (this.el.iconClass = this.iconClass()));
-    effect(() => (this.el.variant = this.variant()));
-
-    const onNativeCardClick = (event: Event): void => {
-      this.ksCardClick.emit((event as CustomEvent<MouseEvent>).detail);
-    };
-    this.el.addEventListener('cardClick', onNativeCardClick);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('cardClick', onNativeCardClick));
-  }
-}

package/src/lib/Layout/code-view/code-view.ts

@@ -1,77 +0,0 @@
-// Side-effect import: registers the `ks-code-view` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-code-view.js';
-
-import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
-
-/** Mirrors the inline union used by `core/src/components/Layout/code-view/code-view.tsx`. */
-export type KsCodeViewLanguage = 'html' | 'css' | 'typescript' | 'javascript' | 'json' | 'bash' | 'text';
-
-/**
- * Mirrors `ActionButtonsConfig` exported by
- * `core/src/components/Layout/code-view/code-view.tsx`. Duplicated
- * locally — see the note in `Buttons/button-group/button-group.ts` for why.
- */
-export interface ActionButtonsConfig {
-  expand?: boolean;
-  code?: boolean;
-}
-
-/** DOM shape of the real `<ks-code-view>` custom element, typed for the wrapper. */
-type KsCodeViewElement = HTMLElement & {
-  code: string;
-  language: KsCodeViewLanguage;
-  label: string;
-  maxHeight: string;
-  showHeader: boolean;
-  collapsed: boolean;
-  actionButtonConfig: ActionButtonsConfig;
-};
-
-/**
- * Angular wrapper around the `<ks-code-view>` Stencil custom element.
- * Purely presentational — no events, no `<slot>` in the wrapped Stencil
- * render, plain inputs only.
- */
-@Component({
-  selector: 'ks-code-view',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsCodeViewComponent {
-  private readonly el: KsCodeViewElement;
-
-  /** The source code string to display */
-  readonly code = input('');
-
-  /** Language hint shown in the header badge */
-  readonly language = input<KsCodeViewLanguage>('html');
-
-  /** Optional title shown in the header */
-  readonly label = input('');
-
-  /** Max visible height before scroll kicks in (CSS value, e.g. '20rem') */
-  readonly maxHeight = input('24rem');
-
-  /** Show the header bar with language badge & copy button */
-  readonly showHeader = input(true);
-
-  /** Whether the code block is currently collapsed */
-  readonly collapsed = input(false);
-
-  /** Whether the code block is to show and hide buttons */
-  readonly actionButtonConfig = input<ActionButtonsConfig>({ expand: true, code: true });
-
-  constructor(ref: ElementRef<KsCodeViewElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.code = this.code()));
-    effect(() => (this.el.language = this.language()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.maxHeight = this.maxHeight()));
-    effect(() => (this.el.showHeader = this.showHeader()));
-    effect(() => (this.el.collapsed = this.collapsed()));
-    effect(() => (this.el.actionButtonConfig = this.actionButtonConfig()));
-  }
-}

package/src/lib/Layout/dialog/dialog.ts

@@ -1,80 +0,0 @@
-// Side-effect import: registers the `ks-dialog` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-dialog.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-
-/** Mirrors the inline union used by `core/src/components/Layout/dialog/dialog.tsx`. */
-export type KsDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-/** DOM shape of the real `<ks-dialog>` custom element, typed for the wrapper. */
-type KsDialogElement = HTMLElement & {
-  open: boolean;
-  label: string;
-  hideClose: boolean;
-  persistent: boolean;
-  size: KsDialogSize;
-  target: string;
-};
-
-/**
- * Angular wrapper around the `<ks-dialog>` Stencil custom element.
- *
- * `open` is a plain input, not `ControlValueAccessor` — a dialog's open
- * state isn't form data. For the same reason described throughout this
- * repo, the output can't be named `openChange` (it would collide with the
- * native `openChange`-style close event — see below), so bind explicitly:
- * `[open]="isOpen" (ksCloseDialog)="isOpen = false"`.
- *
- * ## Slots
- * `<ks-dialog>` renders real, consumer-facing `<slot />` (default) and
- * `<slot name="footer" />`. Same single unfiltered `<ng-content>`
- * pass-through as `Layout/card/card.ts` — see that file's doc comment for
- * the full explanation of how native `slot="footer"` attributes on
- * projected children route into the right Stencil `<slot>`.
- */
-@Component({
-  selector: 'ks-dialog',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsDialogComponent {
-  private readonly el: KsDialogElement;
-
-  /** Whether the dialog is open */
-  readonly open = input(false);
-
-  /** Dialog title */
-  readonly label = input('');
-
-  /** Hide the built-in close (✕) button */
-  readonly hideClose = input(false);
-
-  /** Prevent closing by clicking the backdrop */
-  readonly persistent = input(false);
-
-  /** Panel size */
-  readonly size = input<KsDialogSize>('md');
-
-  /** Target element id (without #), or '' to use `<body>`. When set, the overlay covers only that element and the dialog is centred inside it. */
-  readonly target = input('');
-
-  /** Emits when the dialog requests close. From the native `closeDialog` event. */
-  readonly ksCloseDialog = output<void>();
-
-  constructor(ref: ElementRef<KsDialogElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.open = this.open()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.hideClose = this.hideClose()));
-    effect(() => (this.el.persistent = this.persistent()));
-    effect(() => (this.el.size = this.size()));
-    effect(() => (this.el.target = this.target()));
-
-    const onNativeCloseDialog = (): void => this.ksCloseDialog.emit();
-    this.el.addEventListener('closeDialog', onNativeCloseDialog);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('closeDialog', onNativeCloseDialog));
-  }
-}

package/src/lib/Layout/not-found/not-found.ts

@@ -1,73 +0,0 @@
-// Side-effect import: registers the `ks-not-found` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-not-found.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-
-/** DOM shape of the real `<ks-not-found>` custom element, typed for the wrapper. */
-type KsNotFoundElement = HTMLElement & {
-  buttonLabel: string;
-  homeHref: string;
-  countdown: number;
-  showActionButtons: boolean;
-  code: string;
-  message: string;
-  description: string;
-};
-
-/**
- * Angular wrapper around the `<ks-not-found>` Stencil custom element.
- *
- * `<ks-not-found>` renders a real, consumer-facing default `<slot />`.
- * Same single unfiltered `<ng-content>` pass-through as
- * `Layout/card/card.ts` — see that file's doc comment for the full
- * explanation of how projected content routes into the Stencil `<slot>`.
- */
-@Component({
-  selector: 'ks-not-found',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsNotFoundComponent {
-  private readonly el: KsNotFoundElement;
-
-  /** Label shown on the redirect button (default: "Go to Home") */
-  readonly buttonLabel = input('Go to Home');
-
-  /** href the button and auto-redirect navigate to (default: "./") */
-  readonly homeHref = input('./');
-
-  /** Seconds before auto-redirect fires. Set to `0` to disable the countdown. */
-  readonly countdown = input(30);
-
-  readonly showActionButtons = input(true);
-
-  /** Custom heading (default: "404") */
-  readonly code = input('404');
-
-  /** Custom sub-heading (default: "Page not found") */
-  readonly message = input('Page not found');
-
-  /** Custom description below the heading */
-  readonly description = input("The page you're looking for doesn't exist or has been moved.");
-
-  /** Emitted just before the auto-redirect navigates away. From the native `redirecting` event. */
-  readonly ksRedirecting = output<void>();
-
-  constructor(ref: ElementRef<KsNotFoundElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.buttonLabel = this.buttonLabel()));
-    effect(() => (this.el.homeHref = this.homeHref()));
-    effect(() => (this.el.countdown = this.countdown()));
-    effect(() => (this.el.showActionButtons = this.showActionButtons()));
-    effect(() => (this.el.code = this.code()));
-    effect(() => (this.el.message = this.message()));
-    effect(() => (this.el.description = this.description()));
-
-    const onNativeRedirecting = (): void => this.ksRedirecting.emit();
-    this.el.addEventListener('redirecting', onNativeRedirecting);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('redirecting', onNativeRedirecting));
-  }
-}