@kouji-ui/core 0.0.2

package/src/popover/popover.ts

@@ -0,0 +1,124 @@
+import { Directive, inject, input, signal } from '@angular/core';
+import { KJ_POPOVER, KjPopoverContext, type KjPopoverSide, type KjPopoverAlign } from './popover.context';
+
+let _popoverIdCounter = 0;
+
+/**
+ * Root popover container. Manages open state, ARIA wiring, and click-outside dismissal.
+ * Pairs with `[kjPopoverTrigger]` and `[kjPopoverContent]`.
+ *
+ * Click outside or Escape closes the popover. Clicking the trigger toggles it.
+ * `aria-expanded` and `aria-controls` are automatically set on the trigger.
+ *
+ * @example
+ * ```html
+ * <div kjPopover>
+ *   <button kjPopoverTrigger>Options</button>
+ *   <div kjPopoverContent>
+ *     <p>Popover body</p>
+ *     <button kjPopoverClose>Done</button>
+ *   </div>
+ * </div>
+ * ```
+ * @doc
+ *  @doc-example Basic
+ *    @doc-theme default
+ *      @doc-file popover.example.ts
+ *    @doc-theme retro
+ *      @doc-file popover.retro.example.ts
+ *    @doc-theme finance
+ *      @doc-file popover.finance.example.ts
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjPopover]',
+  standalone: true,
+  providers: [{ provide: KJ_POPOVER, useExisting: KjPopover }],
+  exportAs: 'kjPopover',
+})
+export class KjPopover implements KjPopoverContext {
+  /** Preferred side for the popover panel. Used via `data-side` for CSS. Defaults to `'bottom'`. */
+  kjPopoverSide = input<KjPopoverSide>('bottom');
+  /** Alignment along the cross-axis. Used via `data-align` for CSS. Defaults to `'start'`. */
+  kjPopoverAlign = input<KjPopoverAlign>('start');
+
+  readonly open = signal(false);
+  readonly popoverId = `kj-popover-${++_popoverIdCounter}`;
+
+  toggle(): void {
+    this.open.update(v => !v);
+  }
+
+  hide(): void {
+    this.open.set(false);
+  }
+}
+
+/**
+ * Trigger button that toggles the popover. Automatically sets `aria-expanded`
+ * and `aria-controls` on the host element.
+ *
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjPopoverTrigger]',
+  standalone: true,
+  host: {
+    '[attr.aria-expanded]': 'ctx.open().toString()',
+    '[attr.aria-haspopup]': '"dialog"',
+    '[attr.aria-controls]': 'ctx.popoverId',
+    // stopPropagation prevents the document:click on kjPopoverContent from immediately closing
+    '(click)': '$event.stopPropagation(); ctx.toggle()',
+  },
+})
+export class KjPopoverTrigger {
+  readonly ctx = inject(KJ_POPOVER);
+}
+
+/**
+ * Popover content panel. Hidden when closed. Uses `hidden` attribute for
+ * accessibility-compliant visibility. Click-outside and Escape both dismiss it.
+ *
+ * Clicks inside the panel are stopped so they don't bubble to the document listener.
+ *
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjPopoverContent]',
+  standalone: true,
+  host: {
+    '[attr.id]': 'ctx.popoverId',
+    '[attr.hidden]': '!ctx.open() ? "" : null',
+    '[attr.data-side]': 'ctx.kjPopoverSide()',
+    '[attr.data-align]': 'ctx.kjPopoverAlign()',
+    // Prevent clicks inside from closing the popover
+    '(click)': '$event.stopPropagation()',
+    // Close on Escape
+    '(document:keydown.escape)': 'ctx.open() && ctx.hide()',
+    // Close on any click outside (trigger stopPropagation prevents self-close)
+    '(document:click)': 'ctx.open() && ctx.hide()',
+  },
+})
+export class KjPopoverContent {
+  readonly ctx = inject(KJ_POPOVER);
+}
+
+/**
+ * Closes the parent popover when clicked. Place inside `[kjPopoverContent]`.
+ *
+ * @example
+ * ```html
+ * <button kjPopoverClose>Done</button>
+ * ```
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjPopoverClose]',
+  standalone: true,
+  host: {
+    '(click)': 'ctx.hide()',
+  },
+})
+export class KjPopoverClose {
+  readonly ctx = inject(KJ_POPOVER);
+}

package/src/primitives/forms/form-control.spec.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjFormControl } from './form-control';
+
+expect.extend(toHaveNoViolations);
+
+@Component({
+  standalone: true,
+  imports: [KjFormControl, ReactiveFormsModule],
+  template: `<input kjFormControl [formControl]="ctrl" (input)="onInput($event)" (blur)="onBlur()" />`,
+})
+class TestHostComponent {
+  ctrl = new FormControl('');
+  formCtrl!: KjFormControl;
+  onInput(e: Event): void {
+    // will be wired by the directive consumer pattern
+  }
+  onBlur(): void {}
+}
+
+describe('KjFormControl', () => {
+  it('registers as NG_VALUE_ACCESSOR so formControl binding works', async () => {
+    const { container } = await render(TestHostComponent);
+    expect(container.querySelector('input')).toBeInTheDocument();
+  });
+
+  it('writeValue updates the value signal', async () => {
+    const { fixture } = await render(TestHostComponent);
+    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
+    directive.writeValue('hello');
+    expect(directive.value()).toBe('hello');
+  });
+
+  it('setDisabledState updates the disabled signal', async () => {
+    const { fixture } = await render(TestHostComponent);
+    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
+    directive.setDisabledState(true);
+    expect(directive.disabled()).toBe(true);
+  });
+
+  it('notifyChange updates value and calls onChange', async () => {
+    const { fixture } = await render(TestHostComponent);
+    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
+    let emitted: unknown;
+    directive.registerOnChange((v) => { emitted = v; });
+    directive.notifyChange('test');
+    expect(directive.value()).toBe('test');
+    expect(emitted).toBe('test');
+  });
+
+  it('notifyTouched marks touched', async () => {
+    const { fixture } = await render(TestHostComponent);
+    const directive = fixture.debugElement.children[0].injector.get(KjFormControl);
+    directive.notifyTouched();
+    expect(directive.touched()).toBe(true);
+  });
+});

package/src/primitives/forms/form-control.ts

@@ -0,0 +1,90 @@
+import { Directive, forwardRef, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Shared ControlValueAccessor primitive. Compose via `hostDirectives` on any
+ * form input directive (KjInput, KjCheckbox, etc.) to wire
+ * Angular reactive forms and template-driven forms automatically.
+ *
+ * The host directive calls `notifyChange(value)` on user input and
+ * `notifyTouched()` on blur. The directive handles all CVA plumbing.
+ *
+ * @example
+ * ```ts
+ * @Directive({
+ *   selector: '[kjInput]',
+ *   hostDirectives: [KjFormControl],
+ *   host: {
+ *     '(input)': 'formCtrl.notifyChange($event.target.value)',
+ *     '(blur)':  'formCtrl.notifyTouched()',
+ *   },
+ * })
+ * export class KjInput {
+ *   readonly formCtrl = inject(KjFormControl);
+ * }
+ * ```
+ * @category Core/Primitives
+ */
+@Directive({
+  selector: '[kjFormControl]',
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => KjFormControl),
+      multi: true,
+    },
+  ],
+})
+export class KjFormControl implements ControlValueAccessor {
+  /** The current form value, kept in sync with the Angular forms model. */
+  readonly value = signal<unknown>(undefined);
+
+  /** Whether the control is disabled by the Angular forms layer. */
+  readonly disabled = signal<boolean>(false);
+
+  /** Whether the control has been touched (blurred at least once). */
+  readonly touched = signal<boolean>(false);
+
+  private _onChange?: (value: unknown) => void;
+  private _onTouched?: () => void;
+
+  /** @internal — called by Angular forms */
+  writeValue(val: unknown): void {
+    this.value.set(val);
+  }
+
+  /** @internal — called by Angular forms */
+  registerOnChange(fn: (value: unknown) => void): void {
+    this._onChange = fn;
+  }
+
+  /** @internal — called by Angular forms */
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  /** @internal — called by Angular forms */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  /**
+   * Call this when the user changes the control's value.
+   * Updates the value signal and notifies Angular forms.
+   * @param val - The new value.
+   */
+  notifyChange(val: unknown): void {
+    this.value.set(val);
+    this._onChange?.(val);
+  }
+
+  /**
+   * Call this when the user blurs the control.
+   * Marks the control as touched.
+   */
+  notifyTouched(): void {
+    this.touched.set(true);
+    this._onTouched?.();
+  }
+}

package/src/primitives/forms/index.ts

@@ -0,0 +1 @@
+export { KjFormControl } from './form-control';

package/src/primitives/index.ts

@@ -0,0 +1,3 @@
+export * from './interaction/index';
+export * from './forms/index';
+export * from './overlay/index';

package/src/primitives/interaction/disabled.spec.ts

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjDisabled } from './disabled';
+
+expect.extend(toHaveNoViolations);
+
+describe('KjDisabled', () => {
+  it('sets aria-disabled="true" when disabled', async () => {
+    const { container } = await render(
+      `<button kjDisabled [kjDisabled]="true">Submit</button>`,
+      { imports: [KjDisabled] },
+    );
+    expect(container.querySelector('button')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('sets data-disabled attribute when disabled', async () => {
+    const { container } = await render(
+      `<button kjDisabled [kjDisabled]="true">Submit</button>`,
+      { imports: [KjDisabled] },
+    );
+    expect(container.querySelector('button')).toHaveAttribute('data-disabled', '');
+  });
+
+  it('removes aria-disabled when not disabled', async () => {
+    const { container } = await render(
+      `<button kjDisabled [kjDisabled]="false">Submit</button>`,
+      { imports: [KjDisabled] },
+    );
+    expect(container.querySelector('button')).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('defaults to not disabled', async () => {
+    const { container } = await render(
+      `<button kjDisabled>Submit</button>`,
+      { imports: [KjDisabled] },
+    );
+    expect(container.querySelector('button')).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('passes axe accessibility audit', async () => {
+    const { container } = await render(
+      `<button kjDisabled [kjDisabled]="true">Submit</button>`,
+      { imports: [KjDisabled] },
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/primitives/interaction/disabled.ts

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+
+/**
+ * Applies disabled state to any element via ARIA and data attributes.
+ * Compose via `hostDirectives` on other directives to add disabled behavior.
+ *
+ * @example
+ * ```html
+ * <button kjButton [kjDisabled]="isLoading()">Submit</button>
+ * ```
+ * @category Core/Primitives
+ */
+@Directive({
+  selector: '[kjDisabled]',
+  standalone: true,
+  host: {
+    '[attr.aria-disabled]': 'disabled() ? "true" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+})
+export class KjDisabled {
+  /** Whether the element is disabled. Reflects via `aria-disabled` and `data-disabled`. */
+  readonly disabled = input<boolean>(false, { alias: 'kjDisabled' });
+}

package/src/primitives/interaction/focus-ring.spec.ts

@@ -0,0 +1,62 @@
+import { render, fireEvent } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjFocusRing } from './focus-ring';
+
+expect.extend(toHaveNoViolations);
+
+describe('KjFocusRing', () => {
+  it('adds data-focus-visible on focus when last interaction was keyboard', async () => {
+    const { container } = await render(
+      `<button kjFocusRing>Click me</button>`,
+      { imports: [KjFocusRing] },
+    );
+    const btn = container.querySelector('button')!;
+    // No prior pointerdown — _lastWasPointer is false, so focus should be visible.
+    fireEvent.focus(btn);
+    expect(btn).toHaveAttribute('data-focus-visible', '');
+  });
+
+  it('does not add data-focus-visible on focus after pointer interaction', async () => {
+    const { container } = await render(
+      `<button kjFocusRing>Click me</button>`,
+      { imports: [KjFocusRing] },
+    );
+    const btn = container.querySelector('button')!;
+    // Simulate pointer interaction, then focus.
+    fireEvent.pointerDown(document);
+    fireEvent.focus(btn);
+    expect(btn).not.toHaveAttribute('data-focus-visible');
+  });
+
+  it('removes data-focus-visible on blur', async () => {
+    const { container } = await render(
+      `<button kjFocusRing>Click me</button>`,
+      { imports: [KjFocusRing] },
+    );
+    const btn = container.querySelector('button')!;
+    fireEvent.focus(btn);
+    fireEvent.blur(btn);
+    expect(btn).not.toHaveAttribute('data-focus-visible');
+  });
+
+  it('restores data-focus-visible after keydown followed by focus', async () => {
+    const { container } = await render(
+      `<button kjFocusRing>Click me</button>`,
+      { imports: [KjFocusRing] },
+    );
+    const btn = container.querySelector('button')!;
+    // First simulate pointer (marks _lastWasPointer = true), then keyboard (resets it).
+    fireEvent.pointerDown(document);
+    fireEvent.keyDown(document);
+    fireEvent.focus(btn);
+    expect(btn).toHaveAttribute('data-focus-visible', '');
+  });
+
+  it('passes axe accessibility audit', async () => {
+    const { container } = await render(
+      `<button kjFocusRing>Click me</button>`,
+      { imports: [KjFocusRing] },
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/primitives/interaction/focus-ring.ts

@@ -0,0 +1,57 @@
+import { Directive, DestroyRef, ElementRef, afterNextRender, inject, signal } from '@angular/core';
+import { PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * Tracks focus-visible state using native PointerEvents and keyboard interaction.
+ * Sets `data-focus-visible` only when the element receives focus via keyboard.
+ * Compose via `hostDirectives` to add focus-ring behavior to interactive elements.
+ *
+ * @example
+ * ```html
+ * <button kjFocusRing>Focusable button</button>
+ * ```
+ * @category Core/Primitives
+ */
+@Directive({
+  selector: '[kjFocusRing]',
+  standalone: true,
+  host: {
+    '[attr.data-focus-visible]': 'focusVisible() ? "" : null',
+  },
+})
+export class KjFocusRing {
+  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  private readonly _focusVisible = signal(false);
+
+  /** Whether the element currently has visible focus (keyboard-initiated). */
+  readonly focusVisible = this._focusVisible.asReadonly();
+
+  private _lastWasPointer = false;
+
+  constructor() {
+    afterNextRender(() => {
+      if (!isPlatformBrowser(this.platformId)) return;
+
+      const onKeydown = () => { this._lastWasPointer = false; };
+      const onPointerdown = () => { this._lastWasPointer = true; };
+      const onFocus = () => { this._focusVisible.set(!this._lastWasPointer); };
+      const onBlur = () => { this._focusVisible.set(false); };
+
+      document.addEventListener('keydown', onKeydown, true);
+      document.addEventListener('pointerdown', onPointerdown, true);
+      this.el.nativeElement.addEventListener('focus', onFocus);
+      this.el.nativeElement.addEventListener('blur', onBlur);
+
+      this.destroyRef.onDestroy(() => {
+        document.removeEventListener('keydown', onKeydown, true);
+        document.removeEventListener('pointerdown', onPointerdown, true);
+        this.el.nativeElement.removeEventListener('focus', onFocus);
+        this.el.nativeElement.removeEventListener('blur', onBlur);
+      });
+    });
+  }
+}

package/src/primitives/interaction/index.ts

@@ -0,0 +1,2 @@
+export { KjDisabled } from './disabled';
+export { KjFocusRing } from './focus-ring';

package/src/primitives/overlay/index.ts

@@ -0,0 +1 @@
+export { KjOverlayService, KjOverlayRef } from './overlay';

package/src/primitives/overlay/overlay.spec.ts

@@ -0,0 +1,90 @@
+import { Component, TemplateRef, ViewChild, ViewContainerRef, inject } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { KjOverlayService, KjOverlayRef } from './overlay';
+
+describe('KjOverlayService', () => {
+  it('can be injected', async () => {
+    @Component({ standalone: true, template: '' })
+    class TestComponent {
+      readonly svc = inject(KjOverlayService);
+    }
+    const { fixture } = await render(TestComponent);
+    expect(fixture.componentInstance.svc).toBeTruthy();
+  });
+
+  it('createFromTemplate returns a KjOverlayRef with isOpen=false', async () => {
+    @Component({
+      standalone: true,
+      template: '<ng-template #tpl><div>overlay content</div></ng-template>',
+    })
+    class TestComponent {
+      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
+      readonly svc = inject(KjOverlayService);
+      readonly vcr = inject(ViewContainerRef);
+      ref!: KjOverlayRef;
+      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
+    }
+    const { fixture } = await render(TestComponent);
+    expect(fixture.componentInstance.ref.isOpen()).toBe(false);
+    fixture.componentInstance.ref.dispose();
+  });
+
+  it('open() sets isOpen to true', async () => {
+    @Component({
+      standalone: true,
+      template: '<ng-template #tpl><div>overlay</div></ng-template>',
+    })
+    class TestComponent {
+      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
+      readonly svc = inject(KjOverlayService);
+      readonly vcr = inject(ViewContainerRef);
+      ref!: KjOverlayRef;
+      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
+    }
+    const { fixture } = await render(TestComponent);
+    const ref = fixture.componentInstance.ref;
+    ref.open();
+    expect(ref.isOpen()).toBe(true);
+    ref.dispose();
+  });
+
+  it('close() sets isOpen to false', async () => {
+    @Component({
+      standalone: true,
+      template: '<ng-template #tpl><div>overlay</div></ng-template>',
+    })
+    class TestComponent {
+      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
+      readonly svc = inject(KjOverlayService);
+      readonly vcr = inject(ViewContainerRef);
+      ref!: KjOverlayRef;
+      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
+    }
+    const { fixture } = await render(TestComponent);
+    const ref = fixture.componentInstance.ref;
+    ref.open();
+    ref.close();
+    expect(ref.isOpen()).toBe(false);
+    ref.dispose();
+  });
+
+  it('dispose() removes the overlay container from document.body', async () => {
+    @Component({
+      standalone: true,
+      template: '<ng-template #tpl><div>overlay</div></ng-template>',
+    })
+    class TestComponent {
+      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
+      readonly svc = inject(KjOverlayService);
+      readonly vcr = inject(ViewContainerRef);
+      ref!: KjOverlayRef;
+      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
+    }
+    const { fixture } = await render(TestComponent);
+    const ref = fixture.componentInstance.ref;
+    ref.open();
+    expect(document.body.querySelector('[data-kj-overlay]')).toBeTruthy();
+    ref.dispose();
+    expect(document.body.querySelector('[data-kj-overlay]')).toBeNull();
+  });
+});

package/src/primitives/overlay/overlay.ts

@@ -0,0 +1,102 @@
+import {
+  Injectable, inject, signal,
+  EmbeddedViewRef, ApplicationRef, TemplateRef, ViewContainerRef,
+} from '@angular/core';
+
+/**
+ * Managed wrapper around a DOM overlay container.
+ * Provides `isOpen` as a signal and lifecycle methods.
+ *
+ * Create instances via {@link KjOverlayService} — do not construct directly.
+ *
+ * @example
+ * ```ts
+ * const ref = inject(KjOverlayService).createFromTemplate(tpl, vcr);
+ * ref.open();
+ * ```
+ */
+export class KjOverlayRef {
+  private readonly _isOpen = signal(false);
+
+  /** Whether the overlay is currently open. */
+  readonly isOpen = this._isOpen.asReadonly();
+
+  constructor(
+    private readonly container: HTMLElement,
+    private readonly viewRef: EmbeddedViewRef<unknown>,
+    private readonly appRef: ApplicationRef,
+  ) {}
+
+  /** Shows the overlay container. */
+  open(): void {
+    this._isOpen.set(true);
+    this.container.removeAttribute('hidden');
+  }
+
+  /** Hides the overlay container. */
+  close(): void {
+    this._isOpen.set(false);
+    this.container.setAttribute('hidden', '');
+  }
+
+  /** Toggles the overlay between open and closed states. */
+  toggle(): void {
+    this.isOpen() ? this.close() : this.open();
+  }
+
+  /**
+   * Permanently removes the overlay from the DOM and destroys the view.
+   * Call inside `DestroyRef.onDestroy()` to prevent memory leaks.
+   */
+  dispose(): void {
+    this.appRef.detachView(this.viewRef);
+    this.viewRef.destroy();
+    this.container.remove();
+  }
+
+  /** The underlying container `HTMLElement` for advanced usage. */
+  get el(): HTMLElement {
+    return this.container;
+  }
+}
+
+/**
+ * Factory service for creating managed overlay containers.
+ * Creates a container appended to `document.body`.
+ *
+ * @example
+ * ```ts
+ * // Dialog — full-screen backdrop overlay
+ * const ref = inject(KjOverlayService).createFromTemplate(tpl, vcr);
+ * ref.open();
+ *
+ * // Clean up when done
+ * ref.dispose();
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class KjOverlayService {
+  private readonly appRef = inject(ApplicationRef);
+
+  /**
+   * Creates an overlay from an Angular template ref.
+   * The container is appended to `document.body` and starts hidden.
+   *
+   * @param tpl - The `TemplateRef` to render inside the overlay.
+   * @param vcr - The `ViewContainerRef` used to create the embedded view.
+   * @returns A {@link KjOverlayRef} managing the created overlay.
+   */
+  createFromTemplate(tpl: TemplateRef<unknown>, vcr: ViewContainerRef): KjOverlayRef {
+    // Use TemplateRef.createEmbeddedView directly so the view is not pre-attached
+    // to the VCR's container — ApplicationRef can own the view lifecycle.
+    const viewRef = tpl.createEmbeddedView(null as never, vcr.injector);
+    this.appRef.attachView(viewRef);
+
+    const container = document.createElement('div');
+    container.setAttribute('data-kj-overlay', '');
+    viewRef.rootNodes.forEach(node => container.appendChild(node));
+    document.body.appendChild(container);
+
+    return new KjOverlayRef(container, viewRef, this.appRef);
+  }
+}