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

package/src/lib/Navigation/toolbar/toolbar.ts

@@ -1,60 +0,0 @@
-// Side-effect import: registers the `ks-toolbar` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-toolbar.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import type { KsVariant } from '@kraft.stitch/core';
-
-/**
- * Mirrors `KsToolbarItem` exported by
- * `core/src/components/Navigation/toolbar/toolbar.tsx`. Duplicated
- * locally — see the note in `Buttons/button-group/button-group.ts` for why.
- */
-export interface KsToolbarItem {
-  key: string;
-  icon?: string;
-  label?: string;
-  divider?: boolean;
-  disabled?: boolean;
-  active?: boolean;
-  variant?: KsVariant;
-}
-
-/** DOM shape of the real `<ks-toolbar>` custom element, typed for the wrapper. */
-type KsToolbarElement = HTMLElement & {
-  items: KsToolbarItem[];
-};
-
-/**
- * Angular wrapper around the `<ks-toolbar>` Stencil custom element.
- * Renders a real, consumer-facing default `<slot />` for extra trailing
- * content — same single unfiltered `<ng-content>` pass-through as
- * `Layout/card/card.ts`.
- */
-@Component({
-  selector: 'ks-toolbar',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsToolbarComponent {
-  private readonly el: KsToolbarElement;
-
-  /** Toolbar items */
-  readonly items = input<KsToolbarItem[]>([]);
-
-  /** Emits the clicked item key. From the native `itemClicked` event. */
-  readonly ksItemClicked = output<string>();
-
-  constructor(ref: ElementRef<KsToolbarElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.items = this.items()));
-
-    const onNativeItemClicked = (event: Event): void => {
-      this.ksItemClicked.emit((event as CustomEvent<string>).detail);
-    };
-    this.el.addEventListener('itemClicked', onNativeItemClicked);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('itemClicked', onNativeItemClicked));
-  }
-}

package/src/lib/Navigation/top-nav-bar/top-nav-bar.ts

@@ -1,71 +0,0 @@
-// Side-effect import: registers the `ks-top-nav-bar` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-top-nav-bar.js';
-
-import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
-
-/**
- * Mirrors the types exported by
- * `core/src/components/Navigation/top-nav-bar/top-nav-bar.tsx`.
- * Duplicated locally — see the note in `Buttons/button-group/button-group.ts` for why.
- */
-export type KsTopNavBarVariant = 'default' | 'underline' | 'pill';
-
-export interface KsTopNavBarItem {
-  key: string;
-  name: string;
-  iconClass?: string;
-  /** href to navigate to */
-  redirectLink: string;
-  activationFragment?: string;
-  disabled?: boolean;
-}
-
-/** DOM shape of the real `<ks-top-nav-bar>` custom element, typed for the wrapper. */
-type KsTopNavBarElement = HTMLElement & {
-  items: KsTopNavBarItem[];
-  variant: KsTopNavBarVariant;
-  showIcons: boolean;
-  showLabels: boolean;
-  label: string;
-};
-
-/**
- * Angular wrapper around the `<ks-top-nav-bar>` Stencil custom element.
- * Renders a real, consumer-facing default `<slot />` — same single
- * unfiltered `<ng-content>` pass-through as `Layout/card/card.ts`.
- */
-@Component({
-  selector: 'ks-top-nav-bar',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KsTopNavBarComponent {
-  private readonly el: KsTopNavBarElement;
-
-  /** Navigation items */
-  readonly items = input<KsTopNavBarItem[]>([]);
-
-  /** Visual style of the active indicator */
-  readonly variant = input<KsTopNavBarVariant>('default');
-
-  /** Show icon alongside label */
-  readonly showIcons = input(true);
-
-  /** Show label text */
-  readonly showLabels = input(true);
-
-  /** Aria label for the nav element */
-  readonly label = input('Top navigation');
-
-  constructor(ref: ElementRef<KsTopNavBarElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.items = this.items()));
-    effect(() => (this.el.variant = this.variant()));
-    effect(() => (this.el.showIcons = this.showIcons()));
-    effect(() => (this.el.showLabels = this.showLabels()));
-    effect(() => (this.el.label = this.label()));
-  }
-}

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

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

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

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

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

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

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

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

@@ -1,68 +0,0 @@
-/**
- * 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';
-export * from './lib/Buttons/split-button/split-button';
-
-/* ================= 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';
-export * from './lib/Inputs/rolling-number/rolling-number';
-
-/* ================= 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';
-
-
-/* ================= Theme service ================= */
-export * from './utils/theme-service';

package/src/utils/theme-service.ts

@@ -1,11 +0,0 @@
-import { provideAppInitializer } from "@angular/core";
-import { ThemeMode, themeService } from "@kraft.stitch/core";
-
-export function provideInBuildTheme(
-  themeName: string, startUpMode: ThemeMode
-) {
-  return provideAppInitializer(() => {
-    themeService.applyInBuildTheme(themeName);
-    themeService.setMode(startUpMode);
-  });
-}

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "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"
-  ]
-}