UNPKG

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