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

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

package/src/lib/Navigation/stepper/stepper.ts

@@ -0,0 +1,77 @@
+// Side-effect import: registers the `ks-stepper` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-stepper.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsStepItem` / `KsStepperOrientation` exported by
+ * `core/src/components/Navigation/stepper/stepper.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsStepItem {
+  key: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  optional?: boolean;
+}
+
+export type KsStepperOrientation = 'horizontal' | 'vertical';
+
+/** DOM shape of the real `<ks-stepper>` custom element, typed for the wrapper. */
+type KsStepperElement = HTMLElement & {
+  steps: KsStepItem[];
+  activeStep: number;
+  orientation: KsStepperOrientation;
+  clickable: boolean;
+  completedSteps: number[];
+};
+
+/**
+ * Angular wrapper around the `<ks-stepper>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-stepper',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsStepperComponent {
+  private readonly el: KsStepperElement;
+
+  /** Step definitions */
+  readonly steps = input<KsStepItem[]>([]);
+
+  /** Currently active step index (0-based) */
+  readonly activeStep = input(0);
+
+  /** Layout orientation */
+  readonly orientation = input<KsStepperOrientation>('horizontal');
+
+  /** Allow clicking steps to navigate */
+  readonly clickable = input(false);
+
+  /** Marks completed steps */
+  readonly completedSteps = input<number[]>([]);
+
+  /** Emits the new step index. From the native `stepChange` event. */
+  readonly ksStepChange = output<number>();
+
+  constructor(ref: ElementRef<KsStepperElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.steps = this.steps()));
+    effect(() => (this.el.activeStep = this.activeStep()));
+    effect(() => (this.el.orientation = this.orientation()));
+    effect(() => (this.el.clickable = this.clickable()));
+    effect(() => (this.el.completedSteps = this.completedSteps()));
+
+    const onNativeStepChange = (event: Event): void => {
+      this.ksStepChange.emit((event as CustomEvent<number>).detail);
+    };
+    this.el.addEventListener('stepChange', onNativeStepChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('stepChange', onNativeStepChange));
+  }
+}

package/src/lib/Navigation/tab/tab.ts

@@ -0,0 +1,71 @@
+// Side-effect import: registers the `ks-tab` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-tab.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsTabItem` exported by
+ * `core/src/components/Navigation/tab/tab.tsx`. Duplicated locally — see
+ * the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsTabItem {
+  key: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+/** DOM shape of the real `<ks-tab>` custom element, typed for the wrapper. */
+type KsTabElement = HTMLElement & {
+  tabs: KsTabItem[];
+  activeKey: string;
+  tabHeaderStyle: 'default' | 'expanded' | 'card' | 'button';
+};
+
+/**
+ * Angular wrapper around the `<ks-tab>` Stencil custom element.
+ *
+ * Same `ksPanel="key"` → named-`<slot>` strategy as
+ * `Navigation/accordion/accordion.ts` (NOT the native `slot="..."`
+ * attribute) — see that file's doc comment for the full explanation.
+ * Usage:
+ *   `<ks-tab [tabs]="tabs" activeKey="tab1">
+ *      <div ksPanel="tab1">Tab 1 content</div>
+ *      <div ksPanel="tab2">Tab 2 content</div>
+ *    </ks-tab>`
+ */
+@Component({
+  selector: 'ks-tab',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTabComponent {
+  private readonly el: KsTabElement;
+
+  /** List of tab definitions */
+  readonly tabs = input<KsTabItem[]>([]);
+
+  /** Key of the initially active tab */
+  readonly activeKey = input('');
+
+  readonly tabHeaderStyle = input<'default' | 'expanded' | 'card' | 'button'>('default');
+
+  /** Emits the key of the newly selected tab. From the native `tabChange` event. */
+  readonly ksTabChange = output<string>();
+
+  constructor(ref: ElementRef<KsTabElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.tabs = this.tabs()));
+    effect(() => (this.el.activeKey = this.activeKey()));
+    effect(() => (this.el.tabHeaderStyle = this.tabHeaderStyle()));
+
+    const onNativeTabChange = (event: Event): void => {
+      this.ksTabChange.emit((event as CustomEvent<string>).detail);
+    };
+    this.el.addEventListener('tabChange', onNativeTabChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('tabChange', onNativeTabChange));
+  }
+}