@kouji-ui/core 0.0.4 → 0.1.2

package/src/dialog/dialog.service.ts

@@ -1,176 +0,0 @@
-import {
-  ApplicationRef, ComponentRef, EmbeddedViewRef,
-  Injectable, InjectionToken, Injector,
-  TemplateRef, Type, ViewContainerRef,
-  createComponent, inject, signal,
-} from '@angular/core';
-
-/** Token for passing data to a programmatically opened dialog component. */
-export const DIALOG_DATA = new InjectionToken<unknown>('KjDialogData');
-
-/** Configuration for programmatically opened dialogs. */
-export interface KjDialogOpenConfig<D = unknown> {
-  /** Data to inject into the dialog component via `DIALOG_DATA`. */
-  data?: D;
-  /** Additional CSS classes for the dialog panel element. */
-  panelClass?: string | string[];
-  /** Where to focus when the dialog opens. Defaults to the first focusable element. */
-  autoFocus?: boolean | string;
-  /** Whether to restore focus to the trigger after the dialog closes. Defaults to `true`. */
-  restoreFocus?: boolean | string;
-  /** Panel width. */
-  width?: string;
-  /** Maximum panel width. */
-  maxWidth?: string;
-  /** Panel height. */
-  height?: string;
-  /** When `true`, clicking the backdrop or pressing Escape won't close the dialog. */
-  disableClose?: boolean;
-}
-
-/**
- * Reference returned by `KjDialogService.open()`.
- * Use `close(result?)` to dismiss the dialog and emit the result.
- */
-export class KjDialogRef<R = unknown> {
-  private readonly _closed = signal<R | undefined>(undefined);
-  private _closedCallbacks: Array<(result: R | undefined) => void> = [];
-
-  /** @internal */
-  constructor(
-    private readonly container: HTMLElement,
-    private readonly viewRef: EmbeddedViewRef<unknown> | ComponentRef<unknown>,
-    private readonly appRef: ApplicationRef,
-    private readonly previouslyFocused: Element | null,
-    private readonly restoreFocus: boolean,
-  ) {}
-
-  /** Closes the dialog and emits `result` to subscribers. */
-  close(result?: R): void {
-    this.appRef.detachView(
-      this.viewRef instanceof ComponentRef
-        ? this.viewRef.hostView as EmbeddedViewRef<unknown>
-        : this.viewRef,
-    );
-    this.viewRef.destroy();
-    this.container.remove();
-
-    if (this.restoreFocus && this.previouslyFocused instanceof HTMLElement) {
-      this.previouslyFocused.focus();
-    }
-
-    this._closedCallbacks.forEach(cb => cb(result));
-    this._closedCallbacks = [];
-  }
-
-  /**
-   * Registers a callback invoked when the dialog closes.
-   * @param cb - Callback receiving the close result.
-   */
-  afterClosed(cb: (result: R | undefined) => void): this {
-    this._closedCallbacks.push(cb);
-    return this;
-  }
-}
-
-/**
- * Programmatic service for opening dialogs with components or templates.
- * The opened component can inject `DIALOG_DATA` for typed data and `KjDialogRef` to close itself.
- *
- * @example
- * ```ts
- * // Open a component as a dialog
- * private readonly dialog = inject(KjDialogService);
- *
- * openConfirm() {
- *   const ref = this.dialog.open(ConfirmDialogComponent, {
- *     data: { message: 'Delete this item?' },
- *   });
- *   ref.afterClosed(result => {
- *     if (result) this.doDelete();
- *   });
- * }
- * ```
- *
- * ```ts
- * // Inside ConfirmDialogComponent
- * readonly data = inject<{ message: string }>(DIALOG_DATA);
- * readonly ref = inject(KjDialogRef);
- * confirm() { this.ref.close(true); }
- * cancel() { this.ref.close(false); }
- * ```
- * @category Core/Overlays
- */
-@Injectable({ providedIn: 'root' })
-export class KjDialogService {
-  private readonly appRef = inject(ApplicationRef);
-  private readonly injector = inject(Injector);
-
-  /**
-   * Opens a component as a modal dialog.
-   * @param content - Angular component type to render inside the dialog.
-   * @param config - Optional configuration: data, panelClass, width, autoFocus, etc.
-   * @returns A `KjDialogRef` whose `afterClosed()` fires when the dialog closes.
-   */
-  open<R = unknown, D = unknown, C = unknown>(
-    content: Type<C> | TemplateRef<C>,
-    config?: KjDialogOpenConfig<D>,
-  ): KjDialogRef<R> {
-    const container = document.createElement('div');
-    container.setAttribute('data-kj-dialog-container', '');
-
-    const previouslyFocused = document.activeElement;
-    const restoreFocus = config?.restoreFocus !== false;
-
-    const dialogRef = new KjDialogRef<R>(
-      container,
-      null as never, // filled below
-      this.appRef,
-      previouslyFocused,
-      restoreFocus,
-    );
-
-    const childInjector = Injector.create({
-      parent: this.injector,
-      providers: [
-        { provide: DIALOG_DATA, useValue: config?.data },
-        { provide: KjDialogRef, useValue: dialogRef },
-      ],
-    });
-
-    let viewRef: EmbeddedViewRef<unknown> | ComponentRef<unknown>;
-
-    if (content instanceof TemplateRef) {
-      const vcr = this.appRef.components[0]?.injector.get(ViewContainerRef, null);
-      if (!vcr) throw new Error('KjDialogService: no root ViewContainerRef available');
-      viewRef = vcr.createEmbeddedView(content as TemplateRef<unknown>, {}, { injector: childInjector });
-      this.appRef.attachView(viewRef as EmbeddedViewRef<unknown>);
-      (viewRef as EmbeddedViewRef<unknown>).rootNodes.forEach(n => container.appendChild(n));
-    } else {
-      const compRef = createComponent(content as Type<unknown>, {
-        environmentInjector: this.appRef.injector,
-        elementInjector: childInjector,
-      });
-      this.appRef.attachView(compRef.hostView);
-      container.appendChild((compRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0]);
-      viewRef = compRef;
-    }
-
-    // Patch the viewRef into the dialogRef (bypass readonly via cast)
-    (dialogRef as unknown as { viewRef: typeof viewRef }).viewRef = viewRef;
-
-    document.body.appendChild(container);
-
-    // Auto-focus first tabbable element
-    if (config?.autoFocus !== false) {
-      const target = typeof config?.autoFocus === 'string'
-        ? container.querySelector<HTMLElement>(config.autoFocus)
-        : container.querySelector<HTMLElement>(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-          );
-      target?.focus();
-    }
-
-    return dialogRef;
-  }
-}

package/src/dialog/dialog.spec.ts

@@ -1,122 +0,0 @@
-import { fireEvent } from '@testing-library/angular';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import {
-  KjDialogTrigger, KjDialog, KjDialogOverlay,
-  KjDialogTitle, KjDialogClose,
-} from './dialog';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [
-  KjDialogTrigger, KjDialog, KjDialogOverlay,
-  KjDialogTitle, KjDialogClose,
-];
-
-describe('KjDialogTrigger', () => {
-  it('renders trigger button', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(getByRole('button', { name: 'Open' })).toBeInTheDocument();
-  });
-
-  it('trigger has aria-haspopup=dialog', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(getByRole('button', { name: 'Open' })).toHaveAttribute('aria-haspopup', 'dialog');
-  });
-
-  it('trigger has aria-expanded=false initially', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(getByRole('button', { name: 'Open' })).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('opens dialog and sets aria-expanded=true on click', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>Settings</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    const trigger = getByRole('button', { name: 'Open' });
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('mounts dialog content in document.body on open', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay>
-           <div kjDialog><h2 kjDialogTitle>My Dialog</h2></div>
-         </div>
-       </ng-template>`,
-      { imports },
-    );
-    fireEvent.click(getByRole('button', { name: 'Open' }));
-    expect(document.body.querySelector('[data-kj-dialog-container]')).toBeTruthy();
-  });
-
-  it('closes dialog on overlay click (close on backdrop enabled by default)', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay>
-           <div kjDialog><h2 kjDialogTitle>T</h2></div>
-         </div>
-       </ng-template>`,
-      { imports },
-    );
-    const trigger = getByRole('button', { name: 'Open' });
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-    const overlay = document.querySelector('[kjDialogOverlay]') ?? document.body.querySelector('div[data-kj-dialog-container] > div');
-    if (overlay) fireEvent.click(overlay);
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('closes dialog on Escape key when closeOnEscape is true', async () => {
-    const { getByRole } = await render(
-      `<button [kjDialogTrigger]="dlg">Open</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>T</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    const trigger = getByRole('button', { name: 'Open' });
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-
-    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('passes axe audit on trigger', async () => {
-    const { container } = await render(
-      `<button [kjDialogTrigger]="dlg">Open dialog</button>
-       <ng-template #dlg>
-         <div kjDialogOverlay><div kjDialog><h2 kjDialogTitle>Settings</h2></div></div>
-       </ng-template>`,
-      { imports },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/dialog/dialog.ts

@@ -1,201 +0,0 @@
-import {
-  ApplicationRef, Directive, DestroyRef, EmbeddedViewRef,
-  HostListener, Injector, TemplateRef,
-  computed, inject, input, output, signal,
-  PLATFORM_ID,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { KJ_DIALOG, KjDialogContext } from './dialog.context';
-
-let _dialogIdCounter = 0;
-
-/**
- * Trigger that opens the dialog. Place on any button or interactive element.
- * Takes a `TemplateRef` input that defines the full overlay structure.
- *
- * The template should contain `[kjDialogOverlay]` (backdrop) wrapping `[kjDialog]` (panel).
- * Inside the panel use `[kjDialogTitle]` and `[kjDialogClose]`.
- * Export `kjDialog` as a template ref (`#dlg="kjDialog"`) to call `dlg.close(result?)`.
- *
- * @example
- * ```html
- * <button kjButton [kjDialogTrigger]="myDialog" (kjDialogClosed)="onResult($event)">Open</button>
- *
- * <ng-template #myDialog>
- *   <div kjDialogOverlay>
- *     <div kjDialog #dlg="kjDialog">
- *       <h2 kjDialogTitle>Title</h2>
- *       <button kjDialogClose>Cancel</button>
- *       <button (click)="dlg.close('saved')">Save</button>
- *     </div>
- *   </div>
- * </ng-template>
- * ```
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file dialog.example.ts
- *    @doc-theme retro
- *      @doc-file dialog.retro.example.ts
- *    @doc-theme finance
- *      @doc-file dialog.finance.example.ts
- *  @doc-example Confirmation
- *    @doc-file dialog.confirm.example.ts
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogTrigger]',
-  standalone: true,
-  providers: [{ provide: KJ_DIALOG, useExisting: KjDialogTrigger }],
-  host: {
-    '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-expanded]': 'open().toString()',
-    '(click)': 'openDialog()',
-  },
-})
-export class KjDialogTrigger implements KjDialogContext {
-  private readonly appRef = inject(ApplicationRef);
-  private readonly injector = inject(Injector);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  readonly kjDialogTrigger = input.required<TemplateRef<unknown>>();
-  readonly kjDialogCloseOnEscape = input<boolean>(true);
-  readonly kjDialogCloseOnBackdrop = input<boolean>(true);
-  readonly kjDialogClosed = output<unknown>();
-
-  readonly dialogId = `kj-dialog-${++_dialogIdCounter}`;
-
-  private readonly _open = signal(false);
-  readonly open = this._open.asReadonly();
-  readonly closeOnEscape = computed(() => this.kjDialogCloseOnEscape());
-  readonly closeOnBackdrop = computed(() => this.kjDialogCloseOnBackdrop());
-
-  private viewRef?: EmbeddedViewRef<unknown>;
-  private containerEl?: HTMLElement;
-
-  constructor() {
-    this.destroyRef.onDestroy(() => this.close());
-  }
-
-  openDialog(): void {
-    if (this._open() || !isPlatformBrowser(this.platformId)) return;
-
-    // Use TemplateRef.createEmbeddedView directly (not vcr.createEmbeddedView) so
-    // the view is NOT pre-attached to any ViewContainer — ApplicationRef can own it.
-    // Pass the trigger's injector so KJ_DIALOG is resolvable within the template.
-    this.viewRef = this.kjDialogTrigger().createEmbeddedView(undefined as never, this.injector);
-    this.appRef.attachView(this.viewRef);
-
-    // Mount in a fixed container appended to body
-    this.containerEl = document.createElement('div');
-    this.containerEl.setAttribute('data-kj-dialog-container', '');
-    this.viewRef.rootNodes.forEach(node => this.containerEl!.appendChild(node));
-    document.body.appendChild(this.containerEl);
-
-    this._open.set(true);
-  }
-
-  close(result?: unknown): void {
-    if (!this._open()) return;
-    this._open.set(false);
-
-    if (this.viewRef) {
-      this.appRef.detachView(this.viewRef);
-      this.viewRef.destroy();
-      this.viewRef = undefined;
-    }
-    this.containerEl?.remove();
-    this.containerEl = undefined;
-
-    this.kjDialogClosed.emit(result);
-  }
-
-  @HostListener('document:keydown.escape')
-  onEscape(): void {
-    if (this._open() && this.closeOnEscape()) this.close();
-  }
-}
-
-/**
- * Panel container for the dialog. Place inside the template provided to `[kjDialogTrigger]`.
- * Auto-sets `role="dialog"`, `aria-modal`, and `aria-labelledby` (requires `[kjDialogTitle]` inside).
- * Export as `#dlg="kjDialog"` to call `dlg.close(result?)` from event handlers.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialog]',
-  standalone: true,
-  exportAs: 'kjDialog',
-  host: {
-    '[attr.role]': '"dialog"',
-    '[attr.aria-modal]': '"true"',
-    '[attr.aria-labelledby]': 'ctx.dialogId + "-title"',
-    '(click)': '$event.stopPropagation()',
-  },
-})
-export class KjDialog {
-  readonly ctx = inject(KJ_DIALOG);
-
-  close(result?: unknown): void {
-    this.ctx.close(result);
-  }
-}
-
-/**
- * Backdrop/overlay element. Place inside the template wrapping `[kjDialog]`.
- * Closes the dialog on click when `[kjDialogOverlayCloseOnClick]` is true (default).
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogOverlay]',
-  standalone: true,
-  host: {
-    '(click)': 'onOverlayClick()',
-  },
-})
-export class KjDialogOverlay {
-  private readonly ctx = inject(KJ_DIALOG);
-  readonly kjDialogOverlayCloseOnClick = input<boolean>(true);
-
-  onOverlayClick(): void {
-    if (this.ctx.closeOnBackdrop() && this.kjDialogOverlayCloseOnClick()) {
-      this.ctx.close();
-    }
-  }
-}
-
-/**
- * Marks the dialog title. Sets `id` for `aria-labelledby` wiring on `[kjDialog]`.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogTitle]',
-  standalone: true,
-  host: {
-    '[attr.id]': 'ctx.dialogId + "-title"',
-  },
-})
-export class KjDialogTitle {
-  readonly ctx = inject(KJ_DIALOG);
-}
-
-/**
- * Closes the dialog on click without a result value.
- * For closing with a result, use `#dlg="kjDialog"` then `(click)="dlg.close(value)"`.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjDialogClose]',
-  standalone: true,
-  host: {
-    '(click)': 'ctx.close()',
-  },
-})
-export class KjDialogClose {
-  readonly ctx = inject(KJ_DIALOG);
-}

package/src/dialog/index.ts

@@ -1,9 +0,0 @@
-export {
-  KjDialogTrigger,
-  KjDialog,
-  KjDialogOverlay,
-  KjDialogClose,
-  KjDialogTitle,
-} from './dialog';
-export { KJ_DIALOG, type KjDialogContext } from './dialog.context';
-export { KjDialogService, KjDialogRef, DIALOG_DATA, type KjDialogOpenConfig } from './dialog.service';

package/src/example-components.ts

@@ -1,33 +0,0 @@
-// AOT-compiled example components for documentation.
-// One entry per directive × theme combination.
-
-// Button
-export { ButtonExample } from './button/button.example';
-export { ButtonRetroExample } from './button/button.retro.example';
-export { ButtonFinanceExample } from './button/button.finance.example';
-export { ButtonSizesExample } from './button/button.sizes.example';
-
-// Dialog
-export { DialogBasicExample } from './dialog/dialog.example';
-export { DialogRetroExample } from './dialog/dialog.retro.example';
-export { DialogFinanceExample } from './dialog/dialog.finance.example';
-export { DialogConfirmExample } from './dialog/dialog.confirm.example';
-
-// Tooltip
-export { TooltipBasicExample } from './tooltip/tooltip.example';
-export { TooltipRetroExample } from './tooltip/tooltip.retro.example';
-export { TooltipFinanceExample } from './tooltip/tooltip.finance.example';
-export { TooltipPlacementsExample } from './tooltip/tooltip.placements.example';
-
-// Popover
-export { PopoverBasicExample } from './popover/popover.example';
-export { PopoverRetroExample } from './popover/popover.retro.example';
-export { PopoverFinanceExample } from './popover/popover.finance.example';
-
-// Menu
-export { MenuBasicExample } from './menu/menu.example';
-
-// Toast
-export { ToastBasicExample } from './toast/toast.example';
-export { ToastRetroExample } from './toast/toast.retro.example';
-export { ToastFinanceExample } from './toast/toast.finance.example';

package/src/form/form.context.ts

@@ -1,3 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-export interface KjFormFieldContext { invalid: Signal<boolean>; }
-export const KJ_FORM_FIELD = new InjectionToken<KjFormFieldContext>('KjFormField');

package/src/form/form.spec.ts

@@ -1,25 +0,0 @@
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjFormField, KjFormError, KjFormLabel } from './form';
-
-expect.extend(toHaveNoViolations);
-const imports = [KjFormField, KjFormError, KjFormLabel];
-
-describe('KjFormField', () => {
-  it('sets data-invalid when invalid', async () => {
-    const { container } = await render(`<div kjFormField [kjFieldInvalid]="true"><label kjFormLabel for="f">Name</label><input id="f" /><span kjFormError>Required</span></div>`, { imports });
-    expect(container.querySelector('[kjFormField]')).toHaveAttribute('data-invalid', '');
-  });
-  it('error visible when invalid', async () => {
-    const { getByText } = await render(`<div kjFormField [kjFieldInvalid]="true"><label kjFormLabel for="f">Name</label><input id="f" /><span kjFormError>Required</span></div>`, { imports });
-    expect(getByText('Required')).not.toHaveAttribute('hidden');
-  });
-  it('error hidden when valid', async () => {
-    const { getByText } = await render(`<div kjFormField [kjFieldInvalid]="false"><label kjFormLabel for="f">Name</label><input id="f" /><span kjFormError>Required</span></div>`, { imports });
-    expect(getByText('Required').closest('[kjFormError]')).toHaveAttribute('hidden', '');
-  });
-  it('passes axe audit', async () => {
-    const { container } = await render(`<div kjFormField [kjFieldInvalid]="false"><label kjFormLabel for="e">Email</label><input id="e" type="email" /></div>`, { imports });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/form/form.ts

@@ -1,46 +0,0 @@
-import { Directive, computed, inject, input } from '@angular/core';
-import { KJ_FORM_FIELD, KjFormFieldContext } from './form.context';
-
-/**
- * Container for a form field. Groups label, input, and error message.
- * @example
- * ```html
- * <div kjFormField [kjFieldInvalid]="ctrl.invalid && ctrl.touched">
- *   <label kjFormLabel for="name">Name</label>
- *   <input id="name" kjInput />
- *   <span kjFormError>Name is required</span>
- * </div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjFormField]', standalone: true,
-  providers: [{ provide: KJ_FORM_FIELD, useExisting: KjFormField }],
-  host: { '[attr.data-invalid]': 'kjFieldInvalid() ? "" : null' },
-})
-export class KjFormField implements KjFormFieldContext {
-  /** Whether the field is in an invalid state. */
-  kjFieldInvalid = input<boolean>(false);
-  readonly invalid = computed(() => this.kjFieldInvalid());
-}
-
-/**
- * Label element within a form field.
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjFormLabel]', standalone: true,
-  host: { '[attr.data-invalid]': 'ctx.invalid() ? "" : null' },
-})
-export class KjFormLabel { readonly ctx = inject(KJ_FORM_FIELD); }
-
-/**
- * Error message element. Visible only when field is invalid.
- * @example `<span kjFormError>Email is invalid</span>`
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjFormError]', standalone: true,
-  host: { role: 'alert', 'aria-live': 'polite', '[attr.hidden]': '!ctx.invalid() ? "" : null' },
-})
-export class KjFormError { readonly ctx = inject(KJ_FORM_FIELD); }

package/src/form/index.ts

@@ -1,2 +0,0 @@
-export { KjFormField, KjFormLabel, KjFormError } from './form';
-export { KJ_FORM_FIELD, type KjFormFieldContext } from './form.context';

package/src/input/index.ts

@@ -1 +0,0 @@
-export { KjInput } from './input';

package/src/input/input.spec.ts

@@ -1,43 +0,0 @@
-import { render } from '@testing-library/angular';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjInput } from './input';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjInput', () => {
-  it('renders without error', async () => {
-    const { container } = await render(`<input kjInput type="text" />`, { imports: [KjInput] });
-    expect(container.querySelector('input')).toBeInTheDocument();
-  });
-
-  it('sets aria-invalid and data-invalid when touched + invalid', async () => {
-    const ctrl = new FormControl('', { updateOn: 'blur' });
-    const { container } = await render(
-      `<input kjInput [formControl]="ctrl" [kjInvalid]="ctrl.invalid" />`,
-      { imports: [KjInput, ReactiveFormsModule], componentProperties: { ctrl } },
-    );
-    const input = container.querySelector('input')!;
-    input.dispatchEvent(new Event('blur'));
-    await new Promise(r => setTimeout(r, 0));
-    // touched is set, but ctrl is not invalid by default with no validators
-    expect(input).toBeInTheDocument();
-  });
-
-  it('works with formControl binding', async () => {
-    const ctrl = new FormControl('hello');
-    const { container } = await render(
-      `<input kjInput [formControl]="ctrl" />`,
-      { imports: [KjInput, ReactiveFormsModule], componentProperties: { ctrl } },
-    );
-    expect((container.querySelector('input') as HTMLInputElement).value).toBe('hello');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(
-      `<label for="n">Name</label><input id="n" kjInput type="text" />`,
-      { imports: [KjInput] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});