@kraft.stitch/angular 0.0.0-stage → 0.0.1

package/src/lib/Navigation/tree-view/tree-view.ts

@@ -0,0 +1,75 @@
+// Side-effect import: registers the `ks-tree-view` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-tree-view.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsTreeNode` exported by
+ * `core/src/components/Navigation/tree-view/tree-view.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsTreeNode {
+  key: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  children?: KsTreeNode[];
+}
+
+/** DOM shape of the real `<ks-tree-view>` custom element, typed for the wrapper. */
+type KsTreeViewElement = HTMLElement & {
+  nodes: KsTreeNode[];
+  expandedKeys: string[];
+  multi: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-tree-view>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-tree-view',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTreeViewComponent {
+  private readonly el: KsTreeViewElement;
+
+  /** Tree data */
+  readonly nodes = input<KsTreeNode[]>([]);
+
+  /** Keys of nodes that start expanded */
+  readonly expandedKeys = input<string[]>([]);
+
+  /** Allow selecting multiple nodes */
+  readonly multi = input(false);
+
+  /** Emits key(s) when selection changes. From the native `selectionChanged` event. */
+  readonly ksSelectionChanged = output<string | string[]>();
+
+  /** Emits when a node is expanded/collapsed. From the native `expandChange` event. */
+  readonly ksExpandChange = output<{ key: string; expanded: boolean }>();
+
+  constructor(ref: ElementRef<KsTreeViewElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.nodes = this.nodes()));
+    effect(() => (this.el.expandedKeys = this.expandedKeys()));
+    effect(() => (this.el.multi = this.multi()));
+
+    const onNativeSelectionChanged = (event: Event): void => {
+      this.ksSelectionChanged.emit((event as CustomEvent<string | string[]>).detail);
+    };
+    const onNativeExpandChange = (event: Event): void => {
+      this.ksExpandChange.emit((event as CustomEvent<{ key: string; expanded: boolean }>).detail);
+    };
+    this.el.addEventListener('selectionChanged', onNativeSelectionChanged);
+    this.el.addEventListener('expandChange', onNativeExpandChange);
+    inject(DestroyRef).onDestroy(() => {
+      this.el.removeEventListener('selectionChanged', onNativeSelectionChanged);
+      this.el.removeEventListener('expandChange', onNativeExpandChange);
+    });
+  }
+}

package/src/lib/Notification/badge/badge.ts

@@ -0,0 +1,55 @@
+// Side-effect import: registers the `ks-badge` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-badge.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseSize, KsBaseVariant } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-badge>` custom element, typed for the wrapper. */
+type KsBadgeElement = HTMLElement & {
+  label: string;
+  variant: KsBaseVariant;
+  size: KsBaseSize;
+  dot: boolean;
+  pill: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-badge>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-badge',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsBadgeComponent {
+  private readonly el: KsBadgeElement;
+
+  /** Display text */
+  readonly label = input('');
+
+  /** Colour variant */
+  readonly variant = input<KsBaseVariant>('brand');
+
+  /** Size */
+  readonly size = input<KsBaseSize>('md');
+
+  /** Show a dot instead of text */
+  readonly dot = input(false);
+
+  /** Pill (fully rounded) shape */
+  readonly pill = input(true);
+
+  constructor(ref: ElementRef<KsBadgeElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.label = this.label()));
+    effect(() => (this.el.variant = this.variant()));
+    effect(() => (this.el.size = this.size()));
+    effect(() => (this.el.dot = this.dot()));
+    effect(() => (this.el.pill = this.pill()));
+  }
+}

package/src/lib/Notification/loader/loader.ts

@@ -0,0 +1,41 @@
+// Side-effect import: registers the `ks-loader` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-loader.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import { LoaderStateEnum } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-loader>` custom element, typed for the wrapper. */
+type KsLoaderElement = HTMLElement & {
+  state: LoaderStateEnum;
+};
+
+/**
+ * Angular wrapper around the `<ks-loader>` Stencil custom element.
+ *
+ * Renders real, consumer-facing named slots — `loading`, `empty`,
+ * `empty-action`, `error`, `error-action` — plus a default (unnamed)
+ * slot for the `Success` state. Same single unfiltered
+ * `<ng-content>` pass-through as `Layout/card/card.ts`: give each
+ * projected child its own native `slot="loading"` / `slot="empty"` /
+ * `slot="empty-action"` / `slot="error"` / `slot="error-action"`
+ * attribute (or none, for the default/success slot).
+ */
+@Component({
+  selector: 'ks-loader',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsLoaderComponent {
+  private readonly el: KsLoaderElement;
+
+  /** Current state */
+  readonly state = input<LoaderStateEnum>(LoaderStateEnum.Loading);
+
+  constructor(ref: ElementRef<KsLoaderElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.state = this.state()));
+  }
+}

package/src/lib/Notification/message/message.ts

@@ -0,0 +1,60 @@
+// Side-effect import: registers the `ks-message` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-message.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+import type { KsBaseVariant } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-message>` custom element, typed for the wrapper. */
+type KsMessageElement = HTMLElement & {
+  text: string;
+  icon: string;
+  variant: KsBaseVariant;
+  dismissible: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-message>` Stencil custom element.
+ *
+ * `<ks-message>` renders a default `<slot />` only as a fallback when
+ * `text` is empty — same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts`; omit `text` and project content instead if
+ * richer markup is needed.
+ */
+@Component({
+  selector: 'ks-message',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsMessageComponent {
+  private readonly el: KsMessageElement;
+
+  /** Main message text */
+  readonly text = input('');
+
+  /** Optional icon class (e.g. Material Icon or Font Awesome) */
+  readonly icon = input('');
+
+  /** Colour variant */
+  readonly variant = input<KsBaseVariant>('info');
+
+  /** Show a dismiss (×) button */
+  readonly dismissible = input(false);
+
+  /** Emits when the message is dismissed. From the native `dismissed` event. */
+  readonly ksDismissed = output<void>();
+
+  constructor(ref: ElementRef<KsMessageElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.text = this.text()));
+    effect(() => (this.el.icon = this.icon()));
+    effect(() => (this.el.variant = this.variant()));
+    effect(() => (this.el.dismissible = this.dismissible()));
+
+    const onNativeDismissed = (): void => this.ksDismissed.emit();
+    this.el.addEventListener('dismissed', onNativeDismissed);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('dismissed', onNativeDismissed));
+  }
+}

package/src/lib/Notification/progress/progress.ts

@@ -0,0 +1,65 @@
+// Side-effect import: registers the `ks-progress` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-progress.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseSize, KsBaseVariant } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-progress>` custom element, typed for the wrapper. */
+type KsProgressElement = HTMLElement & {
+  value: number;
+  max: number;
+  showLabel: boolean;
+  variant: KsBaseVariant;
+  size: KsBaseSize;
+  indeterminate: boolean;
+  label: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-progress>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-progress',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsProgressComponent {
+  private readonly el: KsProgressElement;
+
+  /** Progress value (0-100) */
+  readonly value = input(0);
+
+  /** Maximum value */
+  readonly max = input(100);
+
+  /** Show percentage label */
+  readonly showLabel = input(false);
+
+  /** Progress variant */
+  readonly variant = input<KsBaseVariant>('brand');
+
+  /** Progress size */
+  readonly size = input<KsBaseSize>('md');
+
+  /** Indeterminate/loading state */
+  readonly indeterminate = input(false);
+
+  /** Optional label text */
+  readonly label = input('');
+
+  constructor(ref: ElementRef<KsProgressElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.value = this.value()));
+    effect(() => (this.el.max = this.max()));
+    effect(() => (this.el.showLabel = this.showLabel()));
+    effect(() => (this.el.variant = this.variant()));
+    effect(() => (this.el.size = this.size()));
+    effect(() => (this.el.indeterminate = this.indeterminate()));
+    effect(() => (this.el.label = this.label()));
+  }
+}

package/src/lib/Notification/spinner/spinner.ts

@@ -0,0 +1,50 @@
+// Side-effect import: registers the `ks-spinner` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-spinner.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseVariant, KsSize } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-spinner>` custom element, typed for the wrapper. */
+type KsSpinnerElement = HTMLElement & {
+  size: KsSize;
+  variant: KsBaseVariant;
+  text: string;
+  centered: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-spinner>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-spinner',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsSpinnerComponent {
+  private readonly el: KsSpinnerElement;
+
+  /** Spinner size */
+  readonly size = input<KsSize>('md');
+
+  /** Spinner variant/color */
+  readonly variant = input<KsBaseVariant>('brand');
+
+  /** Optional text to display */
+  readonly text = input('');
+
+  /** Center the spinner in container */
+  readonly centered = input(false);
+
+  constructor(ref: ElementRef<KsSpinnerElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.size = this.size()));
+    effect(() => (this.el.variant = this.variant()));
+    effect(() => (this.el.text = this.text()));
+    effect(() => (this.el.centered = this.centered()));
+  }
+}

package/src/lib/Notification/toast/toast.ts

@@ -0,0 +1,56 @@
+// Side-effect import: registers the `ks-toast-outlet` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-toast-outlet.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsToastPosition } from '@kraft.stitch/core';
+
+/**
+ * Re-exported so Angular consumers don't need a separate `@kraft.stitch/core`
+ * import for the imperative side of the toast system. `toastStore` is a
+ * plain module-level singleton (see `core/src/utils/ks-toast.store.ts`)
+ * — there's no DI/service wrapper needed; call
+ * `toastStore.show('Saved!', { variant: 'success' })` directly from any
+ * component or service, and any mounted `<ks-toast>` (`KsToastComponent`)
+ * on the page will pick it up via its internal subscription.
+ */
+export { toastStore } from '@kraft.stitch/core';
+export type { KsToast, KsToastPosition } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-toast-outlet>` custom element, typed for the wrapper. */
+type KsToastOutletElement = HTMLElement & {
+  position: KsToastPosition;
+};
+
+/**
+ * Angular wrapper around the `<ks-toast-outlet>` Stencil custom element.
+ * Named `KsToastOutletComponent` (matching the literal tag, not just
+ * `KsToastComponent`) for consistency with the React wrapper, which must
+ * avoid colliding with the re-exported `KsToast` *data* interface above
+ * (TypeScript disallows a value and a type export sharing one identifier
+ * from the same module) — see `react/src/components/Notification/toast/toast.tsx`.
+ * `<ks-toast-outlet position="top-right" />` is all a consumer needs; add
+ * one per screen corner they want to stack toasts in.
+ *
+ * No `<slot>`, no events — it purely subscribes to the shared
+ * `toastStore` singleton (re-exported above) and renders whatever's
+ * enqueued.
+ */
+@Component({
+  selector: 'ks-toast-outlet',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsToastOutletComponent {
+  private readonly el: KsToastOutletElement;
+
+  /** Where on screen to stack toasts */
+  readonly position = input<KsToastPosition>('top-right');
+
+  constructor(ref: ElementRef<KsToastOutletElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.position = this.position()));
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,62 @@
+/**
+ * Public API surface of `@ks/wc-angular`.
+ */
+
+/* ================= Buttons ================= */
+export * from './lib/Buttons/button/button';
+export * from './lib/Buttons/button-group/button-group';
+export * from './lib/Buttons/chips/chips';
+export * from './lib/Buttons/fab/fab';
+
+/* ================= Calendars ================= */
+export * from './lib/Calendars/datepicker/datepicker';
+export * from './lib/Calendars/daterange/daterange';
+export * from './lib/Calendars/timepicker/timepicker';
+
+/* ================= Dropdowns ================= */
+export * from './lib/Dropdowns/dropdown/dropdown';
+export * from './lib/Dropdowns/listbox/listbox';
+
+/* ================= Inputs ================= */
+export * from './lib/Inputs/checkbox/checkbox';
+export * from './lib/Inputs/colour-picker/colour-picker';
+export * from './lib/Inputs/input/input';
+export * from './lib/Inputs/otp-input/otp-input';
+export * from './lib/Inputs/radio/radio';
+export * from './lib/Inputs/rating/rating';
+export * from './lib/Inputs/slider/slider';
+export * from './lib/Inputs/switch/switch';
+export * from './lib/Inputs/textarea/textarea';
+export * from './lib/Inputs/theme-switch/theme-switch';
+export * from './lib/Inputs/uploader/uploader';
+
+/* ================= Layout ================= */
+export * from './lib/Layout/avatar/avatar';
+export * from './lib/Layout/card/card';
+export * from './lib/Layout/code-view/code-view';
+export * from './lib/Layout/dialog/dialog';
+export * from './lib/Layout/not-found/not-found';
+export * from './lib/Layout/sidebar/sidebar';
+export * from './lib/Layout/table/table';
+export * from './lib/Layout/tooltip/tooltip';
+
+/* ================= Navigation ================= */
+export * from './lib/Navigation/accordion/accordion';
+export * from './lib/Navigation/breadcrumb/breadcrumb';
+export * from './lib/Navigation/carousel/carousel';
+export * from './lib/Navigation/context-menu/context-menu';
+export * from './lib/Navigation/nav-bar/nav-bar';
+export * from './lib/Navigation/pagination/pagination';
+export * from './lib/Navigation/stepper/stepper';
+export * from './lib/Navigation/tab/tab';
+export * from './lib/Navigation/toolbar/toolbar';
+export * from './lib/Navigation/top-nav-bar/top-nav-bar';
+export * from './lib/Navigation/tree-view/tree-view';
+
+/* ================= Notification ================= */
+export * from './lib/Notification/badge/badge';
+export * from './lib/Notification/loader/loader';
+export * from './lib/Notification/message/message';
+export * from './lib/Notification/progress/progress';
+export * from './lib/Notification/spinner/spinner';
+export * from './lib/Notification/toast/toast';

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "lib": [
+      "dom",
+      "es2022"
+    ],
+    "declaration": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableIvy": true,
+    "strictTemplates": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}