@zdigambar/ngx-element 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +97 -0
- package/bundles/zdigambar-ngx-element.umd.js +579 -0
- package/bundles/zdigambar-ngx-element.umd.js.map +1 -0
- package/bundles/zdigambar-ngx-element.umd.min.js +16 -0
- package/bundles/zdigambar-ngx-element.umd.min.js.map +1 -0
- package/esm2015/lib/lazy-component-loaded-event.js +2 -0
- package/esm2015/lib/ngx-element.component.js +105 -0
- package/esm2015/lib/ngx-element.module.js +33 -0
- package/esm2015/lib/ngx-element.service.js +136 -0
- package/esm2015/lib/tokens.js +4 -0
- package/esm2015/public-api.js +5 -0
- package/esm2015/zdigambar-ngx-element.js +8 -0
- package/fesm2015/zdigambar-ngx-element.js +279 -0
- package/fesm2015/zdigambar-ngx-element.js.map +1 -0
- package/lib/lazy-component-loaded-event.d.ts +5 -0
- package/lib/ngx-element.component.d.ts +27 -0
- package/lib/ngx-element.module.d.ts +7 -0
- package/lib/ngx-element.service.d.ts +28 -0
- package/lib/tokens.d.ts +7 -0
- package/package.json +39 -0
- package/public-api.d.ts +1 -0
- package/zdigambar-ngx-element.d.ts +7 -0
- package/zdigambar-ngx-element.metadata.json +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Supported version-
|
|
2
|
+
This is only ngx-element is support only #Angular 10#
|
|
3
|
+
|
|
4
|
+
# NgxElement
|
|
5
|
+
|
|
6
|
+
NgxElement enables to lazy load Angular components in non-angular applications.
|
|
7
|
+
The library will register a custom element to which you can pass an attribute to specify what component you want to load.
|
|
8
|
+
|
|
9
|
+
It's a great way to use Angular in your CMS platform in an efficient manner.
|
|
10
|
+
|
|
11
|
+
## Install Angular Elements
|
|
12
|
+
This library depends on Angular Elements. You can install it by running:
|
|
13
|
+
```
|
|
14
|
+
$ ng add @angular/elements
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Installing the library
|
|
18
|
+
```
|
|
19
|
+
$ npm install @zdigambar/ngx-element
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
### 1) Configure the Module containing the lazy loaded component
|
|
24
|
+
|
|
25
|
+
First of all, expose the Angular Component that should be loaded via a customElementComponent property.
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
...
|
|
29
|
+
@NgModule({
|
|
30
|
+
declarations: [TalkComponent],
|
|
31
|
+
...
|
|
32
|
+
exports: [TalkComponent],
|
|
33
|
+
entryComponents: [TalkComponent]
|
|
34
|
+
})
|
|
35
|
+
export class TalkModule {
|
|
36
|
+
customElementComponent: Type<any> = TalkComponent;
|
|
37
|
+
...
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 2) Define the lazy component map in your AppModule
|
|
42
|
+
Just like with the Angular Router, define the map of component selector and lazy module.
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
const lazyConfig = [
|
|
46
|
+
{
|
|
47
|
+
selector: 'talk',
|
|
48
|
+
loadChildren: () => import('./talk/talk.module').then(m => m.TalkModule)
|
|
49
|
+
}
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
@NgModule({
|
|
53
|
+
...,
|
|
54
|
+
imports: [
|
|
55
|
+
...,
|
|
56
|
+
NgxElementModule.forRoot(lazyConfig)
|
|
57
|
+
],
|
|
58
|
+
...
|
|
59
|
+
})
|
|
60
|
+
export class AppModule {
|
|
61
|
+
...
|
|
62
|
+
ngDoBootstrap() {}
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 3) Use the lazy loaded component
|
|
67
|
+
You can load your Angular component by adding an `<ngx-element>` tag to the DOM in your non-angular application like follows:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
<ngx-element
|
|
71
|
+
selector="talk"
|
|
72
|
+
data-title="Angular Elements"
|
|
73
|
+
data-description="How to write Angular and get Web Components"
|
|
74
|
+
data-speaker="Digambar">
|
|
75
|
+
</ngx-element>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 4) Listen to events
|
|
79
|
+
You can listen to events emitted by Angular components.
|
|
80
|
+
|
|
81
|
+
Add an `@Output` event to your component:
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
...
|
|
85
|
+
@Output() tagClick: EventEmitter<string> = new EventEmitter();
|
|
86
|
+
...
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Then add an event listener to the `tagClick` event on the appropiate `<ngx-element>` element:
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
const talks = document.querySelector('ngx-element[selector="talk"]');
|
|
93
|
+
talks.addEventListener('tagClick', event => {
|
|
94
|
+
const emittedValue = event.detail;
|
|
95
|
+
...
|
|
96
|
+
});
|
|
97
|
+
```
|
|
@@ -0,0 +1,579 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/elements'), require('rxjs'), require('rxjs/operators')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@zdigambar/ngx-element', ['exports', '@angular/core', '@angular/elements', 'rxjs', 'rxjs/operators'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.zdigambar = global.zdigambar || {}, global.zdigambar['ngx-element'] = {}), global.ng.core, global.ng.elements, global.rxjs, global.rxjs.operators));
|
|
5
|
+
}(this, (function (exports, i0, elements, rxjs, operators) { 'use strict';
|
|
6
|
+
|
|
7
|
+
/*! *****************************************************************************
|
|
8
|
+
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
9
|
+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
10
|
+
this file except in compliance with the License. You may obtain a copy of the
|
|
11
|
+
License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
|
|
13
|
+
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
14
|
+
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
|
15
|
+
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
|
16
|
+
MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
17
|
+
|
|
18
|
+
See the Apache Version 2.0 License for specific language governing permissions
|
|
19
|
+
and limitations under the License.
|
|
20
|
+
***************************************************************************** */
|
|
21
|
+
/* global Reflect, Promise */
|
|
22
|
+
var extendStatics = function (d, b) {
|
|
23
|
+
extendStatics = Object.setPrototypeOf ||
|
|
24
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
25
|
+
function (d, b) { for (var p in b)
|
|
26
|
+
if (b.hasOwnProperty(p))
|
|
27
|
+
d[p] = b[p]; };
|
|
28
|
+
return extendStatics(d, b);
|
|
29
|
+
};
|
|
30
|
+
function __extends(d, b) {
|
|
31
|
+
extendStatics(d, b);
|
|
32
|
+
function __() { this.constructor = d; }
|
|
33
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
34
|
+
}
|
|
35
|
+
var __assign = function () {
|
|
36
|
+
__assign = Object.assign || function __assign(t) {
|
|
37
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
38
|
+
s = arguments[i];
|
|
39
|
+
for (var p in s)
|
|
40
|
+
if (Object.prototype.hasOwnProperty.call(s, p))
|
|
41
|
+
t[p] = s[p];
|
|
42
|
+
}
|
|
43
|
+
return t;
|
|
44
|
+
};
|
|
45
|
+
return __assign.apply(this, arguments);
|
|
46
|
+
};
|
|
47
|
+
function __rest(s, e) {
|
|
48
|
+
var t = {};
|
|
49
|
+
for (var p in s)
|
|
50
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
51
|
+
t[p] = s[p];
|
|
52
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
53
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
54
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
55
|
+
t[p[i]] = s[p[i]];
|
|
56
|
+
}
|
|
57
|
+
return t;
|
|
58
|
+
}
|
|
59
|
+
function __decorate(decorators, target, key, desc) {
|
|
60
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
61
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
|
|
62
|
+
r = Reflect.decorate(decorators, target, key, desc);
|
|
63
|
+
else
|
|
64
|
+
for (var i = decorators.length - 1; i >= 0; i--)
|
|
65
|
+
if (d = decorators[i])
|
|
66
|
+
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
67
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
68
|
+
}
|
|
69
|
+
function __param(paramIndex, decorator) {
|
|
70
|
+
return function (target, key) { decorator(target, key, paramIndex); };
|
|
71
|
+
}
|
|
72
|
+
function __metadata(metadataKey, metadataValue) {
|
|
73
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
|
|
74
|
+
return Reflect.metadata(metadataKey, metadataValue);
|
|
75
|
+
}
|
|
76
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
77
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
78
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
79
|
+
function fulfilled(value) { try {
|
|
80
|
+
step(generator.next(value));
|
|
81
|
+
}
|
|
82
|
+
catch (e) {
|
|
83
|
+
reject(e);
|
|
84
|
+
} }
|
|
85
|
+
function rejected(value) { try {
|
|
86
|
+
step(generator["throw"](value));
|
|
87
|
+
}
|
|
88
|
+
catch (e) {
|
|
89
|
+
reject(e);
|
|
90
|
+
} }
|
|
91
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
92
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
function __generator(thisArg, body) {
|
|
96
|
+
var _ = { label: 0, sent: function () { if (t[0] & 1)
|
|
97
|
+
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
98
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
|
|
99
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
100
|
+
function step(op) {
|
|
101
|
+
if (f)
|
|
102
|
+
throw new TypeError("Generator is already executing.");
|
|
103
|
+
while (_)
|
|
104
|
+
try {
|
|
105
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
|
|
106
|
+
return t;
|
|
107
|
+
if (y = 0, t)
|
|
108
|
+
op = [op[0] & 2, t.value];
|
|
109
|
+
switch (op[0]) {
|
|
110
|
+
case 0:
|
|
111
|
+
case 1:
|
|
112
|
+
t = op;
|
|
113
|
+
break;
|
|
114
|
+
case 4:
|
|
115
|
+
_.label++;
|
|
116
|
+
return { value: op[1], done: false };
|
|
117
|
+
case 5:
|
|
118
|
+
_.label++;
|
|
119
|
+
y = op[1];
|
|
120
|
+
op = [0];
|
|
121
|
+
continue;
|
|
122
|
+
case 7:
|
|
123
|
+
op = _.ops.pop();
|
|
124
|
+
_.trys.pop();
|
|
125
|
+
continue;
|
|
126
|
+
default:
|
|
127
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
|
|
128
|
+
_ = 0;
|
|
129
|
+
continue;
|
|
130
|
+
}
|
|
131
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
|
|
132
|
+
_.label = op[1];
|
|
133
|
+
break;
|
|
134
|
+
}
|
|
135
|
+
if (op[0] === 6 && _.label < t[1]) {
|
|
136
|
+
_.label = t[1];
|
|
137
|
+
t = op;
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
if (t && _.label < t[2]) {
|
|
141
|
+
_.label = t[2];
|
|
142
|
+
_.ops.push(op);
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
if (t[2])
|
|
146
|
+
_.ops.pop();
|
|
147
|
+
_.trys.pop();
|
|
148
|
+
continue;
|
|
149
|
+
}
|
|
150
|
+
op = body.call(thisArg, _);
|
|
151
|
+
}
|
|
152
|
+
catch (e) {
|
|
153
|
+
op = [6, e];
|
|
154
|
+
y = 0;
|
|
155
|
+
}
|
|
156
|
+
finally {
|
|
157
|
+
f = t = 0;
|
|
158
|
+
}
|
|
159
|
+
if (op[0] & 5)
|
|
160
|
+
throw op[1];
|
|
161
|
+
return { value: op[0] ? op[1] : void 0, done: true };
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
function __exportStar(m, exports) {
|
|
165
|
+
for (var p in m)
|
|
166
|
+
if (!exports.hasOwnProperty(p))
|
|
167
|
+
exports[p] = m[p];
|
|
168
|
+
}
|
|
169
|
+
function __values(o) {
|
|
170
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
171
|
+
if (m)
|
|
172
|
+
return m.call(o);
|
|
173
|
+
if (o && typeof o.length === "number")
|
|
174
|
+
return {
|
|
175
|
+
next: function () {
|
|
176
|
+
if (o && i >= o.length)
|
|
177
|
+
o = void 0;
|
|
178
|
+
return { value: o && o[i++], done: !o };
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
182
|
+
}
|
|
183
|
+
function __read(o, n) {
|
|
184
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
185
|
+
if (!m)
|
|
186
|
+
return o;
|
|
187
|
+
var i = m.call(o), r, ar = [], e;
|
|
188
|
+
try {
|
|
189
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
|
|
190
|
+
ar.push(r.value);
|
|
191
|
+
}
|
|
192
|
+
catch (error) {
|
|
193
|
+
e = { error: error };
|
|
194
|
+
}
|
|
195
|
+
finally {
|
|
196
|
+
try {
|
|
197
|
+
if (r && !r.done && (m = i["return"]))
|
|
198
|
+
m.call(i);
|
|
199
|
+
}
|
|
200
|
+
finally {
|
|
201
|
+
if (e)
|
|
202
|
+
throw e.error;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
return ar;
|
|
206
|
+
}
|
|
207
|
+
function __spread() {
|
|
208
|
+
for (var ar = [], i = 0; i < arguments.length; i++)
|
|
209
|
+
ar = ar.concat(__read(arguments[i]));
|
|
210
|
+
return ar;
|
|
211
|
+
}
|
|
212
|
+
function __spreadArrays() {
|
|
213
|
+
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
|
|
214
|
+
s += arguments[i].length;
|
|
215
|
+
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
216
|
+
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
217
|
+
r[k] = a[j];
|
|
218
|
+
return r;
|
|
219
|
+
}
|
|
220
|
+
;
|
|
221
|
+
function __await(v) {
|
|
222
|
+
return this instanceof __await ? (this.v = v, this) : new __await(v);
|
|
223
|
+
}
|
|
224
|
+
function __asyncGenerator(thisArg, _arguments, generator) {
|
|
225
|
+
if (!Symbol.asyncIterator)
|
|
226
|
+
throw new TypeError("Symbol.asyncIterator is not defined.");
|
|
227
|
+
var g = generator.apply(thisArg, _arguments || []), i, q = [];
|
|
228
|
+
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
|
|
229
|
+
function verb(n) { if (g[n])
|
|
230
|
+
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
|
|
231
|
+
function resume(n, v) { try {
|
|
232
|
+
step(g[n](v));
|
|
233
|
+
}
|
|
234
|
+
catch (e) {
|
|
235
|
+
settle(q[0][3], e);
|
|
236
|
+
} }
|
|
237
|
+
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
|
|
238
|
+
function fulfill(value) { resume("next", value); }
|
|
239
|
+
function reject(value) { resume("throw", value); }
|
|
240
|
+
function settle(f, v) { if (f(v), q.shift(), q.length)
|
|
241
|
+
resume(q[0][0], q[0][1]); }
|
|
242
|
+
}
|
|
243
|
+
function __asyncDelegator(o) {
|
|
244
|
+
var i, p;
|
|
245
|
+
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
|
|
246
|
+
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
|
|
247
|
+
}
|
|
248
|
+
function __asyncValues(o) {
|
|
249
|
+
if (!Symbol.asyncIterator)
|
|
250
|
+
throw new TypeError("Symbol.asyncIterator is not defined.");
|
|
251
|
+
var m = o[Symbol.asyncIterator], i;
|
|
252
|
+
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
|
|
253
|
+
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
|
|
254
|
+
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
|
|
255
|
+
}
|
|
256
|
+
function __makeTemplateObject(cooked, raw) {
|
|
257
|
+
if (Object.defineProperty) {
|
|
258
|
+
Object.defineProperty(cooked, "raw", { value: raw });
|
|
259
|
+
}
|
|
260
|
+
else {
|
|
261
|
+
cooked.raw = raw;
|
|
262
|
+
}
|
|
263
|
+
return cooked;
|
|
264
|
+
}
|
|
265
|
+
;
|
|
266
|
+
function __importStar(mod) {
|
|
267
|
+
if (mod && mod.__esModule)
|
|
268
|
+
return mod;
|
|
269
|
+
var result = {};
|
|
270
|
+
if (mod != null)
|
|
271
|
+
for (var k in mod)
|
|
272
|
+
if (Object.hasOwnProperty.call(mod, k))
|
|
273
|
+
result[k] = mod[k];
|
|
274
|
+
result.default = mod;
|
|
275
|
+
return result;
|
|
276
|
+
}
|
|
277
|
+
function __importDefault(mod) {
|
|
278
|
+
return (mod && mod.__esModule) ? mod : { default: mod };
|
|
279
|
+
}
|
|
280
|
+
function __classPrivateFieldGet(receiver, privateMap) {
|
|
281
|
+
if (!privateMap.has(receiver)) {
|
|
282
|
+
throw new TypeError("attempted to get private field on non-instance");
|
|
283
|
+
}
|
|
284
|
+
return privateMap.get(receiver);
|
|
285
|
+
}
|
|
286
|
+
function __classPrivateFieldSet(receiver, privateMap, value) {
|
|
287
|
+
if (!privateMap.has(receiver)) {
|
|
288
|
+
throw new TypeError("attempted to set private field on non-instance");
|
|
289
|
+
}
|
|
290
|
+
privateMap.set(receiver, value);
|
|
291
|
+
return value;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* Injection token to provide the element path modules. */
|
|
295
|
+
var LAZY_CMPS_PATH_TOKEN = new i0.InjectionToken('ngx-lazy-cmp-registry');
|
|
296
|
+
|
|
297
|
+
var NgxElementService = /** @class */ (function () {
|
|
298
|
+
function NgxElementService(modulePaths, compiler, injector) {
|
|
299
|
+
this.compiler = compiler;
|
|
300
|
+
this.injector = injector;
|
|
301
|
+
this.loadedComponents = new Map();
|
|
302
|
+
this.elementsLoading = new Map();
|
|
303
|
+
this.injectors = new Map();
|
|
304
|
+
this.componentFactoryResolvers = new Map();
|
|
305
|
+
var ELEMENT_MODULE_PATHS = new Map();
|
|
306
|
+
modulePaths.forEach(function (route) {
|
|
307
|
+
ELEMENT_MODULE_PATHS.set(route.selector, route);
|
|
308
|
+
});
|
|
309
|
+
this.componentsToLoad = ELEMENT_MODULE_PATHS;
|
|
310
|
+
}
|
|
311
|
+
NgxElementService.prototype.receiveContext = function (component, injector) {
|
|
312
|
+
this.injectors.set(component, injector);
|
|
313
|
+
this.componentFactoryResolvers.set(component, injector.get(i0.ComponentFactoryResolver));
|
|
314
|
+
};
|
|
315
|
+
NgxElementService.prototype.getInjector = function (component) {
|
|
316
|
+
return this.injectors.get(component);
|
|
317
|
+
};
|
|
318
|
+
NgxElementService.prototype.getComponentFactoryResolver = function (component) {
|
|
319
|
+
return this.componentFactoryResolvers.get(component);
|
|
320
|
+
};
|
|
321
|
+
NgxElementService.prototype.getComponentsToLoad = function () {
|
|
322
|
+
return this.componentsToLoad;
|
|
323
|
+
};
|
|
324
|
+
NgxElementService.prototype.getComponentToLoad = function (selector) {
|
|
325
|
+
// Returns observable that completes when the lazy module has been loaded.
|
|
326
|
+
var registered = this.loadComponent(selector);
|
|
327
|
+
return rxjs.from(registered);
|
|
328
|
+
};
|
|
329
|
+
/**
|
|
330
|
+
* Allows to lazy load a component given its selector.
|
|
331
|
+
* If the component selector has been registered, it's according module
|
|
332
|
+
* will be fetched lazily
|
|
333
|
+
* @param componentTag selector of the component to load
|
|
334
|
+
*/
|
|
335
|
+
NgxElementService.prototype.loadComponent = function (componentSelector) {
|
|
336
|
+
var _this = this;
|
|
337
|
+
if (this.elementsLoading.has(componentSelector)) {
|
|
338
|
+
return this.elementsLoading.get(componentSelector);
|
|
339
|
+
}
|
|
340
|
+
if (this.componentsToLoad.has(componentSelector)) {
|
|
341
|
+
var cmpRegistryEntry = this.componentsToLoad.get(componentSelector);
|
|
342
|
+
var path_1 = cmpRegistryEntry.loadChildren;
|
|
343
|
+
var loadPromise = new Promise(function (resolve, reject) {
|
|
344
|
+
path_1()
|
|
345
|
+
.then(function (elementModuleOrFactory) {
|
|
346
|
+
/**
|
|
347
|
+
* With View Engine, the NgModule factory is created and provided when loaded.
|
|
348
|
+
* With Ivy, only the NgModule class is provided loaded and must be compiled.
|
|
349
|
+
* This uses the same mechanism as the deprecated `SystemJsNgModuleLoader` in
|
|
350
|
+
* in `packages/core/src/linker/system_js_ng_module_factory_loader.ts`
|
|
351
|
+
* to pass on the NgModuleFactory, or compile the NgModule and return its NgModuleFactory.
|
|
352
|
+
*/
|
|
353
|
+
if (elementModuleOrFactory instanceof i0.NgModuleFactory) {
|
|
354
|
+
return elementModuleOrFactory;
|
|
355
|
+
}
|
|
356
|
+
else {
|
|
357
|
+
try {
|
|
358
|
+
return _this.compiler.compileModuleAsync(elementModuleOrFactory);
|
|
359
|
+
}
|
|
360
|
+
catch (err) {
|
|
361
|
+
// return the error
|
|
362
|
+
reject(err);
|
|
363
|
+
// break the promise chain
|
|
364
|
+
throw err;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
})
|
|
368
|
+
.then(function (moduleFactory) {
|
|
369
|
+
var elementModuleRef = moduleFactory.create(_this.injector);
|
|
370
|
+
var componentClass;
|
|
371
|
+
if (typeof elementModuleRef.instance.customElementComponent === 'object') {
|
|
372
|
+
componentClass = elementModuleRef.instance.customElementComponent[componentSelector];
|
|
373
|
+
if (!componentClass) {
|
|
374
|
+
// tslint:disable-next-line: no-string-throw
|
|
375
|
+
throw "You specified multiple component elements in module " + elementModuleRef + " but there was no match for tag\n " + componentSelector + " in " + JSON.stringify(elementModuleRef.instance.customElementComponent) + ".\n Make sure the selector in the module is aligned with the one specified in the lazy module definition.";
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
else {
|
|
379
|
+
componentClass = elementModuleRef.instance.customElementComponent;
|
|
380
|
+
}
|
|
381
|
+
// Register injector of the lazy module.
|
|
382
|
+
// This is needed to share the entryComponents between the lazy module and the application
|
|
383
|
+
var moduleInjector = elementModuleRef.injector;
|
|
384
|
+
_this.receiveContext(componentClass, moduleInjector);
|
|
385
|
+
_this.loadedComponents.set(componentSelector, componentClass);
|
|
386
|
+
_this.elementsLoading.delete(componentSelector);
|
|
387
|
+
_this.componentsToLoad.delete(componentSelector);
|
|
388
|
+
resolve({
|
|
389
|
+
selector: componentSelector,
|
|
390
|
+
componentClass: componentClass
|
|
391
|
+
});
|
|
392
|
+
})
|
|
393
|
+
.catch(function (err) {
|
|
394
|
+
_this.elementsLoading.delete(componentSelector);
|
|
395
|
+
return Promise.reject(err);
|
|
396
|
+
});
|
|
397
|
+
});
|
|
398
|
+
this.elementsLoading.set(componentSelector, loadPromise);
|
|
399
|
+
return loadPromise;
|
|
400
|
+
}
|
|
401
|
+
else if (this.loadedComponents.has(componentSelector)) {
|
|
402
|
+
// component already loaded
|
|
403
|
+
return new Promise(function (resolve) {
|
|
404
|
+
resolve({
|
|
405
|
+
selector: componentSelector,
|
|
406
|
+
componentClass: _this.loadedComponents.get(componentSelector)
|
|
407
|
+
});
|
|
408
|
+
});
|
|
409
|
+
}
|
|
410
|
+
else {
|
|
411
|
+
throw new Error("Unrecognized component \"" + componentSelector + "\". Make sure it is registered in the component registry");
|
|
412
|
+
}
|
|
413
|
+
};
|
|
414
|
+
return NgxElementService;
|
|
415
|
+
}());
|
|
416
|
+
NgxElementService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgxElementService_Factory() { return new NgxElementService(i0.ɵɵinject(LAZY_CMPS_PATH_TOKEN), i0.ɵɵinject(i0.Compiler), i0.ɵɵinject(i0.INJECTOR)); }, token: NgxElementService, providedIn: "root" });
|
|
417
|
+
NgxElementService.decorators = [
|
|
418
|
+
{ type: i0.Injectable, args: [{
|
|
419
|
+
providedIn: 'root'
|
|
420
|
+
},] }
|
|
421
|
+
];
|
|
422
|
+
NgxElementService.ctorParameters = function () { return [
|
|
423
|
+
{ type: Array, decorators: [{ type: i0.Inject, args: [LAZY_CMPS_PATH_TOKEN,] }] },
|
|
424
|
+
{ type: i0.Compiler },
|
|
425
|
+
{ type: i0.Injector }
|
|
426
|
+
]; };
|
|
427
|
+
|
|
428
|
+
var NgxElementComponent = /** @class */ (function () {
|
|
429
|
+
function NgxElementComponent(ngxElementService, elementRef) {
|
|
430
|
+
this.ngxElementService = ngxElementService;
|
|
431
|
+
this.elementRef = elementRef;
|
|
432
|
+
}
|
|
433
|
+
/**
|
|
434
|
+
* Subscribe to event emitters of a lazy loaded and dynamically instantiated Angular component
|
|
435
|
+
* and dispatch them as Custom Events on the NgxElementComponent that is used in a template.
|
|
436
|
+
*/
|
|
437
|
+
NgxElementComponent.prototype.setProxiedOutputs = function (factory) {
|
|
438
|
+
var _this = this;
|
|
439
|
+
var eventEmitters = factory.outputs.map(function (_a) {
|
|
440
|
+
var propName = _a.propName, templateName = _a.templateName;
|
|
441
|
+
var emitter = _this.componentRef.instance[propName];
|
|
442
|
+
return emitter.pipe(operators.map(function (value) { return ({ name: templateName, value: value }); }));
|
|
443
|
+
});
|
|
444
|
+
var outputEvents = rxjs.merge.apply(void 0, __spread(eventEmitters));
|
|
445
|
+
this.ngElementEventsSubscription = outputEvents.subscribe(function (subscription) {
|
|
446
|
+
var customEvent = document.createEvent('CustomEvent');
|
|
447
|
+
customEvent.initCustomEvent(subscription.name, false, false, subscription.value);
|
|
448
|
+
_this.elementRef.nativeElement.dispatchEvent(customEvent);
|
|
449
|
+
});
|
|
450
|
+
};
|
|
451
|
+
NgxElementComponent.prototype.ngOnInit = function () {
|
|
452
|
+
var _this = this;
|
|
453
|
+
this.ngxElementService.getComponentToLoad(this.selector).subscribe(function (event) {
|
|
454
|
+
_this.componentToLoad = event.componentClass;
|
|
455
|
+
_this.componentFactoryResolver = _this.ngxElementService.getComponentFactoryResolver(_this.componentToLoad);
|
|
456
|
+
_this.injector = _this.ngxElementService.getInjector(_this.componentToLoad);
|
|
457
|
+
var attributes = _this.getElementAttributes();
|
|
458
|
+
_this.createComponent(attributes);
|
|
459
|
+
});
|
|
460
|
+
};
|
|
461
|
+
NgxElementComponent.prototype.createComponent = function (attributes) {
|
|
462
|
+
this.container.clear();
|
|
463
|
+
var factory = this.componentFactoryResolver.resolveComponentFactory(this.componentToLoad);
|
|
464
|
+
this.refInjector = i0.ReflectiveInjector.resolveAndCreate([{ provide: this.componentToLoad, useValue: this.componentToLoad }], this.injector);
|
|
465
|
+
this.componentRef = this.container.createComponent(factory, 0, this.refInjector);
|
|
466
|
+
this.setAttributes(attributes);
|
|
467
|
+
this.listenToAttributeChanges();
|
|
468
|
+
this.setProxiedOutputs(factory);
|
|
469
|
+
};
|
|
470
|
+
NgxElementComponent.prototype.setAttributes = function (attributes) {
|
|
471
|
+
var _this = this;
|
|
472
|
+
attributes.forEach(function (attr) {
|
|
473
|
+
_this.componentRef.instance[attr.name] = attr.value;
|
|
474
|
+
});
|
|
475
|
+
};
|
|
476
|
+
NgxElementComponent.prototype.getElementAttributes = function () {
|
|
477
|
+
var attrs = this.elementRef.nativeElement.attributes;
|
|
478
|
+
var attributes = [];
|
|
479
|
+
for (var attr = void 0, i = 0; i < attrs.length; i++) {
|
|
480
|
+
attr = attrs[i];
|
|
481
|
+
if (attr.nodeName.match('^data-')) {
|
|
482
|
+
attributes.push({
|
|
483
|
+
name: this.camelCaseAttribute(attr.nodeName),
|
|
484
|
+
value: attr.nodeValue
|
|
485
|
+
});
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
return attributes;
|
|
489
|
+
};
|
|
490
|
+
NgxElementComponent.prototype.camelCaseAttribute = function (attribute) {
|
|
491
|
+
var attr = attribute.replace('data-', '');
|
|
492
|
+
var chunks = attr.split('-');
|
|
493
|
+
if (chunks.length > 1) {
|
|
494
|
+
return chunks[0] + chunks.slice(1).map(function (chunk) { return chunk.replace(/^\w/, function (c) { return c.toUpperCase(); }); }).join('');
|
|
495
|
+
}
|
|
496
|
+
return attr;
|
|
497
|
+
};
|
|
498
|
+
NgxElementComponent.prototype.listenToAttributeChanges = function () {
|
|
499
|
+
var _this = this;
|
|
500
|
+
var observer = new MutationObserver(function (mutations) {
|
|
501
|
+
mutations.forEach(function (mutation) {
|
|
502
|
+
if (mutation.type === 'attributes') {
|
|
503
|
+
var attributes = _this.getElementAttributes();
|
|
504
|
+
_this.setAttributes(attributes);
|
|
505
|
+
}
|
|
506
|
+
});
|
|
507
|
+
});
|
|
508
|
+
observer.observe(this.elementRef.nativeElement, {
|
|
509
|
+
attributes: true
|
|
510
|
+
});
|
|
511
|
+
};
|
|
512
|
+
NgxElementComponent.prototype.ngOnDestroy = function () {
|
|
513
|
+
this.componentRef.destroy();
|
|
514
|
+
this.ngElementEventsSubscription.unsubscribe();
|
|
515
|
+
};
|
|
516
|
+
return NgxElementComponent;
|
|
517
|
+
}());
|
|
518
|
+
NgxElementComponent.decorators = [
|
|
519
|
+
{ type: i0.Component, args: [{
|
|
520
|
+
selector: 'lib-ngx-element',
|
|
521
|
+
template: "\n <ng-template #container></ng-template>\n "
|
|
522
|
+
},] }
|
|
523
|
+
];
|
|
524
|
+
NgxElementComponent.ctorParameters = function () { return [
|
|
525
|
+
{ type: NgxElementService },
|
|
526
|
+
{ type: i0.ElementRef }
|
|
527
|
+
]; };
|
|
528
|
+
NgxElementComponent.propDecorators = {
|
|
529
|
+
selector: [{ type: i0.Input }],
|
|
530
|
+
container: [{ type: i0.ViewChild, args: ['container', { read: i0.ViewContainerRef },] }]
|
|
531
|
+
};
|
|
532
|
+
|
|
533
|
+
var NgxElementModule = /** @class */ (function () {
|
|
534
|
+
function NgxElementModule(injector) {
|
|
535
|
+
this.injector = injector;
|
|
536
|
+
var ngxElement = elements.createCustomElement(NgxElementComponent, { injector: injector });
|
|
537
|
+
customElements.define('ngx-element', ngxElement);
|
|
538
|
+
}
|
|
539
|
+
NgxElementModule.forRoot = function (modulePaths) {
|
|
540
|
+
return {
|
|
541
|
+
ngModule: NgxElementModule,
|
|
542
|
+
providers: [
|
|
543
|
+
{
|
|
544
|
+
provide: LAZY_CMPS_PATH_TOKEN,
|
|
545
|
+
useValue: modulePaths
|
|
546
|
+
}
|
|
547
|
+
]
|
|
548
|
+
};
|
|
549
|
+
};
|
|
550
|
+
NgxElementModule.prototype.ngDoBootstrap = function () { };
|
|
551
|
+
return NgxElementModule;
|
|
552
|
+
}());
|
|
553
|
+
NgxElementModule.decorators = [
|
|
554
|
+
{ type: i0.NgModule, args: [{
|
|
555
|
+
declarations: [NgxElementComponent],
|
|
556
|
+
entryComponents: [NgxElementComponent]
|
|
557
|
+
},] }
|
|
558
|
+
];
|
|
559
|
+
NgxElementModule.ctorParameters = function () { return [
|
|
560
|
+
{ type: i0.Injector }
|
|
561
|
+
]; };
|
|
562
|
+
|
|
563
|
+
/*
|
|
564
|
+
* Public API Surface of ngx-element
|
|
565
|
+
*/
|
|
566
|
+
|
|
567
|
+
/**
|
|
568
|
+
* Generated bundle index. Do not edit.
|
|
569
|
+
*/
|
|
570
|
+
|
|
571
|
+
exports.NgxElementModule = NgxElementModule;
|
|
572
|
+
exports.ɵa = NgxElementComponent;
|
|
573
|
+
exports.ɵb = NgxElementService;
|
|
574
|
+
exports.ɵc = LAZY_CMPS_PATH_TOKEN;
|
|
575
|
+
|
|
576
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
577
|
+
|
|
578
|
+
})));
|
|
579
|
+
//# sourceMappingURL=zdigambar-ngx-element.umd.js.map
|