@kouji-ui/core 0.1.1 → 0.1.2

package/src/command-palette/command-palette.spec.ts

@@ -1,349 +0,0 @@
-import { Component, signal } from '@angular/core';
-import { render, fireEvent } from '@testing-library/angular';
-import { describe, expect, it } from 'vitest';
-
-import { kjSubstringFilter, kjFuzzyFilter, stripDiacritics } from './command-palette.filters';
-import { KjCommandPalette } from './command-palette';
-import { KjCommandInput } from './command-input';
-import { KjCommandList } from './command-list';
-import { KjCommandItem } from './command-item';
-import { KjCommandEmpty } from './command-empty';
-import { KjCommandGroup } from './command-group';
-import { KjCommandSeparator } from './command-separator';
-import { KjCommandPaletteTrigger } from './command-palette-trigger';
-import { KjCommandPaletteDialog } from './command-palette-dialog';
-
-// ── Integration tests (must come first to ensure TestBed is alive) ─────────
-
-const imports = [
-  KjCommandPalette, KjCommandInput, KjCommandList,
-  KjCommandItem, KjCommandEmpty, KjCommandGroup, KjCommandSeparator,
-];
-
-const basicTemplate = `
-  <div kjCommandPalette>
-    <input kjCommandInput type="search" placeholder="Search…" />
-    <div kjCommandList>
-      <div kjCommandEmpty>No results</div>
-      <button kjCommandItem kjValue="settings">Settings</button>
-      <button kjCommandItem kjValue="profile">Profile</button>
-      <button kjCommandItem kjValue="logout">Logout</button>
-    </div>
-  </div>
-`;
-
-describe('KjCommandPalette — item registration', () => {
-
-  it('renders all items initially', async () => {
-    const { getAllByRole } = await render(basicTemplate, { imports });
-    const options = getAllByRole('option');
-    expect(options).toHaveLength(3);
-  });
-
-  it('input has role=combobox', async () => {
-    const { getByRole } = await render(basicTemplate, { imports });
-    expect(getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('list has role=listbox', async () => {
-    const { getByRole } = await render(basicTemplate, { imports });
-    expect(getByRole('listbox')).toBeInTheDocument();
-  });
-
-  it('input aria-controls points to listbox id', async () => {
-    const { getByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    const list = getByRole('listbox');
-    expect(input.getAttribute('aria-controls')).toBe(list.id);
-  });
-
-  it('empty state is hidden initially (items visible)', async () => {
-    const { getByText } = await render(basicTemplate, { imports });
-    const empty = getByText('No results');
-    expect(empty).toHaveAttribute('hidden');
-  });
-});
-
-describe('KjCommandPalette — filtering', () => {
-
-  it('hides items that do not match the query', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    fireEvent.input(input, { target: { value: 'set' } });
-    const options = getAllByRole('option');
-    const visibleOptions = options.filter(o => !o.hasAttribute('hidden'));
-    expect(visibleOptions).toHaveLength(1);
-    expect(visibleOptions[0]).toHaveTextContent('Settings');
-  });
-
-  it('shows empty state when nothing matches', async () => {
-    const { getByRole, getByText } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    fireEvent.input(input, { target: { value: 'zzznomatch' } });
-    const empty = getByText('No results');
-    expect(empty).not.toHaveAttribute('hidden');
-  });
-
-  it('clears query on Escape when query is non-empty', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox') as HTMLInputElement;
-    fireEvent.input(input, { target: { value: 'set' } });
-    fireEvent.keyDown(input, { key: 'Escape' });
-    const options = getAllByRole('option');
-    const visible = options.filter(o => !o.hasAttribute('hidden'));
-    expect(visible).toHaveLength(3);
-  });
-});
-
-describe('KjCommandPalette — moveActive', () => {
-
-  it('ArrowDown moves active to second item', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    const options = getAllByRole('option');
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    expect(options[1]).toHaveAttribute('data-active');
-  });
-
-  it('ArrowUp wraps to last item from first', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    const options = getAllByRole('option');
-    fireEvent.keyDown(input, { key: 'ArrowUp' });
-    expect(options[options.length - 1]).toHaveAttribute('data-active');
-  });
-
-  it('does not reset highlight when items change without a query change (async results)', async () => {
-    @Component({
-      standalone: true,
-      imports,
-      template: `
-        <div kjCommandPalette>
-          <input kjCommandInput type="search" placeholder="Search…" />
-          <div kjCommandList>
-            @for (id of ids(); track id) {
-              <button type="button" kjCommandItem [kjValue]="id">{{ id }}</button>
-            }
-          </div>
-        </div>
-      `,
-    })
-    class DynamicItemsHost {
-      readonly ids = signal(['a', 'b']);
-    }
-    const { getByRole, getAllByRole, fixture } = await render(DynamicItemsHost);
-    const input = getByRole('combobox');
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    expect(getAllByRole('option')[1]).toHaveAttribute('data-active');
-
-    fixture.componentInstance.ids.set(['a', 'b', 'c']);
-    fixture.detectChanges();
-
-    expect(getAllByRole('option')[1]).toHaveAttribute('data-active');
-  });
-
-  it('End key jumps to last item', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    const options = getAllByRole('option');
-    fireEvent.keyDown(input, { key: 'End' });
-    expect(options[options.length - 1]).toHaveAttribute('data-active');
-  });
-
-  it('Home key jumps to first item', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    const options = getAllByRole('option');
-    fireEvent.keyDown(input, { key: 'End' });
-    fireEvent.keyDown(input, { key: 'Home' });
-    expect(options[0]).toHaveAttribute('data-active');
-  });
-});
-
-describe('KjCommandPalette — activation', () => {
-
-  it('first item is active by default (kjAutoActivateFirst)', async () => {
-    const { getAllByRole } = await render(basicTemplate, { imports });
-    const options = getAllByRole('option');
-    expect(options[0]).toHaveAttribute('data-active');
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[1]).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('click on item sets it as active', async () => {
-    const { getByRole } = await render(basicTemplate, { imports });
-    const item = getByRole('option', { name: 'Profile' });
-    fireEvent.click(item);
-    expect(item).toHaveAttribute('data-active');
-  });
-
-  it('aria-activedescendant on input points to active item id', async () => {
-    const { getByRole, getAllByRole } = await render(basicTemplate, { imports });
-    const input = getByRole('combobox');
-    const options = getAllByRole('option');
-    const activeId = options[0].id;
-    expect(input).toHaveAttribute('aria-activedescendant', activeId);
-  });
-});
-
-describe('KjCommandPalette — groups', () => {
-
-  const groupTemplate = `
-    <div kjCommandPalette>
-      <input kjCommandInput type="search" />
-      <div kjCommandList>
-        <div kjCommandGroup>
-          <button kjCommandItem kjValue="settings">Settings</button>
-        </div>
-        <div kjCommandSeparator></div>
-        <div kjCommandGroup>
-          <button kjCommandItem kjValue="profile">Profile</button>
-        </div>
-      </div>
-    </div>
-  `;
-
-  it('groups are visible when items match', async () => {
-    const { getAllByRole } = await render(groupTemplate, { imports });
-    const groups = getAllByRole('group');
-    groups.forEach(g => expect(g).not.toHaveAttribute('hidden'));
-  });
-
-  it('group hides when all items filtered out', async () => {
-    const { getByRole, getAllByRole } = await render(groupTemplate, { imports });
-    const input = getByRole('combobox');
-    fireEvent.input(input, { target: { value: 'settings' } });
-    const groups = getAllByRole('group', { hidden: true });
-    expect(groups[1]).toHaveAttribute('hidden');
-    expect(groups[0]).not.toHaveAttribute('hidden');
-  });
-});
-
-// ── Filter unit tests (pure functions, no Angular context needed) ──────────
-
-describe('stripDiacritics', () => {
-  it('removes diacritics', () => {
-    expect(stripDiacritics('café')).toBe('cafe');
-    expect(stripDiacritics('naïve')).toBe('naive');
-    expect(stripDiacritics('résumé')).toBe('resume');
-  });
-
-  it('leaves plain ASCII unchanged', () => {
-    expect(stripDiacritics('hello')).toBe('hello');
-  });
-});
-
-describe('kjSubstringFilter', () => {
-  it('returns 1 for empty query (all visible)', () => {
-    expect(kjSubstringFilter('', ['Settings'])).toBe(1);
-    expect(kjSubstringFilter('', [])).toBe(1);
-  });
-
-  it('returns 1 for substring match', () => {
-    expect(kjSubstringFilter('set', ['Settings'])).toBe(1);
-  });
-
-  it('is case-insensitive', () => {
-    expect(kjSubstringFilter('SETTINGS', ['settings'])).toBe(1);
-  });
-
-  it('is diacritic-insensitive', () => {
-    expect(kjSubstringFilter('cafe', ['café'])).toBe(1);
-    expect(kjSubstringFilter('café', ['cafe'])).toBe(1);
-  });
-
-  it('returns 0 for no match', () => {
-    expect(kjSubstringFilter('xyz', ['Settings'])).toBe(0);
-  });
-
-  it('matches against any haystack', () => {
-    expect(kjSubstringFilter('dark', ['Toggle theme', 'dark mode'])).toBe(1);
-    expect(kjSubstringFilter('dark', ['Toggle theme', 'light mode'])).toBe(0);
-  });
-});
-
-describe('KjCommandPaletteTrigger / KjCommandPaletteDialog — overlay primitives', () => {
-
-  it('trigger has aria-haspopup="dialog" and aria-expanded="false" initially', async () => {
-    @Component({
-      selector: 'kj-cp-host',
-      standalone: true,
-      imports: [KjCommandPaletteTrigger, KjCommandPaletteDialog],
-      template: `
-        <button kjCommandPaletteTrigger #t="kjCommandPaletteTrigger">Open</button>
-        <kj-command-palette-dialog [kjFor]="t">Palette</kj-command-palette-dialog>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const btn = container.querySelector('button')!;
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('panel has role="dialog" and is hidden while closed', async () => {
-    @Component({
-      selector: 'kj-cp-host',
-      standalone: true,
-      imports: [KjCommandPaletteTrigger, KjCommandPaletteDialog],
-      template: `
-        <button kjCommandPaletteTrigger #t="kjCommandPaletteTrigger">Open</button>
-        <kj-command-palette-dialog [kjFor]="t">Palette</kj-command-palette-dialog>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const panel = container.querySelector('kj-command-palette-dialog') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('dialog');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-
-  it('mod+k hotkey dispatch toggles the trigger', async () => {
-    @Component({
-      selector: 'kj-cp-host',
-      standalone: true,
-      imports: [KjCommandPaletteTrigger, KjCommandPaletteDialog],
-      template: `
-        <button kjCommandPaletteTrigger #t="kjCommandPaletteTrigger">Open</button>
-        <kj-command-palette-dialog [kjFor]="t">Palette</kj-command-palette-dialog>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const btn = container.querySelector('button')!;
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-    // Hotkey strategy installs a document-level listener; dispatch a matching event.
-    const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
-    document.dispatchEvent(new KeyboardEvent('keydown', {
-      key: 'k',
-      metaKey: isMac,
-      ctrlKey: !isMac,
-      bubbles: true,
-    }));
-    // The aria-expanded attribute reflects the controller's open state.
-    // Verify the trigger element exists and remains a valid overlay trigger
-    // after the document-level hotkey listener fires.
-    expect(btn.hasAttribute('aria-expanded')).toBe(true);
-  });
-});
-
-describe('kjFuzzyFilter', () => {
-  it('returns 1 for empty query', () => {
-    expect(kjFuzzyFilter('', ['Settings'])).toBe(1);
-  });
-
-  it('returns 1 for exact characters in order', () => {
-    expect(kjFuzzyFilter('gth', ['git checkout'])).toBe(1);
-  });
-
-  it('returns 0 when chars not in order', () => {
-    expect(kjFuzzyFilter('zt', ['settings'])).toBe(0);
-  });
-
-  it('is case-insensitive', () => {
-    expect(kjFuzzyFilter('SET', ['settings'])).toBe(1);
-  });
-
-  it('returns 0 when no haystack matches', () => {
-    expect(kjFuzzyFilter('xyz', ['settings', 'profile'])).toBe(0);
-  });
-});

package/src/command-palette/command-palette.ts

@@ -1,204 +0,0 @@
-import {
-  Directive,
-  booleanAttribute,
-  computed,
-  contentChildren,
-  effect,
-  forwardRef,
-  inject,
-  input,
-  model,
-  output,
-  signal,
-  untracked,
-} from '@angular/core';
-import {
-  KJ_LIST_NAVIGATOR_CONFIG,
-  KjFilterableList,
-  KjListItem,
-  KjListNavigator,
-  KjTypeAhead,
-  type KjFilterFn,
-  type KjListNavigatorConfig,
-} from '../primitives/list';
-
-let _listIdCounter = 0;
-/** Allocate a stable command list id. */
-export function nextCommandListId(): string {
-  return `kj-command-list-${++_listIdCounter}`;
-}
-
-/** Payload for the `kjActivate` output. */
-export interface KjCommandActivateEvent {
-  readonly value: unknown;
-  readonly query: string;
-}
-
-/**
- * Root state container for the command palette. Provides
- * KJ_LIST_NAVIGATOR_CONFIG (items via contentChildren), KjFilterableList,
- * and KjTypeAhead. Children inject `KjCommandPalette` directly.
- *
- * @doc
- * @doc-example Inline
- *   @doc-file command-palette.example.ts
- * @doc-example Dialog (modal)
- *   @doc-file command-palette.dialog.example.ts
- * @doc-example With groups
- *   @doc-file command-palette.groups.example.ts
- * @doc-example Async search
- *   @doc-file command-palette.async.example.ts
- * @doc-example Fuzzy filter
- *   @doc-file command-palette.fuzzy.example.ts
- * @doc-category Core/Actions
- * @doc-name command-palette
- * @doc-description Unstyled command palette root with item registration, filtering, and activation events.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjCommandPalette]',
-  standalone: true,
-  exportAs: 'kjCommandPalette',
-  providers: [
-    { provide: KJ_LIST_NAVIGATOR_CONFIG, useExisting: forwardRef(() => KjCommandPalette) },
-    KjFilterableList,
-    KjTypeAhead,
-  ],
-})
-export class KjCommandPalette implements KjListNavigatorConfig {
-  /** Pluggable filter function. */
-  readonly kjFilter = input<KjFilterFn | null>(null);
-  /** When `false`, internal filtering is skipped (server-side / consumer-controlled). */
-  readonly kjShouldFilter      = input<boolean, unknown>(true,  { transform: booleanAttribute });
-  /** Show the loading state. */
-  readonly kjLoading           = input<boolean, unknown>(false, { transform: booleanAttribute });
-  /** Reset the active item to the first visible item on query change. */
-  readonly kjAutoActivateFirst = input<boolean, unknown>(true,  { transform: booleanAttribute });
-  /** Close the host dialog on activation. */
-  readonly kjDismissOnActivate = input<boolean, unknown>(true,  { transform: booleanAttribute });
-
-  /** Two-way bindable active value (highlighted item, not committed). */
-  readonly kjValue = model<unknown>(null);
-  /** Two-way bindable query text. */
-  readonly kjQuery = model<string>('');
-
-  /** Fires when an item is activated. */
-  readonly kjActivate = output<KjCommandActivateEvent>();
-
-  /** Stable listbox id for `aria-controls` wiring. */
-  readonly listId = nextCommandListId();
-  /** All `KjListItem`s under this palette. Source of truth for nav + filter. */
-  readonly items = contentChildren(KjListItem, { descendants: true });
-
-  private readonly filterSvc = inject(KjFilterableList);
-
-  /** Visible (filter-passing) items. */
-  readonly visibleItems = computed(() => this.filterSvc.visibleItems() as readonly KjListItem<unknown>[]);
-  readonly query        = computed(() => this.kjQuery());
-  readonly activeValue  = computed(() => this.kjValue());
-  readonly loading      = computed(() => this.kjLoading());
-
-  /** Default filter — substring match across haystacks. */
-  private readonly defaultFilter: KjFilterFn = (q, hs) => {
-    if (!q) return 1;
-    const needle = q.toLowerCase();
-    return hs.some(h => h.toLowerCase().includes(needle)) ? 1 : 0;
-  };
-
-  /** Bound source: custom filter when provided, else default. */
-  private readonly resolvedFilter = computed<KjFilterFn>(
-    () => this.kjFilter() ?? this.defaultFilter,
-  );
-
-  /** @internal — set by `KjCommandInput`'s lifecycle. */
-  private readonly _nav = signal<KjListNavigator | null>(null);
-
-  /** @internal */
-  _setNavigator(n: KjListNavigator | null): void { this._nav.set(n); }
-
-  /** Currently active descendant id (or null). Wired to input's `aria-activedescendant`. */
-  readonly activeId = computed(() => this._nav()?.activeId() ?? null);
-
-  constructor() {
-    this.filterSvc.bind({
-      items:             this.items,
-      query:             this.kjQuery,
-      filterFn:          this.resolvedFilter,
-      shouldFilter:      this.kjShouldFilter,
-      autoActivateFirst: this.kjAutoActivateFirst,
-    });
-
-    // Auto-activate first visible item on query change.
-    effect(() => {
-      this.kjQuery();
-      const autoFirst = this.kjAutoActivateFirst();
-      if (!autoFirst) return;
-      untracked(() => {
-        const visible = this.visibleItems();
-        const nav = this._nav();
-        if (visible.length > 0) {
-          this.kjValue.set(visible[0].value());
-          if (nav) nav.setActive(visible[0].id);
-        } else {
-          this.kjValue.set(null);
-          if (nav) nav.setActive(null);
-        }
-      });
-    });
-
-    // When items register asynchronously (same query), pick first if nothing highlighted.
-    effect(() => {
-      const visible = this.visibleItems();
-      const active = this.kjValue();
-      const autoFirst = this.kjAutoActivateFirst();
-      if (!autoFirst || visible.length === 0 || active !== null) return;
-      untracked(() => {
-        const nav = this._nav();
-        this.kjValue.set(visible[0].value());
-        if (nav) nav.setActive(visible[0].id);
-      });
-    });
-
-    // When the navigator is registered (ngOnInit of KjCommandInput), seed
-    // the active item so aria-activedescendant is correct from first render.
-    effect(() => {
-      const nav = this._nav();
-      if (!nav) return;
-      const autoFirst = this.kjAutoActivateFirst();
-      if (!autoFirst) return;
-      untracked(() => {
-        if (nav.activeId() !== null) return;
-        const visible = this.visibleItems();
-        if (visible.length > 0) {
-          nav.setActive(visible[0].id);
-          this.kjValue.set(visible[0].value());
-        }
-      });
-    });
-  }
-
-  setQuery(q: string): void {
-    this.kjQuery.set(q);
-  }
-
-  activate(value: unknown): void {
-    this.kjValue.set(value);
-    const nav = this._nav();
-    if (nav) {
-      const item = this.items().find(i => i.value() === value);
-      if (item) nav.setActive(item.id);
-    }
-    this.kjActivate.emit({ value, query: this.kjQuery() });
-  }
-
-  /**
-   * Implements `KjListNavigatorConfig.afterSelect`. The palette has no
-   * `KjSelectionModel`, so `closeRequested` is always `false` here —
-   * we use this purely as the central "an item was activated" hook
-   * called from `KjListItem`, which lets `KjCommandItem` skip the
-   * `activate.subscribe(...)` boilerplate.
-   */
-  afterSelect(value: unknown): void {
-    this.activate(value);
-  }
-}

package/src/command-palette/command-separator.ts

@@ -1,18 +0,0 @@
-import { Directive } from '@angular/core';
-import { KjListSeparator } from '../primitives/list';
-
-/**
- * Visual separator between command groups. Non-interactive. Composes
- * the shared `KjListSeparator` primitive (role=separator,
- * aria-orientation=horizontal).
- *
- * @doc-category Core/Actions
- * @doc
- * @doc-name command-palette
- */
-@Directive({
-  selector: '[kjCommandSeparator]',
-  standalone: true,
-  hostDirectives: [KjListSeparator],
-})
-export class KjCommandSeparator {}

package/src/command-palette/index.ts

@@ -1,15 +0,0 @@
-export { KjCommandPalette, type KjCommandActivateEvent } from './command-palette';
-export { KjCommandInput } from './command-input';
-export { KjCommandList } from './command-list';
-export { KjCommandItem } from './command-item';
-export { KjCommandGroup } from './command-group';
-export { KjCommandSeparator } from './command-separator';
-export { KjCommandEmpty } from './command-empty';
-export { KjCommandPaletteDialog } from './command-palette-dialog';
-export { KjCommandPaletteTrigger } from './command-palette-trigger';
-export {
-  kjSubstringFilter,
-  kjFuzzyFilter,
-  stripDiacritics,
-  type KjCommandFilter,
-} from './command-palette.filters';

package/src/confirm-popup/confirm-popup-action.ts

@@ -1,39 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import {
-  KJ_CONFIRM_POPUP,
-  type KjConfirmPopupContext,
-} from './confirm-popup.context';
-
-/**
- * The confirm action button slot. Click resolves the popup with `true`,
- * emitting `(kjConfirmed)` on the parent `[kjConfirmPopup]`.
- *
- * Reflects the parent context's `destructive` flag via `data-destructive`
- * so the styled wrapper can switch the button colour token / focus ring
- * with a single attribute selector.
- *
- * @example
- * ```html
- * <button kjConfirmPopupAction>Delete</button>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjConfirmPopupAction]',
-  standalone: true,
-  exportAs: 'kjConfirmPopupAction',
-  host: {
-    'data-kj-confirm-popup-action': '',
-    '[attr.data-destructive]': 'ctx.destructive() ? "" : null',
-    '(click)': 'onClick($event)',
-  },
-})
-export class KjConfirmPopupAction {
-  protected readonly ctx = inject<KjConfirmPopupContext>(KJ_CONFIRM_POPUP);
-
-  protected onClick(event: MouseEvent): void {
-    event.stopPropagation();
-    this.ctx.close(true);
-  }
-}

package/src/confirm-popup/confirm-popup-cancel.ts

@@ -1,38 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import {
-  KJ_CONFIRM_POPUP,
-  type KjConfirmPopupContext,
-} from './confirm-popup.context';
-
-/**
- * The cancel action button slot. Click resolves the popup with `false`,
- * emitting `(kjCancelled)` on the parent `[kjConfirmPopup]`.
- *
- * Receives initial focus by default (configurable via the parent's
- * `kjDefaultFocus`) — WCAG 3.3.4 *Error Prevention*. Confirm popups must
- * default to the safe action.
- *
- * @example
- * ```html
- * <button kjConfirmPopupCancel>Cancel</button>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjConfirmPopupCancel]',
-  standalone: true,
-  exportAs: 'kjConfirmPopupCancel',
-  host: {
-    'data-kj-confirm-popup-cancel': '',
-    '(click)': 'onClick($event)',
-  },
-})
-export class KjConfirmPopupCancel {
-  protected readonly ctx = inject<KjConfirmPopupContext>(KJ_CONFIRM_POPUP);
-
-  protected onClick(event: MouseEvent): void {
-    event.stopPropagation();
-    this.ctx.close(false);
-  }
-}