UNPKG

5.51 kBTypeScriptView Raw
1/**
2 * @license Angular v12.1.4
3 * (c) 2010-2021 Google LLC. https://angular.io/
4 * License: MIT
5 */
6
7import { Injector } from '@angular/core';
8import { Observable } from 'rxjs';
9import { Subscription } from 'rxjs';
10import { Type } from '@angular/core';
11import { Version } from '@angular/core';
12
13/**
14 * @description Creates a custom element class based on an Angular component.
15 *
16 * Builds a class that encapsulates the functionality of the provided component and
17 * uses the configuration information to provide more context to the class.
18 * Takes the component factory's inputs and outputs to convert them to the proper
19 * custom element API and add hooks to input changes.
20 *
21 * The configuration's injector is the initial injector set on the class,
22 * and used by default for each created instance.This behavior can be overridden with the
23 * static property to affect all newly created instances, or as a constructor argument for
24 * one-off creations.
25 *
26 * @see [Angular Elements Overview](guide/elements "Turning Angular components into custom elements")
27 *
28 * @param component The component to transform.
29 * @param config A configuration that provides initialization information to the created class.
30 * @returns The custom-element construction class, which can be registered with
31 * a browser's `CustomElementRegistry`.
32 *
33 * @publicApi
34 */
35export declare function createCustomElement<P>(component: Type<any>, config: NgElementConfig): NgElementConstructor<P>;
36
37/**
38 * Implements the functionality needed for a custom element.
39 *
40 * @publicApi
41 */
42export declare abstract class NgElement extends HTMLElement {
43 /**
44 * The strategy that controls how a component is transformed in a custom element.
45 */
46 protected abstract ngElementStrategy: NgElementStrategy;
47 /**
48 * A subscription to change, connect, and disconnect events in the custom element.
49 */
50 protected ngElementEventsSubscription: Subscription | null;
51 /**
52 * Prototype for a handler that responds to a change in an observed attribute.
53 * @param attrName The name of the attribute that has changed.
54 * @param oldValue The previous value of the attribute.
55 * @param newValue The new value of the attribute.
56 * @param namespace The namespace in which the attribute is defined.
57 * @returns Nothing.
58 */
59 abstract attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string, namespace?: string): void;
60 /**
61 * Prototype for a handler that responds to the insertion of the custom element in the DOM.
62 * @returns Nothing.
63 */
64 abstract connectedCallback(): void;
65 /**
66 * Prototype for a handler that responds to the deletion of the custom element from the DOM.
67 * @returns Nothing.
68 */
69 abstract disconnectedCallback(): void;
70}
71
72/**
73 * A configuration that initializes an NgElementConstructor with the
74 * dependencies and strategy it needs to transform a component into
75 * a custom element class.
76 *
77 * @publicApi
78 */
79export declare interface NgElementConfig {
80 /**
81 * The injector to use for retrieving the component's factory.
82 */
83 injector: Injector;
84 /**
85 * An optional custom strategy factory to use instead of the default.
86 * The strategy controls how the transformation is performed.
87 */
88 strategyFactory?: NgElementStrategyFactory;
89}
90
91/**
92 * Prototype for a class constructor based on an Angular component
93 * that can be used for custom element registration. Implemented and returned
94 * by the {@link createCustomElement createCustomElement() function}.
95 *
96 * @see [Angular Elements Overview](guide/elements "Turning Angular components into custom elements")
97 *
98 * @publicApi
99 */
100export declare interface NgElementConstructor<P> {
101 /**
102 * An array of observed attribute names for the custom element,
103 * derived by transforming input property names from the source component.
104 */
105 readonly observedAttributes: string[];
106 /**
107 * Initializes a constructor instance.
108 * @param injector If provided, overrides the configured injector.
109 */
110 new (injector?: Injector): NgElement & WithProperties<P>;
111}
112
113/**
114 * Underlying strategy used by the NgElement to create/destroy the component and react to input
115 * changes.
116 *
117 * @publicApi
118 */
119export declare interface NgElementStrategy {
120 events: Observable<NgElementStrategyEvent>;
121 connect(element: HTMLElement): void;
122 disconnect(): void;
123 getInputValue(propName: string): any;
124 setInputValue(propName: string, value: string): void;
125}
126
127/**
128 * Interface for the events emitted through the NgElementStrategy.
129 *
130 * @publicApi
131 */
132export declare interface NgElementStrategyEvent {
133 name: string;
134 value: any;
135}
136
137/**
138 * Factory used to create new strategies for each NgElement instance.
139 *
140 * @publicApi
141 */
142export declare interface NgElementStrategyFactory {
143 /** Creates a new instance to be used for an NgElement. */
144 create(injector: Injector): NgElementStrategy;
145}
146
147/**
148 * @publicApi
149 */
150export declare const VERSION: Version;
151
152/**
153 * Additional type information that can be added to the NgElement class,
154 * for properties that are added based
155 * on the inputs and methods of the underlying component.
156 *
157 * @publicApi
158 */
159export declare type WithProperties<P> = {
160 [property in keyof P]: P[property];
161};
162
163export { }