@threadplane/chatClassv0.3.4

ChatConnectedOverlayDirective

Applied to an <ng-template>. When chatOverlayOpen is true, the template content is portaled into the shared body-level overlay container and positioned connected to chatOverlayOrigin, repositioning live on scroll/resize. Closes on outside mousedown (via the chatOverlayOutsideClick output) and Tab; returns focus to the origin when focus was inside the pane.

NOTE: the directive does not own the open state — it only emits. To fully close the overlay, consumers MUST handle BOTH (chatOverlayOutsideClick) and (chatOverlayDetach). Tab-close (and Escape, when the consumer routes it) surface through chatOverlayDetach, so wiring only chatOverlayOutsideClick leaves the overlay stuck open on Tab.

View sourceView Markdown
import { ChatConnectedOverlayDirective } from '@threadplane/chat';

Declaration

export declare class ChatConnectedOverlayDirective  {
  constructor();
  readonly attached: import("@angular/core").OutputEmitterRef<HTMLElement>;
  readonly detached: import("@angular/core").OutputEmitterRef<void>;
  readonly open: import("@angular/core").InputSignal<boolean>;
  readonly origin: import("@angular/core").InputSignal<ChatOverlayOriginDirective>;
  readonly outsideClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
  readonly panelClass: import("@angular/core").InputSignal<string | string[]>;
  readonly positions: import("@angular/core").InputSignal<ConnectedPosition[]>;
}

Angular template API

Selector: [chatConnectedOverlay]

Inputs

chatOverlayOpen
boolean Property: open
chatOverlayOrigin · required
ChatOverlayOriginDirective Property: origin
chatOverlayPanelClass
string | string[] Property: panelClass
chatOverlayPositions
ConnectedPosition[] Property: positions

Outputs

chatOverlayAttached
HTMLElement Property: attached
chatOverlayDetach
void Property: detached
chatOverlayOutsideClick
MouseEvent Property: outsideClick

Members

Constructor · overload 1

Constructs a new instance of the ChatConnectedOverlayDirective class

constructor();

attached

Emits the pane element once attached (consumers focus content from it).

readonly attached: import("@angular/core").OutputEmitterRef<HTMLElement>;

detached

readonly detached: import("@angular/core").OutputEmitterRef<void>;

open

readonly open: import("@angular/core").InputSignal<boolean>;

origin

readonly origin: import("@angular/core").InputSignal<ChatOverlayOriginDirective>;

outsideClick

readonly outsideClick: import("@angular/core").OutputEmitterRef<MouseEvent>;

panelClass

readonly panelClass: import("@angular/core").InputSignal<string | string[]>;

positions

readonly positions: import("@angular/core").InputSignal<ConnectedPosition[]>;