igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
63 lines (62 loc) • 2.15 kB
TypeScript
import type { LitElement, ReactiveController } from 'lit';
/**
* A Lit reactive controller that bridges the native
* [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API)
* with a component's programmatic API.
*
* When an `igc-button` (or any element using the `command` / `commandfor`
* attributes) invokes a command on the host, the browser dispatches a
* `CommandEvent` on the target element. This controller listens for that
* event and forwards it to the registered callback for the given command
* string.
*
* @example
* ```ts
* class IgcDialogComponent extends LitElement {
* private readonly _commands = addCommandController(this)
* .set('open', this.show)
* .set('close', this.hide)
* .set('toggle-popover', this.toggle);
* }
* ```
*
* With the above setup, a button in the document can control the dialog
* declaratively:
*
* ```html
* <igc-button command="open" commandfor="my-dialog">Open</igc-button>
* <igc-dialog id="my-dialog"></igc-dialog>
* ```
*/
declare class CommandController implements ReactiveController {
private readonly _host;
private readonly _commandMap;
constructor(host: LitElement);
/**
* Registers a command string and its corresponding handler callback.
*
* Returns `this` to allow chained calls:
* ```ts
* addCommandController(this)
* .set('open', this.show)
* .set('close', this.hide);
* ```
*
* @param command - The command string to listen for (e.g. `'open'`,
* `'toggle-popover'`, or a custom `'--my-command'`).
* @param callback - The method to invoke when the command is received.
* Called with the host as `this`.
*/
set(command: string, callback: () => unknown): this;
/** @internal */
hostConnected(): void;
/** @internal */
hostDisconnected(): void;
/** @internal */
handleEvent(event: Event): void;
}
/**
* Creates a {@link CommandController} and attaches it to the given host.
*/
export declare function addCommandController(host: LitElement): CommandController;
export type { CommandController };