1 | /**
|
2 | * @license Angular v13.3.9
|
3 | * (c) 2010-2022 Google LLC. https://angular.io/
|
4 | * License: MIT
|
5 | */
|
6 |
|
7 | import { Injector } from '@angular/core';
|
8 | import { Observable } from 'rxjs';
|
9 | import { Subscription } from 'rxjs';
|
10 | import { Type } from '@angular/core';
|
11 | import { 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 | */
|
35 | export 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 | */
|
42 | export 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 | */
|
79 | export 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 | */
|
100 | export 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 | */
|
119 | export 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 | */
|
132 | export 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 | */
|
142 | export 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 | */
|
150 | export 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 | */
|
159 | export declare type WithProperties<P> = {
|
160 | [property in keyof P]: P[property];
|
161 | };
|
162 |
|
163 | export { }
|