@kraft.stitch/angular 0.0.2 → 0.0.4

package/src/lib/Layout/sidebar/sidebar.ts

@@ -0,0 +1,97 @@
+// Side-effect import: registers the `ks-sidebar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-sidebar.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, model, output } from '@angular/core';
+
+export type KsSidebarPosition = 'left' | 'right';
+export type KsSidebarType = 'over' | 'push';
+
+/** DOM shape of the real `<ks-sidebar>` custom element, typed for the wrapper. */
+type KsSidebarElement = HTMLElement & {
+  position: KsSidebarPosition;
+  type: KsSidebarType;
+  open: boolean;
+  width: string;
+  target: string;
+  openPanel(): Promise<void>;
+  close(): Promise<void>;
+  toggle(): Promise<void>;
+};
+
+/**
+ * Angular wrapper around the `<ks-sidebar>` Stencil custom element.
+ *
+ * `open` is a plain input/output pair, not `ControlValueAccessor` — panel
+ * open state isn't form data. The native event is literally `openChange`,
+ * so (per the double-fire rule in `Buttons/button.ts`) the Angular output
+ * can't reuse that name; bind explicitly instead:
+ * `[open]="isOpen" (ksOpenChange)="isOpen = $event"`.
+ *
+ * `<ks-sidebar>`'s own `@Method()`s (`openPanel`/`close`/`toggle`) are
+ * exposed here as real passthrough methods — grab the component instance
+ * with `@ViewChild(KsSidebarComponent)` and call them directly.
+ *
+ * ## Slots
+ * Renders real `<slot name="header" />`, `<slot />` (default) and
+ * `<slot name="footer" />`. Same single unfiltered `<ng-content>`
+ * pass-through as `Layout/card/card.ts`.
+ */
+@Component({
+  selector: 'ks-sidebar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsSidebarComponent {
+  private readonly el: KsSidebarElement;
+
+  /** Which side the panel appears on */
+  readonly position = input<KsSidebarPosition>('left');
+
+  /** Behaviour type */
+  readonly type = input<KsSidebarType>('over');
+
+  /** Initial/controlled open state. Bind explicitly: `[open]="isOpen" (ksOpenChange)="isOpen = $event"`. */
+  readonly open = model(false);
+
+  /** Width of the sidebar panel */
+  readonly width = input('18rem');
+
+  /** Target element id (without #) or '' to use the page. */
+  readonly target = input('');
+
+  /** Fires whenever `open` changes. From the native `openChange` event. */
+  readonly ksOpenChange = output<boolean>();
+
+  constructor(ref: ElementRef<KsSidebarElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.position = this.position()));
+    effect(() => (this.el.type = this.type()));
+    effect(() => (this.el.open = this.open()));
+    effect(() => (this.el.width = this.width()));
+    effect(() => (this.el.target = this.target()));
+
+    const onNativeOpenChange = (event: Event): void => {
+      this.ksOpenChange.emit((event as CustomEvent<boolean>).detail);
+    };
+    this.el.addEventListener('openChange', onNativeOpenChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('openChange', onNativeOpenChange));
+  }
+
+  /** Passthrough to `<ks-sidebar>`'s own `@Method() openPanel()`. */
+  openPanel(): Promise<void> {
+    return this.el.openPanel();
+  }
+
+  /** Passthrough to `<ks-sidebar>`'s own `@Method() close()`. */
+  close(): Promise<void> {
+    return this.el.close();
+  }
+
+  /** Passthrough to `<ks-sidebar>`'s own `@Method() toggle()`. */
+  toggle(): Promise<void> {
+    return this.el.toggle();
+  }
+}

package/src/lib/Layout/table/table.ts

@@ -0,0 +1,81 @@
+// Side-effect import: registers the `ks-table` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-table.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** Mirrors the inline unions used by `core/src/components/Layout/table/table.tsx`. */
+export type KsTableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+export type KsTableSize = 'sm' | 'md' | 'lg';
+
+/** DOM shape of the real `<ks-table>` custom element, typed for the wrapper. */
+type KsTableElement = HTMLElement & {
+  data: Record<string, unknown>[];
+  columns: string[];
+  columnLabels: Record<string, string>;
+  variant: KsTableVariant;
+  size: KsTableSize;
+  caption: string;
+  scrollable: boolean;
+  hoverable: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-table>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-table',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTableComponent {
+  private readonly el: KsTableElement;
+
+  /** Array of objects to render as table rows */
+  readonly data = input<Record<string, unknown>[]>([]);
+
+  /** Optional explicit column order; defaults to keys of the first row */
+  readonly columns = input<string[]>([]);
+
+  /** Optional custom column header labels: { key: 'Display Label' } */
+  readonly columnLabels = input<Record<string, string>>({});
+
+  /** Visual variant */
+  readonly variant = input<KsTableVariant>('default');
+
+  /** Row size */
+  readonly size = input<KsTableSize>('md');
+
+  /** Show a caption / title above the table */
+  readonly caption = input('');
+
+  /** Make the table horizontally scrollable on overflow */
+  readonly scrollable = input(true);
+
+  /** Highlight row on hover */
+  readonly hoverable = input(true);
+
+  /** Emits the clicked row's data. From the native `rowClick` event. */
+  readonly ksRowClick = output<Record<string, unknown>>();
+
+  constructor(ref: ElementRef<KsTableElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.data = this.data()));
+    effect(() => (this.el.columns = this.columns()));
+    effect(() => (this.el.columnLabels = this.columnLabels()));
+    effect(() => (this.el.variant = this.variant()));
+    effect(() => (this.el.size = this.size()));
+    effect(() => (this.el.caption = this.caption()));
+    effect(() => (this.el.scrollable = this.scrollable()));
+    effect(() => (this.el.hoverable = this.hoverable()));
+
+    const onNativeRowClick = (event: Event): void => {
+      this.ksRowClick.emit((event as CustomEvent<Record<string, unknown>>).detail);
+    };
+    this.el.addEventListener('rowClick', onNativeRowClick);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('rowClick', onNativeRowClick));
+  }
+}

package/src/lib/Layout/tooltip/tooltip.ts

@@ -0,0 +1,48 @@
+// Side-effect import: registers the `ks-tooltip` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-tooltip.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsPosition } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-tooltip>` custom element, typed for the wrapper. */
+type KsTooltipElement = HTMLElement & {
+  text: string;
+  position: KsPosition;
+  visible: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-tooltip>` Stencil custom element.
+ *
+ * `<ks-tooltip>` renders a real, consumer-facing default `<slot />` for
+ * the element the tooltip is attached to. Same single unfiltered
+ * `<ng-content>` pass-through as `Layout/card/card.ts` — wrap the
+ * trigger element as `<ks-tooltip text="Hi"><button>Hover me</button></ks-tooltip>`.
+ */
+@Component({
+  selector: 'ks-tooltip',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTooltipComponent {
+  private readonly el: KsTooltipElement;
+
+  /** Tooltip text */
+  readonly text = input('');
+
+  /** Preferred placement */
+  readonly position = input<KsPosition>('top');
+
+  /** Show tooltip on demand (true = always visible) — leave false for hover behaviour */
+  readonly visible = input(false);
+
+  constructor(ref: ElementRef<KsTooltipElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.text = this.text()));
+    effect(() => (this.el.position = this.position()));
+    effect(() => (this.el.visible = this.visible()));
+  }
+}

package/src/lib/Navigation/accordion/accordion.ts

@@ -0,0 +1,80 @@
+// Side-effect import: registers the `ks-accordion` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-accordion.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsAccordionItem` exported by
+ * `core/src/components/Navigation/accordion/accordion.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsAccordionItem {
+  key: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+/** DOM shape of the real `<ks-accordion>` custom element, typed for the wrapper. */
+type KsAccordionElement = HTMLElement & {
+  items: KsAccordionItem[];
+  multi: boolean;
+  openKeys: string[];
+};
+
+/**
+ * Angular wrapper around the `<ks-accordion>` Stencil custom element.
+ *
+ * ## Panel content — `ksPanel`, NOT a native `slot` attribute
+ * The Stencil source maps each light-DOM child carrying a `ksPanel="key"`
+ * attribute to a matching named `<slot>` internally (see
+ * `core/src/utils/ks-slots.util.ts`'s `getKsPanelMap()`) — it does NOT use
+ * the browser-native `slot="..."` attribute consumers would use for
+ * `Layout/card/card.ts`-style components. `template: '<ng-content></ng-content>'`
+ * still applies the same way: it's a single, unfiltered pass-through of
+ * whatever this Angular component's own template projects, as real
+ * light-DOM children of the `<ks-accordion>` host — the wrapper does no
+ * filtering itself, it just needs to exist so the projected content
+ * becomes real children for Stencil's `getKsPanelMap()` scan to find.
+ * Usage:
+ *   `<ks-accordion [items]="items">
+ *      <div ksPanel="profile">Profile body…</div>
+ *      <div ksPanel="settings">Settings body…</div>
+ *    </ks-accordion>`
+ */
+@Component({
+  selector: 'ks-accordion',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsAccordionComponent {
+  private readonly el: KsAccordionElement;
+
+  /** List of accordion panel definitions */
+  readonly items = input<KsAccordionItem[]>([]);
+
+  /** Allow multiple panels open simultaneously */
+  readonly multi = input(false);
+
+  /** Keys that should be open by default */
+  readonly openKeys = input<string[]>([]);
+
+  /** Emits the key that was toggled. From the native `toggled` event. */
+  readonly ksToggled = output<string>();
+
+  constructor(ref: ElementRef<KsAccordionElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.items = this.items()));
+    effect(() => (this.el.multi = this.multi()));
+    effect(() => (this.el.openKeys = this.openKeys()));
+
+    const onNativeToggled = (event: Event): void => {
+      this.ksToggled.emit((event as CustomEvent<string>).detail);
+    };
+    this.el.addEventListener('toggled', onNativeToggled);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('toggled', onNativeToggled));
+  }
+}

package/src/lib/Navigation/breadcrumb/breadcrumb.ts

@@ -0,0 +1,58 @@
+// Side-effect import: registers the `ks-breadcrumb` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-breadcrumb.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseSize } from '@kraft.stitch/core';
+
+/**
+ * Mirrors `KsBreadcrumbItem` exported by
+ * `core/src/components/Navigation/breadcrumb/breadcrumb.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsBreadcrumbItem {
+  label: string;
+  /** Route path or href — omit for the active (last) item */
+  href?: string;
+  /** Optional icon class */
+  icon?: string;
+}
+
+/** DOM shape of the real `<ks-breadcrumb>` custom element, typed for the wrapper. */
+type KsBreadcrumbElement = HTMLElement & {
+  items: KsBreadcrumbItem[];
+  separator: string;
+  size: KsBaseSize;
+};
+
+/**
+ * Angular wrapper around the `<ks-breadcrumb>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-breadcrumb',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsBreadcrumbComponent {
+  private readonly el: KsBreadcrumbElement;
+
+  /** Ordered list of breadcrumb items */
+  readonly items = input<KsBreadcrumbItem[]>([]);
+
+  /** Separator character or symbol */
+  readonly separator = input('/');
+
+  /** Size */
+  readonly size = input<KsBaseSize>('lg');
+
+  constructor(ref: ElementRef<KsBreadcrumbElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.items = this.items()));
+    effect(() => (this.el.separator = this.separator()));
+    effect(() => (this.el.size = this.size()));
+  }
+}

package/src/lib/Navigation/carousel/carousel.ts

@@ -0,0 +1,70 @@
+// Side-effect import: registers the `ks-carousel` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-carousel.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsCarouselSlide` exported by
+ * `core/src/components/Navigation/carousel/carousel.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsCarouselSlide {
+  key: string;
+  imageUrl?: string;
+  alt?: string;
+  label?: string;
+  caption?: string;
+}
+
+/** DOM shape of the real `<ks-carousel>` custom element, typed for the wrapper. */
+type KsCarouselElement = HTMLElement & {
+  slides: KsCarouselSlide[];
+  autoPlay: number;
+  showControls: boolean;
+  showDots: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-carousel>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-carousel',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsCarouselComponent {
+  private readonly el: KsCarouselElement;
+
+  /** Slides to display */
+  readonly slides = input<KsCarouselSlide[]>([]);
+
+  /** Auto-play interval in ms (0 = disabled) */
+  readonly autoPlay = input(0);
+
+  /** Show prev/next arrow controls */
+  readonly showControls = input(true);
+
+  /** Show dot indicators */
+  readonly showDots = input(true);
+
+  /** Emits the current slide index on change. From the native `slideChange` event. */
+  readonly ksSlideChange = output<number>();
+
+  constructor(ref: ElementRef<KsCarouselElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.slides = this.slides()));
+    effect(() => (this.el.autoPlay = this.autoPlay()));
+    effect(() => (this.el.showControls = this.showControls()));
+    effect(() => (this.el.showDots = this.showDots()));
+
+    const onNativeSlideChange = (event: Event): void => {
+      this.ksSlideChange.emit((event as CustomEvent<number>).detail);
+    };
+    this.el.addEventListener('slideChange', onNativeSlideChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('slideChange', onNativeSlideChange));
+  }
+}

package/src/lib/Navigation/context-menu/context-menu.ts

@@ -0,0 +1,79 @@
+// Side-effect import: registers the `ks-context-menu` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-context-menu.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsContextMenuItem` / `KsContextMenuPosition` exported by
+ * `core/src/components/Navigation/context-menu/context-menu.tsx`.
+ * Duplicated locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsContextMenuItem {
+  key: string;
+  label?: string;
+  icon?: string;
+  divider?: boolean;
+  disabled?: boolean;
+  danger?: boolean;
+}
+
+export interface KsContextMenuPosition {
+  x: number;
+  y: number;
+}
+
+/** DOM shape of the real `<ks-context-menu>` custom element, typed for the wrapper. */
+type KsContextMenuElement = HTMLElement & {
+  items: KsContextMenuItem[];
+  open(pos: KsContextMenuPosition): Promise<void>;
+  close(): Promise<void>;
+};
+
+/**
+ * Angular wrapper around the `<ks-context-menu>` Stencil custom element.
+ *
+ * `<ks-context-menu>`'s own `@Method()`s (`open(pos)`/`close()`) are
+ * exposed here as real passthrough methods — grab the component instance
+ * with `@ViewChild(KsContextMenuComponent)` and call them directly, e.g.
+ * `onContextMenu(e: MouseEvent) { menu.open({ x: e.clientX, y: e.clientY }); }`.
+ *
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-context-menu',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsContextMenuComponent {
+  private readonly el: KsContextMenuElement;
+
+  /** Menu items */
+  readonly items = input<KsContextMenuItem[]>([]);
+
+  /** Emits the clicked item key. From the native `itemClicked` event. */
+  readonly ksItemClicked = output<string>();
+
+  constructor(ref: ElementRef<KsContextMenuElement>) {
+    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));
+  }
+
+  /** Passthrough to `<ks-context-menu>`'s own `@Method() open(pos)`. */
+  open(pos: KsContextMenuPosition): Promise<void> {
+    return this.el.open(pos);
+  }
+
+  /** Passthrough to `<ks-context-menu>`'s own `@Method() close()`. */
+  close(): Promise<void> {
+    return this.el.close();
+  }
+}

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

@@ -0,0 +1,72 @@
+// Side-effect import: registers the `ks-nav-bar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-nav-bar.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+
+/**
+ * Mirrors the types exported by
+ * `core/src/components/Navigation/nav-bar/nav-bar.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsNavBarItem {
+  key: string;
+  name: string;
+  iconClass: string;
+  /** href to navigate to */
+  redirectLink: string;
+  activationFragment?: string;
+  disabled?: boolean;
+}
+
+export type KsNavBarSection = 'top' | 'mid' | 'bottom';
+
+export interface KsNavBarSectionItem extends KsNavBarItem {
+  section: KsNavBarSection;
+}
+
+export type KsNavBarMode = 'iconOnly' | 'hoverToExpand' | 'alwaysOpen';
+
+/** DOM shape of the real `<ks-nav-bar>` custom element, typed for the wrapper. */
+type KsNavBarElement = HTMLElement & {
+  items: KsNavBarSectionItem[];
+  mode: KsNavBarMode;
+  iconWidth: string;
+  expandedWidth: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-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-nav-bar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsNavBarComponent {
+  private readonly el: KsNavBarElement;
+
+  /** All nav items with their section assignment */
+  readonly items = input<KsNavBarSectionItem[]>([]);
+
+  /** Expansion mode */
+  readonly mode = input<KsNavBarMode>('iconOnly');
+
+  /** Width of the icon-only rail */
+  readonly iconWidth = input('3.5rem');
+
+  /** Width of the expanded label panel */
+  readonly expandedWidth = input('13rem');
+
+  constructor(ref: ElementRef<KsNavBarElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.items = this.items()));
+    effect(() => (this.el.mode = this.mode()));
+    effect(() => (this.el.iconWidth = this.iconWidth()));
+    effect(() => (this.el.expandedWidth = this.expandedWidth()));
+  }
+}

package/src/lib/Navigation/pagination/pagination.ts

@@ -0,0 +1,82 @@
+// Side-effect import: registers the `ks-pagination` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-pagination.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** DOM shape of the real `<ks-pagination>` custom element, typed for the wrapper. */
+type KsPaginationElement = HTMLElement & {
+  total: number;
+  pageSize: number;
+  currentPage: number;
+  showPageSize: boolean;
+  pageSizeOptions: number[];
+  showQuickJumper: boolean;
+  maxPageButtons: number;
+};
+
+/**
+ * Angular wrapper around the `<ks-pagination>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-pagination',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsPaginationComponent {
+  private readonly el: KsPaginationElement;
+
+  /** Total number of items */
+  readonly total = input(0);
+
+  /** Items per page */
+  readonly pageSize = input(10);
+
+  /** Current page (1-indexed) */
+  readonly currentPage = input(1);
+
+  /** Show page size selector */
+  readonly showPageSize = input(false);
+
+  /** Available page sizes */
+  readonly pageSizeOptions = input<number[]>([10, 20, 50, 100]);
+
+  /** Show quick jumper */
+  readonly showQuickJumper = input(false);
+
+  /** Maximum number of page buttons to show */
+  readonly maxPageButtons = input(7);
+
+  /** Emits when page changes. From the native `pageChange` event. */
+  readonly ksPageChange = output<number>();
+
+  /** Emits when page size changes. From the native `pageSizeChange` event. */
+  readonly ksPageSizeChange = output<number>();
+
+  constructor(ref: ElementRef<KsPaginationElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.total = this.total()));
+    effect(() => (this.el.pageSize = this.pageSize()));
+    effect(() => (this.el.currentPage = this.currentPage()));
+    effect(() => (this.el.showPageSize = this.showPageSize()));
+    effect(() => (this.el.pageSizeOptions = this.pageSizeOptions()));
+    effect(() => (this.el.showQuickJumper = this.showQuickJumper()));
+    effect(() => (this.el.maxPageButtons = this.maxPageButtons()));
+
+    const onNativePageChange = (event: Event): void => {
+      this.ksPageChange.emit((event as CustomEvent<number>).detail);
+    };
+    const onNativePageSizeChange = (event: Event): void => {
+      this.ksPageSizeChange.emit((event as CustomEvent<number>).detail);
+    };
+    this.el.addEventListener('pageChange', onNativePageChange);
+    this.el.addEventListener('pageSizeChange', onNativePageSizeChange);
+    inject(DestroyRef).onDestroy(() => {
+      this.el.removeEventListener('pageChange', onNativePageChange);
+      this.el.removeEventListener('pageSizeChange', onNativePageSizeChange);
+    });
+  }
+}