@sitecore-jss/sitecore-jss-angular 21.1.1 → 21.2.0-canary.2
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 +5 -3
- package/dist/README.md +5 -3
- package/dist/components/data-resolver-factory.d.ts +13 -13
- package/dist/components/date.directive.d.ts +20 -20
- package/dist/components/editframe.component.d.ts +22 -22
- package/dist/components/file.directive.d.ts +17 -17
- package/dist/components/generic-link.directive.d.ts +20 -20
- package/dist/components/guard-resolver-factory.d.ts +11 -11
- package/dist/components/hidden-rendering.component.d.ts +7 -7
- package/dist/components/image.directive.d.ts +35 -35
- package/dist/components/link.directive.d.ts +26 -26
- package/dist/components/missing-component.component.d.ts +7 -7
- package/dist/components/placeholder-loading.directive.d.ts +8 -8
- package/dist/components/placeholder.component.d.ts +59 -59
- package/dist/components/placeholder.token.d.ts +64 -64
- package/dist/components/raw.component.d.ts +12 -12
- package/dist/components/render-component.component.d.ts +33 -33
- package/dist/components/render-each.directive.d.ts +8 -8
- package/dist/components/render-empty.directive.d.ts +8 -8
- package/dist/components/rendering-field.d.ts +40 -40
- package/dist/components/rendering.d.ts +5 -5
- package/dist/components/rich-text.directive.d.ts +18 -18
- package/dist/components/router-link.directive.d.ts +19 -19
- package/dist/components/text.directive.d.ts +16 -16
- package/dist/esm2020/components/data-resolver-factory.mjs +57 -57
- package/dist/esm2020/components/date.directive.mjs +59 -59
- package/dist/esm2020/components/editframe.component.mjs +65 -65
- package/dist/esm2020/components/file.directive.mjs +44 -44
- package/dist/esm2020/components/generic-link.directive.mjs +52 -52
- package/dist/esm2020/components/guard-resolver-factory.mjs +87 -87
- package/dist/esm2020/components/hidden-rendering.component.mjs +20 -20
- package/dist/esm2020/components/image.directive.mjs +138 -136
- package/dist/esm2020/components/link.directive.mjs +115 -113
- package/dist/esm2020/components/missing-component.component.mjs +15 -15
- package/dist/esm2020/components/placeholder-loading.directive.mjs +15 -15
- package/dist/esm2020/components/placeholder.component.mjs +250 -250
- package/dist/esm2020/components/placeholder.token.mjs +23 -23
- package/dist/esm2020/components/raw.component.mjs +35 -35
- package/dist/esm2020/components/render-component.component.mjs +90 -90
- package/dist/esm2020/components/render-each.directive.mjs +15 -15
- package/dist/esm2020/components/render-empty.directive.mjs +15 -15
- package/dist/esm2020/components/rendering-field.mjs +1 -1
- package/dist/esm2020/components/rendering.mjs +7 -7
- package/dist/esm2020/components/rich-text.directive.mjs +62 -62
- package/dist/esm2020/components/router-link.directive.mjs +44 -44
- package/dist/esm2020/components/text.directive.mjs +57 -57
- package/dist/esm2020/jss-component-factory.service.mjs +83 -83
- package/dist/esm2020/lib.module.mjs +167 -167
- package/dist/esm2020/public_api.mjs +24 -24
- package/dist/esm2020/sitecore-jss-sitecore-jss-angular.mjs +4 -4
- package/dist/esm2020/utils.mjs +16 -16
- package/dist/fesm2015/sitecore-jss-sitecore-jss-angular.mjs +1403 -1399
- package/dist/fesm2015/sitecore-jss-sitecore-jss-angular.mjs.map +1 -1
- package/dist/fesm2020/sitecore-jss-sitecore-jss-angular.mjs +1404 -1400
- package/dist/fesm2020/sitecore-jss-sitecore-jss-angular.mjs.map +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/jss-component-factory.service.d.ts +25 -25
- package/dist/lib.module.d.ts +46 -46
- package/dist/package.json +2 -2
- package/dist/public_api.d.ts +25 -25
- package/dist/utils.d.ts +7 -7
- package/package.json +6 -5
|
@@ -15,1024 +15,1028 @@ export { GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldV
|
|
|
15
15
|
export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
|
|
16
16
|
export { trackingApi } from '@sitecore-jss/sitecore-jss/tracking';
|
|
17
17
|
|
|
18
|
-
/**
|
|
19
|
-
* File fields cannot be managed via the EE. We never output "editable."
|
|
20
|
-
*/
|
|
21
|
-
class FileDirective {
|
|
22
|
-
constructor(viewContainer, templateRef) {
|
|
23
|
-
this.viewContainer = viewContainer;
|
|
24
|
-
this.templateRef = templateRef;
|
|
25
|
-
}
|
|
26
|
-
ngOnChanges(changes) {
|
|
27
|
-
if (changes.field) {
|
|
28
|
-
if (!this.viewRef) {
|
|
29
|
-
this.viewContainer.clear();
|
|
30
|
-
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
31
|
-
}
|
|
32
|
-
this.updateView();
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
updateView() {
|
|
36
|
-
const field = this.field;
|
|
37
|
-
if (!field || (!field.value && !field.src)) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
const file = field.src ? field : field.value;
|
|
41
|
-
this.viewRef.rootNodes.forEach((node) => {
|
|
42
|
-
if (!file)
|
|
43
|
-
return;
|
|
44
|
-
node.href = file.src;
|
|
45
|
-
if (node.innerHTML === '') {
|
|
46
|
-
node.innerHTML = file.title || file.displayName;
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
FileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
52
|
-
FileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: FileDirective, selector: "[scFile]", inputs: { field: ["scFile", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileDirective, decorators: [{
|
|
54
|
-
type: Directive,
|
|
55
|
-
args: [{ selector: '[scFile]' }]
|
|
56
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { field: [{
|
|
57
|
-
type: Input,
|
|
58
|
-
args: ['scFile']
|
|
18
|
+
/**
|
|
19
|
+
* File fields cannot be managed via the EE. We never output "editable."
|
|
20
|
+
*/
|
|
21
|
+
class FileDirective {
|
|
22
|
+
constructor(viewContainer, templateRef) {
|
|
23
|
+
this.viewContainer = viewContainer;
|
|
24
|
+
this.templateRef = templateRef;
|
|
25
|
+
}
|
|
26
|
+
ngOnChanges(changes) {
|
|
27
|
+
if (changes.field) {
|
|
28
|
+
if (!this.viewRef) {
|
|
29
|
+
this.viewContainer.clear();
|
|
30
|
+
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
31
|
+
}
|
|
32
|
+
this.updateView();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
updateView() {
|
|
36
|
+
const field = this.field;
|
|
37
|
+
if (!field || (!field.value && !field.src)) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const file = field.src ? field : field.value;
|
|
41
|
+
this.viewRef.rootNodes.forEach((node) => {
|
|
42
|
+
if (!file)
|
|
43
|
+
return;
|
|
44
|
+
node.href = file.src;
|
|
45
|
+
if (node.innerHTML === '') {
|
|
46
|
+
node.innerHTML = file.title || file.displayName;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
FileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
52
|
+
FileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: FileDirective, selector: "[scFile]", inputs: { field: ["scFile", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileDirective, decorators: [{
|
|
54
|
+
type: Directive,
|
|
55
|
+
args: [{ selector: '[scFile]' }]
|
|
56
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { field: [{
|
|
57
|
+
type: Input,
|
|
58
|
+
args: ['scFile']
|
|
59
59
|
}] } });
|
|
60
60
|
|
|
61
|
-
class ImageDirective {
|
|
62
|
-
constructor(viewContainer, templateRef, renderer, elementRef) {
|
|
63
|
-
this.viewContainer = viewContainer;
|
|
64
|
-
this.templateRef = templateRef;
|
|
65
|
-
this.renderer = renderer;
|
|
66
|
-
this.elementRef = elementRef;
|
|
67
|
-
this.editable = true;
|
|
68
|
-
this.urlParams = {};
|
|
69
|
-
this.attrs = {};
|
|
70
|
-
this.inlineRef = null;
|
|
71
|
-
}
|
|
72
|
-
ngOnChanges(changes) {
|
|
73
|
-
if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
|
|
74
|
-
this.viewContainer.clear();
|
|
75
|
-
if (this.inlineRef) {
|
|
76
|
-
this.inlineRef.remove();
|
|
77
|
-
this.inlineRef = null;
|
|
78
|
-
}
|
|
79
|
-
this.updateView();
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
updateView() {
|
|
83
|
-
const overrideAttrs = {
|
|
84
|
-
...this.getElementAttrs(),
|
|
85
|
-
...this.attrs,
|
|
86
|
-
};
|
|
87
|
-
const media = this.field;
|
|
88
|
-
if (!media || (!media.editable && !media.value && !media.src)) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
let attrs = {};
|
|
92
|
-
// we likely have an experience editor value, should be a string
|
|
93
|
-
if (this.editable && media.editable) {
|
|
94
|
-
const foundImg = mediaApi.findEditorImageTag(media.editable);
|
|
95
|
-
if (!foundImg) {
|
|
96
|
-
return this.renderInlineWrapper(media.editable);
|
|
97
|
-
}
|
|
98
|
-
attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
|
|
99
|
-
if (!attrs) {
|
|
100
|
-
return this.renderInlineWrapper(media.editable);
|
|
101
|
-
}
|
|
102
|
-
const tempImg = this.renderer.createElement('img');
|
|
103
|
-
Object.entries(attrs).forEach(([key, attrValue]) => tempImg.setAttribute(key, attrValue));
|
|
104
|
-
const editableMarkup = media.editable.replace(foundImg.imgTag, tempImg.outerHTML);
|
|
105
|
-
return this.renderInlineWrapper(editableMarkup);
|
|
106
|
-
}
|
|
107
|
-
// some wise-guy/gal is passing in a 'raw' image object value
|
|
108
|
-
const img = media.src ? media : media.value;
|
|
109
|
-
if (!img) {
|
|
110
|
-
return null;
|
|
111
|
-
}
|
|
112
|
-
attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
|
|
113
|
-
if (attrs) {
|
|
114
|
-
this.renderTemplate(attrs);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
getImageAttrs(fieldAttrs, parsedAttrs, imageParams) {
|
|
118
|
-
const combinedAttrs = {
|
|
119
|
-
...fieldAttrs,
|
|
120
|
-
...parsedAttrs,
|
|
121
|
-
};
|
|
122
|
-
// eslint-disable-next-line prefer-const
|
|
123
|
-
let { src, srcSet, ...otherAttrs } = combinedAttrs;
|
|
124
|
-
if (!src) {
|
|
125
|
-
return null;
|
|
126
|
-
}
|
|
127
|
-
const newAttrs = {
|
|
128
|
-
...otherAttrs,
|
|
129
|
-
};
|
|
130
|
-
// update image URL for jss handler and image rendering params
|
|
131
|
-
src = mediaApi.updateImageUrl(src, imageParams, this.mediaUrlPrefix);
|
|
132
|
-
if (srcSet) {
|
|
133
|
-
// replace with HTML-formatted srcset, including updated image URLs
|
|
134
|
-
newAttrs.srcSet = mediaApi.getSrcSet(src, srcSet, imageParams, this.mediaUrlPrefix);
|
|
135
|
-
}
|
|
136
|
-
else {
|
|
137
|
-
newAttrs.src = src;
|
|
138
|
-
}
|
|
139
|
-
return newAttrs;
|
|
140
|
-
}
|
|
141
|
-
renderTemplate(imageProps) {
|
|
142
|
-
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
143
|
-
viewRef.rootNodes.forEach((node) => {
|
|
144
|
-
Object.entries(imageProps).forEach(([key, imgPropVal]) => this.renderer.setAttribute(node, key, imgPropVal));
|
|
145
|
-
});
|
|
146
|
-
}
|
|
147
|
-
getElementAttrs() {
|
|
148
|
-
const view = this.templateRef.createEmbeddedView(null);
|
|
149
|
-
const element = view.rootNodes[0];
|
|
150
|
-
if (!element) {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
span
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
parentNode.
|
|
169
|
-
this.
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
i0.ɵɵ
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
61
|
+
class ImageDirective {
|
|
62
|
+
constructor(viewContainer, templateRef, renderer, elementRef) {
|
|
63
|
+
this.viewContainer = viewContainer;
|
|
64
|
+
this.templateRef = templateRef;
|
|
65
|
+
this.renderer = renderer;
|
|
66
|
+
this.elementRef = elementRef;
|
|
67
|
+
this.editable = true;
|
|
68
|
+
this.urlParams = {};
|
|
69
|
+
this.attrs = {};
|
|
70
|
+
this.inlineRef = null;
|
|
71
|
+
}
|
|
72
|
+
ngOnChanges(changes) {
|
|
73
|
+
if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
|
|
74
|
+
this.viewContainer.clear();
|
|
75
|
+
if (this.inlineRef) {
|
|
76
|
+
this.inlineRef.remove();
|
|
77
|
+
this.inlineRef = null;
|
|
78
|
+
}
|
|
79
|
+
this.updateView();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
updateView() {
|
|
83
|
+
const overrideAttrs = {
|
|
84
|
+
...this.getElementAttrs(),
|
|
85
|
+
...this.attrs,
|
|
86
|
+
};
|
|
87
|
+
const media = this.field;
|
|
88
|
+
if (!media || (!media.editable && !media.value && !media.src)) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
let attrs = {};
|
|
92
|
+
// we likely have an experience editor value, should be a string
|
|
93
|
+
if (this.editable && media.editable) {
|
|
94
|
+
const foundImg = mediaApi.findEditorImageTag(media.editable);
|
|
95
|
+
if (!foundImg) {
|
|
96
|
+
return this.renderInlineWrapper(media.editable);
|
|
97
|
+
}
|
|
98
|
+
attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
|
|
99
|
+
if (!attrs) {
|
|
100
|
+
return this.renderInlineWrapper(media.editable);
|
|
101
|
+
}
|
|
102
|
+
const tempImg = this.renderer.createElement('img');
|
|
103
|
+
Object.entries(attrs).forEach(([key, attrValue]) => tempImg.setAttribute(key, attrValue));
|
|
104
|
+
const editableMarkup = media.editable.replace(foundImg.imgTag, tempImg.outerHTML);
|
|
105
|
+
return this.renderInlineWrapper(editableMarkup);
|
|
106
|
+
}
|
|
107
|
+
// some wise-guy/gal is passing in a 'raw' image object value
|
|
108
|
+
const img = media.src ? media : media.value;
|
|
109
|
+
if (!img) {
|
|
110
|
+
return null;
|
|
111
|
+
}
|
|
112
|
+
attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
|
|
113
|
+
if (attrs) {
|
|
114
|
+
this.renderTemplate(attrs);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
getImageAttrs(fieldAttrs, parsedAttrs, imageParams) {
|
|
118
|
+
const combinedAttrs = {
|
|
119
|
+
...fieldAttrs,
|
|
120
|
+
...parsedAttrs,
|
|
121
|
+
};
|
|
122
|
+
// eslint-disable-next-line prefer-const
|
|
123
|
+
let { src, srcSet, ...otherAttrs } = combinedAttrs;
|
|
124
|
+
if (!src) {
|
|
125
|
+
return null;
|
|
126
|
+
}
|
|
127
|
+
const newAttrs = {
|
|
128
|
+
...otherAttrs,
|
|
129
|
+
};
|
|
130
|
+
// update image URL for jss handler and image rendering params
|
|
131
|
+
src = mediaApi.updateImageUrl(src, imageParams, this.mediaUrlPrefix);
|
|
132
|
+
if (srcSet) {
|
|
133
|
+
// replace with HTML-formatted srcset, including updated image URLs
|
|
134
|
+
newAttrs.srcSet = mediaApi.getSrcSet(src, srcSet, imageParams, this.mediaUrlPrefix);
|
|
135
|
+
}
|
|
136
|
+
else {
|
|
137
|
+
newAttrs.src = src;
|
|
138
|
+
}
|
|
139
|
+
return newAttrs;
|
|
140
|
+
}
|
|
141
|
+
renderTemplate(imageProps) {
|
|
142
|
+
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
143
|
+
viewRef.rootNodes.forEach((node) => {
|
|
144
|
+
Object.entries(imageProps).forEach(([key, imgPropVal]) => this.renderer.setAttribute(node, key, imgPropVal));
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
getElementAttrs() {
|
|
148
|
+
const view = this.templateRef.createEmbeddedView(null);
|
|
149
|
+
const element = view.rootNodes[0];
|
|
150
|
+
if (!element) {
|
|
151
|
+
view.destroy();
|
|
152
|
+
return {};
|
|
153
|
+
}
|
|
154
|
+
const attrs = {};
|
|
155
|
+
for (let i = 0; i < element.attributes.length; i++) {
|
|
156
|
+
const attr = element.attributes.item(i);
|
|
157
|
+
if (attr) {
|
|
158
|
+
attrs[attr.name] = attr.value;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
view.destroy();
|
|
162
|
+
return attrs;
|
|
163
|
+
}
|
|
164
|
+
renderInlineWrapper(editable) {
|
|
165
|
+
const span = this.renderer.createElement('span');
|
|
166
|
+
span.className = 'sc-image-wrapper';
|
|
167
|
+
span.innerHTML = editable;
|
|
168
|
+
const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
|
|
169
|
+
this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
|
|
170
|
+
parentNode.removeChild(this.elementRef.nativeElement);
|
|
171
|
+
this.inlineRef = span;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
ImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImageDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
175
|
+
ImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ImageDirective, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"] }, usesOnChanges: true, ngImport: i0 });
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImageDirective, decorators: [{
|
|
177
|
+
type: Directive,
|
|
178
|
+
args: [{ selector: '[scImage]' }]
|
|
179
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { field: [{
|
|
180
|
+
type: Input,
|
|
181
|
+
args: ['scImage']
|
|
182
|
+
}], editable: [{
|
|
183
|
+
type: Input,
|
|
184
|
+
args: ['scImageEditable']
|
|
185
|
+
}], mediaUrlPrefix: [{
|
|
186
|
+
type: Input,
|
|
187
|
+
args: ['scImageMediaUrlPrefix']
|
|
188
|
+
}], urlParams: [{
|
|
189
|
+
type: Input,
|
|
190
|
+
args: ['scImageUrlParams']
|
|
191
|
+
}], attrs: [{
|
|
192
|
+
type: Input,
|
|
193
|
+
args: ['scImageAttrs']
|
|
192
194
|
}] } });
|
|
193
195
|
|
|
194
|
-
class LinkDirective {
|
|
195
|
-
constructor(viewContainer, templateRef, renderer, elementRef) {
|
|
196
|
-
this.viewContainer = viewContainer;
|
|
197
|
-
this.templateRef = templateRef;
|
|
198
|
-
this.renderer = renderer;
|
|
199
|
-
this.elementRef = elementRef;
|
|
200
|
-
this.editable = true;
|
|
201
|
-
this.attrs = {};
|
|
202
|
-
this.inlineRef = null;
|
|
203
|
-
}
|
|
204
|
-
ngOnChanges(changes) {
|
|
205
|
-
if (changes.field || changes.editable || changes.attrs) {
|
|
206
|
-
this.viewContainer.clear();
|
|
207
|
-
if (this.inlineRef) {
|
|
208
|
-
this.inlineRef.remove();
|
|
209
|
-
this.inlineRef = null;
|
|
210
|
-
}
|
|
211
|
-
this.updateView();
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
renderTemplate(props, linkText) {
|
|
215
|
-
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
216
|
-
viewRef.rootNodes.forEach((node) => {
|
|
217
|
-
Object.entries(props).forEach(([key, propValue]) => {
|
|
218
|
-
this.updateAttribute(node, key, propValue);
|
|
219
|
-
});
|
|
220
|
-
if (node.childNodes && node.childNodes.length === 0 && linkText) {
|
|
221
|
-
node.textContent = linkText;
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
updateAttribute(node, key, propValue) {
|
|
226
|
-
if (typeof propValue !== 'string' || !propValue || propValue === '') {
|
|
227
|
-
return;
|
|
228
|
-
}
|
|
229
|
-
if (key === 'href') {
|
|
230
|
-
const isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
|
|
231
|
-
if (isInvalidLink) {
|
|
232
|
-
if (!node.href) {
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
propValue = node.href;
|
|
236
|
-
}
|
|
237
|
-
this.renderer.setAttribute(node, key, propValue);
|
|
238
|
-
}
|
|
239
|
-
else if (key === 'class' && node.className !== '') {
|
|
240
|
-
this.renderer.setAttribute(node, key, `${node.className} ${propValue}`);
|
|
241
|
-
}
|
|
242
|
-
else {
|
|
243
|
-
this.renderer.setAttribute(node, key, propValue);
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
updateView() {
|
|
247
|
-
const field = this.field;
|
|
248
|
-
if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
|
|
249
|
-
this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
|
|
250
|
-
}
|
|
251
|
-
else if (field && (field.href || field.value)) {
|
|
252
|
-
const props = field.href ? field : field.value;
|
|
253
|
-
const linkText = field.text || field.value?.text || field.href || field.value?.href;
|
|
254
|
-
const mergedAttrs = { ...props, ...this.attrs };
|
|
255
|
-
this.renderTemplate(mergedAttrs, linkText);
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
renderInlineWrapper(editableFirstPart, editableLastPart) {
|
|
259
|
-
const span = this.renderer.createElement('span');
|
|
260
|
-
span.className = 'sc-link-wrapper';
|
|
261
|
-
span.innerHTML = editableFirstPart + editableLastPart;
|
|
262
|
-
// assign attributes from template to inline wrapper
|
|
263
|
-
const attrs = {
|
|
264
|
-
...this.getElementAttrs(),
|
|
265
|
-
...this.attrs,
|
|
266
|
-
};
|
|
267
|
-
Object.entries(attrs).forEach(([key, attrValue]) => this.updateAttribute(span, key, attrValue));
|
|
268
|
-
this.viewContainer.createEmbeddedView(this.templateRef);
|
|
269
|
-
const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
|
|
270
|
-
this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
|
|
271
|
-
this.inlineRef = span;
|
|
272
|
-
}
|
|
273
|
-
getElementAttrs() {
|
|
274
|
-
const view = this.templateRef.createEmbeddedView(null);
|
|
275
|
-
const element = view.rootNodes[0];
|
|
276
|
-
if (!element) {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
i0.ɵɵ
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
196
|
+
class LinkDirective {
|
|
197
|
+
constructor(viewContainer, templateRef, renderer, elementRef) {
|
|
198
|
+
this.viewContainer = viewContainer;
|
|
199
|
+
this.templateRef = templateRef;
|
|
200
|
+
this.renderer = renderer;
|
|
201
|
+
this.elementRef = elementRef;
|
|
202
|
+
this.editable = true;
|
|
203
|
+
this.attrs = {};
|
|
204
|
+
this.inlineRef = null;
|
|
205
|
+
}
|
|
206
|
+
ngOnChanges(changes) {
|
|
207
|
+
if (changes.field || changes.editable || changes.attrs) {
|
|
208
|
+
this.viewContainer.clear();
|
|
209
|
+
if (this.inlineRef) {
|
|
210
|
+
this.inlineRef.remove();
|
|
211
|
+
this.inlineRef = null;
|
|
212
|
+
}
|
|
213
|
+
this.updateView();
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
renderTemplate(props, linkText) {
|
|
217
|
+
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
218
|
+
viewRef.rootNodes.forEach((node) => {
|
|
219
|
+
Object.entries(props).forEach(([key, propValue]) => {
|
|
220
|
+
this.updateAttribute(node, key, propValue);
|
|
221
|
+
});
|
|
222
|
+
if (node.childNodes && node.childNodes.length === 0 && linkText) {
|
|
223
|
+
node.textContent = linkText;
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
updateAttribute(node, key, propValue) {
|
|
228
|
+
if (typeof propValue !== 'string' || !propValue || propValue === '') {
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
if (key === 'href') {
|
|
232
|
+
const isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
|
|
233
|
+
if (isInvalidLink) {
|
|
234
|
+
if (!node.href) {
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
propValue = node.href;
|
|
238
|
+
}
|
|
239
|
+
this.renderer.setAttribute(node, key, propValue);
|
|
240
|
+
}
|
|
241
|
+
else if (key === 'class' && node.className !== '') {
|
|
242
|
+
this.renderer.setAttribute(node, key, `${node.className} ${propValue}`);
|
|
243
|
+
}
|
|
244
|
+
else {
|
|
245
|
+
this.renderer.setAttribute(node, key, propValue);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
updateView() {
|
|
249
|
+
const field = this.field;
|
|
250
|
+
if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
|
|
251
|
+
this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
|
|
252
|
+
}
|
|
253
|
+
else if (field && (field.href || field.value)) {
|
|
254
|
+
const props = field.href ? field : field.value;
|
|
255
|
+
const linkText = field.text || field.value?.text || field.href || field.value?.href;
|
|
256
|
+
const mergedAttrs = { ...props, ...this.attrs };
|
|
257
|
+
this.renderTemplate(mergedAttrs, linkText);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
renderInlineWrapper(editableFirstPart, editableLastPart) {
|
|
261
|
+
const span = this.renderer.createElement('span');
|
|
262
|
+
span.className = 'sc-link-wrapper';
|
|
263
|
+
span.innerHTML = editableFirstPart + editableLastPart;
|
|
264
|
+
// assign attributes from template to inline wrapper
|
|
265
|
+
const attrs = {
|
|
266
|
+
...this.getElementAttrs(),
|
|
267
|
+
...this.attrs,
|
|
268
|
+
};
|
|
269
|
+
Object.entries(attrs).forEach(([key, attrValue]) => this.updateAttribute(span, key, attrValue));
|
|
270
|
+
this.viewContainer.createEmbeddedView(this.templateRef);
|
|
271
|
+
const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
|
|
272
|
+
this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
|
|
273
|
+
this.inlineRef = span;
|
|
274
|
+
}
|
|
275
|
+
getElementAttrs() {
|
|
276
|
+
const view = this.templateRef.createEmbeddedView(null);
|
|
277
|
+
const element = view.rootNodes[0];
|
|
278
|
+
if (!element) {
|
|
279
|
+
view.destroy();
|
|
280
|
+
return {};
|
|
281
|
+
}
|
|
282
|
+
const attrs = {};
|
|
283
|
+
for (let i = 0; i < element.attributes.length; i++) {
|
|
284
|
+
const attr = element.attributes.item(i);
|
|
285
|
+
if (attr) {
|
|
286
|
+
attrs[attr.name] = attr.value;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
view.destroy();
|
|
290
|
+
return attrs;
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
LinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
294
|
+
LinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: LinkDirective, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LinkDirective, decorators: [{
|
|
296
|
+
type: Directive,
|
|
297
|
+
args: [{ selector: '[scLink]' }]
|
|
298
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editable: [{
|
|
299
|
+
type: Input,
|
|
300
|
+
args: ['scLinkEditable']
|
|
301
|
+
}], attrs: [{
|
|
302
|
+
type: Input,
|
|
303
|
+
args: ['scLinkAttrs']
|
|
304
|
+
}], field: [{
|
|
305
|
+
type: Input,
|
|
306
|
+
args: ['scLink']
|
|
303
307
|
}] } });
|
|
304
308
|
|
|
305
|
-
class RouterLinkDirective extends LinkDirective {
|
|
306
|
-
constructor(viewContainer, templateRef, renderer, elementRef, router) {
|
|
307
|
-
super(viewContainer, templateRef, renderer, elementRef);
|
|
308
|
-
this.router = router;
|
|
309
|
-
this.editable = true;
|
|
310
|
-
this.attrs = {};
|
|
311
|
-
}
|
|
312
|
-
renderTemplate(props, linkText) {
|
|
313
|
-
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
314
|
-
viewRef.rootNodes.forEach((node) => {
|
|
315
|
-
Object.entries(props).forEach(([key, propValue]) => {
|
|
316
|
-
this.updateAttribute(node, key, propValue);
|
|
317
|
-
if (key === 'href') {
|
|
318
|
-
this.renderer.listen(node, 'click', (event) => {
|
|
319
|
-
this.router.navigateByUrl(propValue);
|
|
320
|
-
event.preventDefault();
|
|
321
|
-
});
|
|
322
|
-
}
|
|
323
|
-
});
|
|
324
|
-
if (node.childNodes && node.childNodes.length === 0 && linkText) {
|
|
325
|
-
node.textContent = linkText;
|
|
326
|
-
}
|
|
327
|
-
});
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
RouterLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RouterLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
331
|
-
RouterLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RouterLinkDirective, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"] }, usesInheritance: true, ngImport: i0 });
|
|
332
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RouterLinkDirective, decorators: [{
|
|
333
|
-
type: Directive,
|
|
334
|
-
args: [{ selector: '[scRouterLink]' }]
|
|
335
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
|
|
336
|
-
type: Input,
|
|
337
|
-
args: ['scRouterLinkEditable']
|
|
338
|
-
}], attrs: [{
|
|
339
|
-
type: Input,
|
|
340
|
-
args: ['scRouterLinkAttrs']
|
|
341
|
-
}], field: [{
|
|
342
|
-
type: Input,
|
|
343
|
-
args: ['scRouterLink']
|
|
309
|
+
class RouterLinkDirective extends LinkDirective {
|
|
310
|
+
constructor(viewContainer, templateRef, renderer, elementRef, router) {
|
|
311
|
+
super(viewContainer, templateRef, renderer, elementRef);
|
|
312
|
+
this.router = router;
|
|
313
|
+
this.editable = true;
|
|
314
|
+
this.attrs = {};
|
|
315
|
+
}
|
|
316
|
+
renderTemplate(props, linkText) {
|
|
317
|
+
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
318
|
+
viewRef.rootNodes.forEach((node) => {
|
|
319
|
+
Object.entries(props).forEach(([key, propValue]) => {
|
|
320
|
+
this.updateAttribute(node, key, propValue);
|
|
321
|
+
if (key === 'href') {
|
|
322
|
+
this.renderer.listen(node, 'click', (event) => {
|
|
323
|
+
this.router.navigateByUrl(propValue);
|
|
324
|
+
event.preventDefault();
|
|
325
|
+
});
|
|
326
|
+
}
|
|
327
|
+
});
|
|
328
|
+
if (node.childNodes && node.childNodes.length === 0 && linkText) {
|
|
329
|
+
node.textContent = linkText;
|
|
330
|
+
}
|
|
331
|
+
});
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
RouterLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RouterLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
335
|
+
RouterLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RouterLinkDirective, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"] }, usesInheritance: true, ngImport: i0 });
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RouterLinkDirective, decorators: [{
|
|
337
|
+
type: Directive,
|
|
338
|
+
args: [{ selector: '[scRouterLink]' }]
|
|
339
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
|
|
340
|
+
type: Input,
|
|
341
|
+
args: ['scRouterLinkEditable']
|
|
342
|
+
}], attrs: [{
|
|
343
|
+
type: Input,
|
|
344
|
+
args: ['scRouterLinkAttrs']
|
|
345
|
+
}], field: [{
|
|
346
|
+
type: Input,
|
|
347
|
+
args: ['scRouterLink']
|
|
344
348
|
}] } });
|
|
345
349
|
|
|
346
|
-
class GenericLinkDirective extends LinkDirective {
|
|
347
|
-
constructor(viewContainer, templateRef, renderer, elementRef, router) {
|
|
348
|
-
super(viewContainer, templateRef, renderer, elementRef);
|
|
349
|
-
this.router = router;
|
|
350
|
-
this.editable = true;
|
|
351
|
-
this.attrs = {};
|
|
352
|
-
}
|
|
353
|
-
renderTemplate(props, linkText) {
|
|
354
|
-
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
355
|
-
viewRef.rootNodes.forEach((node) => {
|
|
356
|
-
Object.entries(props).forEach(([key, propValue]) => {
|
|
357
|
-
if (key === 'href' && !isAbsoluteUrl(propValue)) {
|
|
358
|
-
const urlTree = this.router.createUrlTree([propValue], this.extras);
|
|
359
|
-
this.updateAttribute(node, key, this.router.serializeUrl(urlTree));
|
|
360
|
-
this.renderer.listen(node, 'click', (event) => {
|
|
361
|
-
this.router.navigate([propValue], this.extras);
|
|
362
|
-
event.preventDefault();
|
|
363
|
-
});
|
|
364
|
-
}
|
|
365
|
-
else {
|
|
366
|
-
this.updateAttribute(node, key, propValue);
|
|
367
|
-
}
|
|
368
|
-
});
|
|
369
|
-
if (node.childNodes && node.childNodes.length === 0 && linkText) {
|
|
370
|
-
node.textContent = linkText;
|
|
371
|
-
}
|
|
372
|
-
});
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
GenericLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GenericLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
376
|
-
GenericLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: GenericLinkDirective, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"] }, usesInheritance: true, ngImport: i0 });
|
|
377
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GenericLinkDirective, decorators: [{
|
|
378
|
-
type: Directive,
|
|
379
|
-
args: [{ selector: '[scGenericLink]' }]
|
|
380
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
|
|
381
|
-
type: Input,
|
|
382
|
-
args: ['scGenericLinkEditable']
|
|
383
|
-
}], attrs: [{
|
|
384
|
-
type: Input,
|
|
385
|
-
args: ['scGenericLinkAttrs']
|
|
386
|
-
}], field: [{
|
|
387
|
-
type: Input,
|
|
388
|
-
args: ['scGenericLink']
|
|
389
|
-
}], extras: [{
|
|
390
|
-
type: Input,
|
|
391
|
-
args: ['scGenericLinkExtras']
|
|
350
|
+
class GenericLinkDirective extends LinkDirective {
|
|
351
|
+
constructor(viewContainer, templateRef, renderer, elementRef, router) {
|
|
352
|
+
super(viewContainer, templateRef, renderer, elementRef);
|
|
353
|
+
this.router = router;
|
|
354
|
+
this.editable = true;
|
|
355
|
+
this.attrs = {};
|
|
356
|
+
}
|
|
357
|
+
renderTemplate(props, linkText) {
|
|
358
|
+
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
359
|
+
viewRef.rootNodes.forEach((node) => {
|
|
360
|
+
Object.entries(props).forEach(([key, propValue]) => {
|
|
361
|
+
if (key === 'href' && !isAbsoluteUrl(propValue)) {
|
|
362
|
+
const urlTree = this.router.createUrlTree([propValue], this.extras);
|
|
363
|
+
this.updateAttribute(node, key, this.router.serializeUrl(urlTree));
|
|
364
|
+
this.renderer.listen(node, 'click', (event) => {
|
|
365
|
+
this.router.navigate([propValue], this.extras);
|
|
366
|
+
event.preventDefault();
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
else {
|
|
370
|
+
this.updateAttribute(node, key, propValue);
|
|
371
|
+
}
|
|
372
|
+
});
|
|
373
|
+
if (node.childNodes && node.childNodes.length === 0 && linkText) {
|
|
374
|
+
node.textContent = linkText;
|
|
375
|
+
}
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
GenericLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GenericLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
380
|
+
GenericLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: GenericLinkDirective, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"] }, usesInheritance: true, ngImport: i0 });
|
|
381
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: GenericLinkDirective, decorators: [{
|
|
382
|
+
type: Directive,
|
|
383
|
+
args: [{ selector: '[scGenericLink]' }]
|
|
384
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
|
|
385
|
+
type: Input,
|
|
386
|
+
args: ['scGenericLinkEditable']
|
|
387
|
+
}], attrs: [{
|
|
388
|
+
type: Input,
|
|
389
|
+
args: ['scGenericLinkAttrs']
|
|
390
|
+
}], field: [{
|
|
391
|
+
type: Input,
|
|
392
|
+
args: ['scGenericLink']
|
|
393
|
+
}], extras: [{
|
|
394
|
+
type: Input,
|
|
395
|
+
args: ['scGenericLinkExtras']
|
|
392
396
|
}] } });
|
|
393
397
|
|
|
394
|
-
class HiddenRenderingComponent {
|
|
395
|
-
get style() {
|
|
396
|
-
return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: block; height: 100px;';
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
HiddenRenderingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HiddenRenderingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
-
HiddenRenderingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: HiddenRenderingComponent, selector: "sc-hidden-rendering", host: { properties: { "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HiddenRenderingComponent, decorators: [{
|
|
402
|
-
type: Component,
|
|
403
|
-
args: [{
|
|
404
|
-
selector: 'sc-hidden-rendering',
|
|
405
|
-
template: '',
|
|
406
|
-
}]
|
|
407
|
-
}], propDecorators: { style: [{
|
|
408
|
-
type: HostBinding,
|
|
409
|
-
args: ['style']
|
|
410
|
-
}] } });
|
|
398
|
+
class HiddenRenderingComponent {
|
|
399
|
+
get style() {
|
|
400
|
+
return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: block; height: 100px;';
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
HiddenRenderingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HiddenRenderingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
404
|
+
HiddenRenderingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: HiddenRenderingComponent, selector: "sc-hidden-rendering", host: { properties: { "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: HiddenRenderingComponent, decorators: [{
|
|
406
|
+
type: Component,
|
|
407
|
+
args: [{
|
|
408
|
+
selector: 'sc-hidden-rendering',
|
|
409
|
+
template: '',
|
|
410
|
+
}]
|
|
411
|
+
}], propDecorators: { style: [{
|
|
412
|
+
type: HostBinding,
|
|
413
|
+
args: ['style']
|
|
414
|
+
}] } });
|
|
411
415
|
const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
|
|
412
416
|
|
|
413
|
-
class PlaceholderLoadingDirective {
|
|
414
|
-
constructor(templateRef) {
|
|
415
|
-
this.templateRef = templateRef;
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
PlaceholderLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderLoadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
419
|
-
PlaceholderLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: PlaceholderLoadingDirective, selector: "[scPlaceholderLoading]", ngImport: i0 });
|
|
420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderLoadingDirective, decorators: [{
|
|
421
|
-
type: Directive,
|
|
422
|
-
args: [{
|
|
423
|
-
selector: '[scPlaceholderLoading]',
|
|
424
|
-
}]
|
|
417
|
+
class PlaceholderLoadingDirective {
|
|
418
|
+
constructor(templateRef) {
|
|
419
|
+
this.templateRef = templateRef;
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
PlaceholderLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderLoadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
423
|
+
PlaceholderLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: PlaceholderLoadingDirective, selector: "[scPlaceholderLoading]", ngImport: i0 });
|
|
424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderLoadingDirective, decorators: [{
|
|
425
|
+
type: Directive,
|
|
426
|
+
args: [{
|
|
427
|
+
selector: '[scPlaceholderLoading]',
|
|
428
|
+
}]
|
|
425
429
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
426
430
|
|
|
427
|
-
/** Registers a statically loaded component */
|
|
428
|
-
class ComponentNameAndType {
|
|
429
|
-
}
|
|
430
|
-
/**
|
|
431
|
-
* @param {unknown} object
|
|
432
|
-
*/
|
|
433
|
-
function instanceOfComponentNameAndType(object) {
|
|
434
|
-
return typeof object === 'object' && object !== null && 'type' in object;
|
|
435
|
-
}
|
|
436
|
-
/**
|
|
437
|
-
* @param {unknown} object
|
|
438
|
-
*/
|
|
439
|
-
function instanceOfComponentNameAndModule(object) {
|
|
440
|
-
return typeof object === 'object' && object !== null && 'module' in object;
|
|
441
|
-
}
|
|
442
|
-
const PLACEHOLDER_COMPONENTS = new InjectionToken('Sc.placeholder.components');
|
|
443
|
-
const PLACEHOLDER_LAZY_COMPONENTS = new InjectionToken('Sc.placeholder.lazyComponents');
|
|
444
|
-
const PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new InjectionToken('Sc.placeholder.missingComponentComponent');
|
|
445
|
-
const PLACEHOLDER_HIDDEN_RENDERING_COMPONENT = new InjectionToken('Sc.placeholder.hiddenRenderingComponent');
|
|
446
|
-
const DYNAMIC_COMPONENT = new InjectionToken('Sc.placeholder.dynamicComponent');
|
|
447
|
-
const GUARD_RESOLVER = new InjectionToken('Sc.placeholder.guardResolver');
|
|
431
|
+
/** Registers a statically loaded component */
|
|
432
|
+
class ComponentNameAndType {
|
|
433
|
+
}
|
|
434
|
+
/**
|
|
435
|
+
* @param {unknown} object
|
|
436
|
+
*/
|
|
437
|
+
function instanceOfComponentNameAndType(object) {
|
|
438
|
+
return typeof object === 'object' && object !== null && 'type' in object;
|
|
439
|
+
}
|
|
440
|
+
/**
|
|
441
|
+
* @param {unknown} object
|
|
442
|
+
*/
|
|
443
|
+
function instanceOfComponentNameAndModule(object) {
|
|
444
|
+
return typeof object === 'object' && object !== null && 'module' in object;
|
|
445
|
+
}
|
|
446
|
+
const PLACEHOLDER_COMPONENTS = new InjectionToken('Sc.placeholder.components');
|
|
447
|
+
const PLACEHOLDER_LAZY_COMPONENTS = new InjectionToken('Sc.placeholder.lazyComponents');
|
|
448
|
+
const PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new InjectionToken('Sc.placeholder.missingComponentComponent');
|
|
449
|
+
const PLACEHOLDER_HIDDEN_RENDERING_COMPONENT = new InjectionToken('Sc.placeholder.hiddenRenderingComponent');
|
|
450
|
+
const DYNAMIC_COMPONENT = new InjectionToken('Sc.placeholder.dynamicComponent');
|
|
451
|
+
const GUARD_RESOLVER = new InjectionToken('Sc.placeholder.guardResolver');
|
|
448
452
|
const DATA_RESOLVER = new InjectionToken('Sc.placeholder.dataResolver');
|
|
449
453
|
|
|
450
|
-
class RenderEachDirective {
|
|
451
|
-
constructor(templateRef) {
|
|
452
|
-
this.templateRef = templateRef;
|
|
453
|
-
}
|
|
454
|
-
}
|
|
455
|
-
RenderEachDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEachDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
456
|
-
RenderEachDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RenderEachDirective, selector: "[renderEach]", ngImport: i0 });
|
|
457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEachDirective, decorators: [{
|
|
458
|
-
type: Directive,
|
|
459
|
-
args: [{
|
|
460
|
-
selector: '[renderEach]',
|
|
461
|
-
}]
|
|
454
|
+
class RenderEachDirective {
|
|
455
|
+
constructor(templateRef) {
|
|
456
|
+
this.templateRef = templateRef;
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
RenderEachDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEachDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
460
|
+
RenderEachDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RenderEachDirective, selector: "[renderEach]", ngImport: i0 });
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEachDirective, decorators: [{
|
|
462
|
+
type: Directive,
|
|
463
|
+
args: [{
|
|
464
|
+
selector: '[renderEach]',
|
|
465
|
+
}]
|
|
462
466
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
463
467
|
|
|
464
|
-
class RenderEmptyDirective {
|
|
465
|
-
constructor(templateRef) {
|
|
466
|
-
this.templateRef = templateRef;
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
RenderEmptyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEmptyDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
470
|
-
RenderEmptyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RenderEmptyDirective, selector: "[renderEmpty]", ngImport: i0 });
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEmptyDirective, decorators: [{
|
|
472
|
-
type: Directive,
|
|
473
|
-
args: [{
|
|
474
|
-
selector: '[renderEmpty]',
|
|
475
|
-
}]
|
|
468
|
+
class RenderEmptyDirective {
|
|
469
|
+
constructor(templateRef) {
|
|
470
|
+
this.templateRef = templateRef;
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
RenderEmptyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEmptyDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
474
|
+
RenderEmptyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RenderEmptyDirective, selector: "[renderEmpty]", ngImport: i0 });
|
|
475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderEmptyDirective, decorators: [{
|
|
476
|
+
type: Directive,
|
|
477
|
+
args: [{
|
|
478
|
+
selector: '[renderEmpty]',
|
|
479
|
+
}]
|
|
476
480
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
477
481
|
|
|
478
|
-
/**
|
|
479
|
-
* @param {HtmlElementRendering | ComponentRendering} rendering
|
|
480
|
-
*/
|
|
481
|
-
function isRawRendering(rendering) {
|
|
482
|
-
return (!rendering.componentName &&
|
|
483
|
-
rendering.name !== undefined);
|
|
482
|
+
/**
|
|
483
|
+
* @param {HtmlElementRendering | ComponentRendering} rendering
|
|
484
|
+
*/
|
|
485
|
+
function isRawRendering(rendering) {
|
|
486
|
+
return (!rendering.componentName &&
|
|
487
|
+
rendering.name !== undefined);
|
|
484
488
|
}
|
|
485
489
|
|
|
486
|
-
class RawComponent {
|
|
487
|
-
constructor(renderer, elementRef) {
|
|
488
|
-
this.renderer = renderer;
|
|
489
|
-
this.elementRef = elementRef;
|
|
490
|
-
}
|
|
491
|
-
ngOnInit() {
|
|
492
|
-
const el = this.renderer.createElement(this.rendering.name);
|
|
493
|
-
const contents = this.renderer.createText(this.rendering.contents || '');
|
|
494
|
-
const attributes = this.rendering.attributes;
|
|
495
|
-
for (const attr in attributes) {
|
|
496
|
-
// eslint-disable-next-line no-prototype-builtins
|
|
497
|
-
if (attributes.hasOwnProperty(attr)) {
|
|
498
|
-
const value = attributes[attr];
|
|
499
|
-
this.renderer.setAttribute(el, attr, value || '');
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
this.renderer.appendChild(el, contents);
|
|
503
|
-
const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
|
|
504
|
-
this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
|
|
505
|
-
parentNode.removeChild(this.elementRef.nativeElement);
|
|
506
|
-
}
|
|
507
|
-
}
|
|
508
|
-
RawComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RawComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
509
|
-
RawComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RawComponent, selector: "sc-raw", inputs: { rendering: "rendering" }, ngImport: i0, template: '', isInline: true });
|
|
510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RawComponent, decorators: [{
|
|
511
|
-
type: Component,
|
|
512
|
-
args: [{
|
|
513
|
-
selector: 'sc-raw',
|
|
514
|
-
template: '',
|
|
515
|
-
}]
|
|
516
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { rendering: [{
|
|
517
|
-
type: Input
|
|
490
|
+
class RawComponent {
|
|
491
|
+
constructor(renderer, elementRef) {
|
|
492
|
+
this.renderer = renderer;
|
|
493
|
+
this.elementRef = elementRef;
|
|
494
|
+
}
|
|
495
|
+
ngOnInit() {
|
|
496
|
+
const el = this.renderer.createElement(this.rendering.name);
|
|
497
|
+
const contents = this.renderer.createText(this.rendering.contents || '');
|
|
498
|
+
const attributes = this.rendering.attributes;
|
|
499
|
+
for (const attr in attributes) {
|
|
500
|
+
// eslint-disable-next-line no-prototype-builtins
|
|
501
|
+
if (attributes.hasOwnProperty(attr)) {
|
|
502
|
+
const value = attributes[attr];
|
|
503
|
+
this.renderer.setAttribute(el, attr, value || '');
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
this.renderer.appendChild(el, contents);
|
|
507
|
+
const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
|
|
508
|
+
this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
|
|
509
|
+
parentNode.removeChild(this.elementRef.nativeElement);
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
RawComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RawComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
513
|
+
RawComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RawComponent, selector: "sc-raw", inputs: { rendering: "rendering" }, ngImport: i0, template: '', isInline: true });
|
|
514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RawComponent, decorators: [{
|
|
515
|
+
type: Component,
|
|
516
|
+
args: [{
|
|
517
|
+
selector: 'sc-raw',
|
|
518
|
+
template: '',
|
|
519
|
+
}]
|
|
520
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { rendering: [{
|
|
521
|
+
type: Input
|
|
518
522
|
}] } });
|
|
519
523
|
|
|
520
|
-
class JssComponentFactoryService {
|
|
521
|
-
constructor(injector, components, lazyComponents) {
|
|
522
|
-
this.injector = injector;
|
|
523
|
-
this.components = components;
|
|
524
|
-
this.lazyComponents = lazyComponents;
|
|
525
|
-
this.componentMap = new Map();
|
|
526
|
-
this.lazyComponentMap = new Map();
|
|
527
|
-
this.components.forEach((c) => this.componentMap.set(c.name, c));
|
|
528
|
-
if (this.lazyComponents) {
|
|
529
|
-
this.lazyComponents.forEach((c) => this.lazyComponentMap.set(c.path, c));
|
|
530
|
-
}
|
|
531
|
-
}
|
|
532
|
-
getComponent(component) {
|
|
533
|
-
const loadedComponent = this.componentMap.get(component.componentName);
|
|
534
|
-
if (loadedComponent) {
|
|
535
|
-
return Promise.resolve({
|
|
536
|
-
componentDefinition: component,
|
|
537
|
-
componentImplementation: loadedComponent.type,
|
|
538
|
-
canActivate: loadedComponent.canActivate,
|
|
539
|
-
resolve: loadedComponent.resolve,
|
|
540
|
-
});
|
|
541
|
-
}
|
|
542
|
-
const lazyComponent = this.lazyComponentMap.get(component.componentName);
|
|
543
|
-
if (lazyComponent) {
|
|
544
|
-
return lazyComponent.loadChildren().then((lazyChild) => {
|
|
545
|
-
let componentType = null;
|
|
546
|
-
const moduleRef = createNgModule(lazyChild, this.injector);
|
|
547
|
-
const dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
|
|
548
|
-
if (!dynamicComponentType) {
|
|
549
|
-
throw new Error(`JssComponentFactoryService: Lazy load module for component "${lazyComponent.path}" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?`);
|
|
550
|
-
}
|
|
551
|
-
if (component.componentName in dynamicComponentType) {
|
|
552
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
553
|
-
componentType = dynamicComponentType[component.componentName];
|
|
554
|
-
}
|
|
555
|
-
else {
|
|
556
|
-
if (typeof dynamicComponentType === 'function') {
|
|
557
|
-
componentType = dynamicComponentType;
|
|
558
|
-
}
|
|
559
|
-
else {
|
|
560
|
-
throw new Error(`JssComponentFactoryService: Lazy load module for component "${lazyComponent.path}" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?`);
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
return {
|
|
564
|
-
componentDefinition: component,
|
|
565
|
-
componentImplementation: componentType,
|
|
566
|
-
componentFactory: moduleRef.componentFactoryResolver.resolveComponentFactory(componentType),
|
|
567
|
-
canActivate: lazyComponent.canActivate,
|
|
568
|
-
resolve: lazyComponent.resolve,
|
|
569
|
-
};
|
|
570
|
-
});
|
|
571
|
-
}
|
|
572
|
-
return Promise.resolve({
|
|
573
|
-
componentDefinition: component,
|
|
574
|
-
});
|
|
575
|
-
}
|
|
576
|
-
getComponents(components) {
|
|
577
|
-
// acquire all components and keep them in order while handling their potential async-ness
|
|
578
|
-
return Promise.all(components.map((component) => isRawRendering(component) ? this.getRawComponent(component) : this.getComponent(component)));
|
|
579
|
-
}
|
|
580
|
-
getRawComponent(component) {
|
|
581
|
-
return Promise.resolve({
|
|
582
|
-
componentImplementation: RawComponent,
|
|
583
|
-
componentDefinition: component,
|
|
584
|
-
});
|
|
585
|
-
}
|
|
586
|
-
}
|
|
587
|
-
JssComponentFactoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssComponentFactoryService, deps: [{ token: i0.Injector }, { token: PLACEHOLDER_COMPONENTS }, { token: PLACEHOLDER_LAZY_COMPONENTS }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
588
|
-
JssComponentFactoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssComponentFactoryService });
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssComponentFactoryService, decorators: [{
|
|
590
|
-
type: Injectable
|
|
591
|
-
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
592
|
-
type: Inject,
|
|
593
|
-
args: [PLACEHOLDER_COMPONENTS]
|
|
594
|
-
}] }, { type: undefined, decorators: [{
|
|
595
|
-
type: Inject,
|
|
596
|
-
args: [PLACEHOLDER_LAZY_COMPONENTS]
|
|
524
|
+
class JssComponentFactoryService {
|
|
525
|
+
constructor(injector, components, lazyComponents) {
|
|
526
|
+
this.injector = injector;
|
|
527
|
+
this.components = components;
|
|
528
|
+
this.lazyComponents = lazyComponents;
|
|
529
|
+
this.componentMap = new Map();
|
|
530
|
+
this.lazyComponentMap = new Map();
|
|
531
|
+
this.components.forEach((c) => this.componentMap.set(c.name, c));
|
|
532
|
+
if (this.lazyComponents) {
|
|
533
|
+
this.lazyComponents.forEach((c) => this.lazyComponentMap.set(c.path, c));
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
getComponent(component) {
|
|
537
|
+
const loadedComponent = this.componentMap.get(component.componentName);
|
|
538
|
+
if (loadedComponent) {
|
|
539
|
+
return Promise.resolve({
|
|
540
|
+
componentDefinition: component,
|
|
541
|
+
componentImplementation: loadedComponent.type,
|
|
542
|
+
canActivate: loadedComponent.canActivate,
|
|
543
|
+
resolve: loadedComponent.resolve,
|
|
544
|
+
});
|
|
545
|
+
}
|
|
546
|
+
const lazyComponent = this.lazyComponentMap.get(component.componentName);
|
|
547
|
+
if (lazyComponent) {
|
|
548
|
+
return lazyComponent.loadChildren().then((lazyChild) => {
|
|
549
|
+
let componentType = null;
|
|
550
|
+
const moduleRef = createNgModule(lazyChild, this.injector);
|
|
551
|
+
const dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
|
|
552
|
+
if (!dynamicComponentType) {
|
|
553
|
+
throw new Error(`JssComponentFactoryService: Lazy load module for component "${lazyComponent.path}" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?`);
|
|
554
|
+
}
|
|
555
|
+
if (component.componentName in dynamicComponentType) {
|
|
556
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
557
|
+
componentType = dynamicComponentType[component.componentName];
|
|
558
|
+
}
|
|
559
|
+
else {
|
|
560
|
+
if (typeof dynamicComponentType === 'function') {
|
|
561
|
+
componentType = dynamicComponentType;
|
|
562
|
+
}
|
|
563
|
+
else {
|
|
564
|
+
throw new Error(`JssComponentFactoryService: Lazy load module for component "${lazyComponent.path}" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?`);
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
return {
|
|
568
|
+
componentDefinition: component,
|
|
569
|
+
componentImplementation: componentType,
|
|
570
|
+
componentFactory: moduleRef.componentFactoryResolver.resolveComponentFactory(componentType),
|
|
571
|
+
canActivate: lazyComponent.canActivate,
|
|
572
|
+
resolve: lazyComponent.resolve,
|
|
573
|
+
};
|
|
574
|
+
});
|
|
575
|
+
}
|
|
576
|
+
return Promise.resolve({
|
|
577
|
+
componentDefinition: component,
|
|
578
|
+
});
|
|
579
|
+
}
|
|
580
|
+
getComponents(components) {
|
|
581
|
+
// acquire all components and keep them in order while handling their potential async-ness
|
|
582
|
+
return Promise.all(components.map((component) => isRawRendering(component) ? this.getRawComponent(component) : this.getComponent(component)));
|
|
583
|
+
}
|
|
584
|
+
getRawComponent(component) {
|
|
585
|
+
return Promise.resolve({
|
|
586
|
+
componentImplementation: RawComponent,
|
|
587
|
+
componentDefinition: component,
|
|
588
|
+
});
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
JssComponentFactoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssComponentFactoryService, deps: [{ token: i0.Injector }, { token: PLACEHOLDER_COMPONENTS }, { token: PLACEHOLDER_LAZY_COMPONENTS }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
592
|
+
JssComponentFactoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssComponentFactoryService });
|
|
593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssComponentFactoryService, decorators: [{
|
|
594
|
+
type: Injectable
|
|
595
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
|
|
596
|
+
type: Inject,
|
|
597
|
+
args: [PLACEHOLDER_COMPONENTS]
|
|
598
|
+
}] }, { type: undefined, decorators: [{
|
|
599
|
+
type: Inject,
|
|
600
|
+
args: [PLACEHOLDER_LAZY_COMPONENTS]
|
|
597
601
|
}] }]; } });
|
|
598
602
|
|
|
599
|
-
/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
|
|
600
|
-
/**
|
|
601
|
-
* @param {ComponentRendering} rendering
|
|
602
|
-
* @param {string} name
|
|
603
|
-
*/
|
|
604
|
-
function getPlaceholder(rendering, name) {
|
|
605
|
-
if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
|
|
606
|
-
return rendering.placeholders[name];
|
|
607
|
-
}
|
|
608
|
-
return null;
|
|
609
|
-
}
|
|
610
|
-
class PlaceholderComponent {
|
|
611
|
-
constructor(differs, componentFactory, changeDetectorRef, elementRef, renderer, router, missingComponentComponent, hiddenRenderingComponent, guardResolver, dataResolver,
|
|
612
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
613
|
-
platformId) {
|
|
614
|
-
this.differs = differs;
|
|
615
|
-
this.componentFactory = componentFactory;
|
|
616
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
617
|
-
this.elementRef = elementRef;
|
|
618
|
-
this.renderer = renderer;
|
|
619
|
-
this.router = router;
|
|
620
|
-
this.missingComponentComponent = missingComponentComponent;
|
|
621
|
-
this.hiddenRenderingComponent = hiddenRenderingComponent;
|
|
622
|
-
this.guardResolver = guardResolver;
|
|
623
|
-
this.dataResolver = dataResolver;
|
|
624
|
-
this.platformId = platformId;
|
|
625
|
-
this.clientOnly = false;
|
|
626
|
-
this.loaded = new EventEmitter();
|
|
627
|
-
this.isLoading = true;
|
|
628
|
-
this._componentInstances = [];
|
|
629
|
-
this.destroyed = false;
|
|
630
|
-
this.parentStyleAttribute = '';
|
|
631
|
-
}
|
|
632
|
-
set inputs(value) {
|
|
633
|
-
this._inputs = value;
|
|
634
|
-
if (!this._differ && value) {
|
|
635
|
-
this._differ = this.differs.find(value).create();
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
ngOnInit() {
|
|
639
|
-
// just to ensure the element exists
|
|
640
|
-
const elem = this.elementRef.nativeElement;
|
|
641
|
-
if (elem) {
|
|
642
|
-
const attributes = elem.attributes;
|
|
643
|
-
for (let i = 0; i < attributes.length; i++) {
|
|
644
|
-
const attr = attributes.item(i);
|
|
645
|
-
if (attr && attr.name.indexOf('_ngcontent') !== -1) {
|
|
646
|
-
this.parentStyleAttribute = attr.name;
|
|
647
|
-
}
|
|
648
|
-
}
|
|
649
|
-
}
|
|
650
|
-
}
|
|
651
|
-
ngOnDestroy() {
|
|
652
|
-
this.destroyed = true;
|
|
653
|
-
this._componentInstances = [];
|
|
654
|
-
}
|
|
655
|
-
ngOnChanges(changes) {
|
|
656
|
-
if (changes.rendering || changes.renderings) {
|
|
657
|
-
this._render();
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
ngDoCheck() {
|
|
661
|
-
if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
|
|
662
|
-
return;
|
|
663
|
-
}
|
|
664
|
-
const changes = this._differ.diff(this._inputs);
|
|
665
|
-
if (!changes) {
|
|
666
|
-
return;
|
|
667
|
-
}
|
|
668
|
-
const updates = {};
|
|
669
|
-
changes.forEachRemovedItem((change) => (updates[change.key] = null));
|
|
670
|
-
changes.forEachAddedItem((change) => (updates[change.key] = change.currentValue));
|
|
671
|
-
changes.forEachChangedItem((change) => (updates[change.key] = change.currentValue));
|
|
672
|
-
this._componentInstances.forEach((componentInstance) => this._setComponentInputs(componentInstance, updates));
|
|
673
|
-
}
|
|
674
|
-
_setComponentInputs(componentInstance, inputs) {
|
|
675
|
-
Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
|
|
676
|
-
}
|
|
677
|
-
_subscribeComponentOutputs(componentInstance, outputs) {
|
|
678
|
-
Object.keys(outputs)
|
|
679
|
-
.filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
|
|
680
|
-
.forEach((output) => componentInstance[output]
|
|
681
|
-
.pipe(takeWhile(() => !this.destroyed))
|
|
682
|
-
.subscribe(outputs[output]));
|
|
683
|
-
}
|
|
684
|
-
async _render() {
|
|
685
|
-
if (this.clientOnly && isPlatformServer(this.platformId)) {
|
|
686
|
-
return;
|
|
687
|
-
}
|
|
688
|
-
this._componentInstances = [];
|
|
689
|
-
this.view.clear();
|
|
690
|
-
if (!this.rendering && !this.renderings) {
|
|
691
|
-
return;
|
|
692
|
-
}
|
|
693
|
-
if (!this.name && !this.renderings) {
|
|
694
|
-
console.warn('Placeholder name was not specified, and explicit renderings array was not passed. Placeholder requires either name and rendering, or renderings.');
|
|
695
|
-
this.isLoading = false;
|
|
696
|
-
return;
|
|
697
|
-
}
|
|
698
|
-
const placeholder = this.renderings || getPlaceholder(this.rendering, this.name || '');
|
|
699
|
-
if (!placeholder) {
|
|
700
|
-
console.warn(`Placeholder '${this.name}' was not found in the current rendering data`, JSON.stringify(this.rendering, null, 2));
|
|
701
|
-
this.isLoading = false;
|
|
702
|
-
return;
|
|
703
|
-
}
|
|
704
|
-
// if the placeholder is empty (contains only raw renderings), then we may need to use the empty template if it's defined
|
|
705
|
-
const placeholderIsEmpty = placeholder.every((rendering) => isRawRendering(rendering));
|
|
706
|
-
if (this.renderEmptyTemplate && placeholderIsEmpty) {
|
|
707
|
-
this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
|
|
708
|
-
renderings: placeholder,
|
|
709
|
-
});
|
|
710
|
-
this.isLoading = false;
|
|
711
|
-
}
|
|
712
|
-
else {
|
|
713
|
-
const factories = await this.componentFactory.getComponents(placeholder);
|
|
714
|
-
try {
|
|
715
|
-
const nonGuarded = await this.guardResolver(factories);
|
|
716
|
-
const withData = await this.dataResolver(nonGuarded);
|
|
717
|
-
withData.forEach((rendering, index) => {
|
|
718
|
-
if (this.renderEachTemplate && !isRawRendering(rendering.factory.componentDefinition)) {
|
|
719
|
-
this._renderTemplatedComponent(rendering.factory.componentDefinition, index);
|
|
720
|
-
}
|
|
721
|
-
else {
|
|
722
|
-
this._renderEmbeddedComponent(rendering.factory, rendering.data, index);
|
|
723
|
-
}
|
|
724
|
-
});
|
|
725
|
-
this.isLoading = false;
|
|
726
|
-
this.changeDetectorRef.markForCheck();
|
|
727
|
-
this.loaded.emit(this.name);
|
|
728
|
-
}
|
|
729
|
-
catch (e) {
|
|
730
|
-
this.isLoading = false;
|
|
731
|
-
if (e instanceof UrlTree) {
|
|
732
|
-
this.router.navigateByUrl(e);
|
|
733
|
-
}
|
|
734
|
-
else if (typeof e === 'string') {
|
|
735
|
-
this.router.navigate([e]);
|
|
736
|
-
}
|
|
737
|
-
else if (Array.isArray(e)) {
|
|
738
|
-
this.router.navigate(e);
|
|
739
|
-
}
|
|
740
|
-
else {
|
|
741
|
-
throw e;
|
|
742
|
-
}
|
|
743
|
-
}
|
|
744
|
-
}
|
|
745
|
-
}
|
|
746
|
-
_renderTemplatedComponent(rendering, index) {
|
|
747
|
-
// the render-each template takes care of all component mapping etc
|
|
748
|
-
// generally using <sc-render-component> which is about like _renderEmbeddedComponent()
|
|
749
|
-
// as a separate component
|
|
750
|
-
this.view.createEmbeddedView(this.renderEachTemplate.templateRef, {
|
|
751
|
-
rendering,
|
|
752
|
-
index,
|
|
753
|
-
});
|
|
754
|
-
}
|
|
755
|
-
_renderEmbeddedComponent(rendering, data, index) {
|
|
756
|
-
if (rendering.componentDefinition.componentName === HIDDEN_RENDERING_NAME) {
|
|
757
|
-
rendering.componentImplementation = this.hiddenRenderingComponent;
|
|
758
|
-
}
|
|
759
|
-
if (!rendering.componentImplementation) {
|
|
760
|
-
const componentName = rendering.componentDefinition.componentName;
|
|
603
|
+
/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
|
|
604
|
+
/**
|
|
605
|
+
* @param {ComponentRendering} rendering
|
|
606
|
+
* @param {string} name
|
|
607
|
+
*/
|
|
608
|
+
function getPlaceholder(rendering, name) {
|
|
609
|
+
if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
|
|
610
|
+
return rendering.placeholders[name];
|
|
611
|
+
}
|
|
612
|
+
return null;
|
|
613
|
+
}
|
|
614
|
+
class PlaceholderComponent {
|
|
615
|
+
constructor(differs, componentFactory, changeDetectorRef, elementRef, renderer, router, missingComponentComponent, hiddenRenderingComponent, guardResolver, dataResolver,
|
|
616
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
617
|
+
platformId) {
|
|
618
|
+
this.differs = differs;
|
|
619
|
+
this.componentFactory = componentFactory;
|
|
620
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
621
|
+
this.elementRef = elementRef;
|
|
622
|
+
this.renderer = renderer;
|
|
623
|
+
this.router = router;
|
|
624
|
+
this.missingComponentComponent = missingComponentComponent;
|
|
625
|
+
this.hiddenRenderingComponent = hiddenRenderingComponent;
|
|
626
|
+
this.guardResolver = guardResolver;
|
|
627
|
+
this.dataResolver = dataResolver;
|
|
628
|
+
this.platformId = platformId;
|
|
629
|
+
this.clientOnly = false;
|
|
630
|
+
this.loaded = new EventEmitter();
|
|
631
|
+
this.isLoading = true;
|
|
632
|
+
this._componentInstances = [];
|
|
633
|
+
this.destroyed = false;
|
|
634
|
+
this.parentStyleAttribute = '';
|
|
635
|
+
}
|
|
636
|
+
set inputs(value) {
|
|
637
|
+
this._inputs = value;
|
|
638
|
+
if (!this._differ && value) {
|
|
639
|
+
this._differ = this.differs.find(value).create();
|
|
640
|
+
}
|
|
641
|
+
}
|
|
642
|
+
ngOnInit() {
|
|
643
|
+
// just to ensure the element exists
|
|
644
|
+
const elem = this.elementRef.nativeElement;
|
|
645
|
+
if (elem) {
|
|
646
|
+
const attributes = elem.attributes;
|
|
647
|
+
for (let i = 0; i < attributes.length; i++) {
|
|
648
|
+
const attr = attributes.item(i);
|
|
649
|
+
if (attr && attr.name.indexOf('_ngcontent') !== -1) {
|
|
650
|
+
this.parentStyleAttribute = attr.name;
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
ngOnDestroy() {
|
|
656
|
+
this.destroyed = true;
|
|
657
|
+
this._componentInstances = [];
|
|
658
|
+
}
|
|
659
|
+
ngOnChanges(changes) {
|
|
660
|
+
if (changes.rendering || changes.renderings) {
|
|
661
|
+
this._render();
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
ngDoCheck() {
|
|
665
|
+
if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
|
|
666
|
+
return;
|
|
667
|
+
}
|
|
668
|
+
const changes = this._differ.diff(this._inputs);
|
|
669
|
+
if (!changes) {
|
|
670
|
+
return;
|
|
671
|
+
}
|
|
672
|
+
const updates = {};
|
|
673
|
+
changes.forEachRemovedItem((change) => (updates[change.key] = null));
|
|
674
|
+
changes.forEachAddedItem((change) => (updates[change.key] = change.currentValue));
|
|
675
|
+
changes.forEachChangedItem((change) => (updates[change.key] = change.currentValue));
|
|
676
|
+
this._componentInstances.forEach((componentInstance) => this._setComponentInputs(componentInstance, updates));
|
|
677
|
+
}
|
|
678
|
+
_setComponentInputs(componentInstance, inputs) {
|
|
679
|
+
Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
|
|
680
|
+
}
|
|
681
|
+
_subscribeComponentOutputs(componentInstance, outputs) {
|
|
682
|
+
Object.keys(outputs)
|
|
683
|
+
.filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
|
|
684
|
+
.forEach((output) => componentInstance[output]
|
|
685
|
+
.pipe(takeWhile(() => !this.destroyed))
|
|
686
|
+
.subscribe(outputs[output]));
|
|
687
|
+
}
|
|
688
|
+
async _render() {
|
|
689
|
+
if (this.clientOnly && isPlatformServer(this.platformId)) {
|
|
690
|
+
return;
|
|
691
|
+
}
|
|
692
|
+
this._componentInstances = [];
|
|
693
|
+
this.view.clear();
|
|
694
|
+
if (!this.rendering && !this.renderings) {
|
|
695
|
+
return;
|
|
696
|
+
}
|
|
697
|
+
if (!this.name && !this.renderings) {
|
|
698
|
+
console.warn('Placeholder name was not specified, and explicit renderings array was not passed. Placeholder requires either name and rendering, or renderings.');
|
|
699
|
+
this.isLoading = false;
|
|
700
|
+
return;
|
|
701
|
+
}
|
|
702
|
+
const placeholder = this.renderings || getPlaceholder(this.rendering, this.name || '');
|
|
703
|
+
if (!placeholder) {
|
|
704
|
+
console.warn(`Placeholder '${this.name}' was not found in the current rendering data`, JSON.stringify(this.rendering, null, 2));
|
|
705
|
+
this.isLoading = false;
|
|
706
|
+
return;
|
|
707
|
+
}
|
|
708
|
+
// if the placeholder is empty (contains only raw renderings), then we may need to use the empty template if it's defined
|
|
709
|
+
const placeholderIsEmpty = placeholder.every((rendering) => isRawRendering(rendering));
|
|
710
|
+
if (this.renderEmptyTemplate && placeholderIsEmpty) {
|
|
711
|
+
this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
|
|
712
|
+
renderings: placeholder,
|
|
713
|
+
});
|
|
714
|
+
this.isLoading = false;
|
|
715
|
+
}
|
|
716
|
+
else {
|
|
717
|
+
const factories = await this.componentFactory.getComponents(placeholder);
|
|
718
|
+
try {
|
|
719
|
+
const nonGuarded = await this.guardResolver(factories);
|
|
720
|
+
const withData = await this.dataResolver(nonGuarded);
|
|
721
|
+
withData.forEach((rendering, index) => {
|
|
722
|
+
if (this.renderEachTemplate && !isRawRendering(rendering.factory.componentDefinition)) {
|
|
723
|
+
this._renderTemplatedComponent(rendering.factory.componentDefinition, index);
|
|
724
|
+
}
|
|
725
|
+
else {
|
|
726
|
+
this._renderEmbeddedComponent(rendering.factory, rendering.data, index);
|
|
727
|
+
}
|
|
728
|
+
});
|
|
729
|
+
this.isLoading = false;
|
|
730
|
+
this.changeDetectorRef.markForCheck();
|
|
731
|
+
this.loaded.emit(this.name);
|
|
732
|
+
}
|
|
733
|
+
catch (e) {
|
|
734
|
+
this.isLoading = false;
|
|
735
|
+
if (e instanceof UrlTree) {
|
|
736
|
+
this.router.navigateByUrl(e);
|
|
737
|
+
}
|
|
738
|
+
else if (typeof e === 'string') {
|
|
739
|
+
this.router.navigate([e]);
|
|
740
|
+
}
|
|
741
|
+
else if (Array.isArray(e)) {
|
|
742
|
+
this.router.navigate(e);
|
|
743
|
+
}
|
|
744
|
+
else {
|
|
745
|
+
throw e;
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
_renderTemplatedComponent(rendering, index) {
|
|
751
|
+
// the render-each template takes care of all component mapping etc
|
|
752
|
+
// generally using <sc-render-component> which is about like _renderEmbeddedComponent()
|
|
753
|
+
// as a separate component
|
|
754
|
+
this.view.createEmbeddedView(this.renderEachTemplate.templateRef, {
|
|
755
|
+
rendering,
|
|
756
|
+
index,
|
|
757
|
+
});
|
|
758
|
+
}
|
|
759
|
+
_renderEmbeddedComponent(rendering, data, index) {
|
|
760
|
+
if (rendering.componentDefinition.componentName === HIDDEN_RENDERING_NAME) {
|
|
761
|
+
rendering.componentImplementation = this.hiddenRenderingComponent;
|
|
762
|
+
}
|
|
763
|
+
if (!rendering.componentImplementation) {
|
|
764
|
+
const componentName = rendering.componentDefinition.componentName;
|
|
761
765
|
console.error(`Placeholder ${this.name} contains unknown component ${componentName}.`, `Ensure component is mapped, like:
|
|
762
766
|
JssModule.withComponents([
|
|
763
767
|
{ name: '${componentName}', type: ${componentName}Component }
|
|
764
|
-
])`);
|
|
765
|
-
rendering.componentImplementation = this.missingComponentComponent;
|
|
766
|
-
}
|
|
767
|
-
// apply the parent style attribute _ngcontent
|
|
768
|
-
// work-around for https://github.com/angular/angular/issues/12215
|
|
769
|
-
const createdComponentRef = this.view.createComponent(rendering.componentImplementation, {
|
|
770
|
-
index: index,
|
|
771
|
-
});
|
|
772
|
-
if (this.parentStyleAttribute) {
|
|
773
|
-
this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
|
|
774
|
-
}
|
|
775
|
-
const componentInstance = createdComponentRef.instance;
|
|
776
|
-
componentInstance.rendering = rendering.componentDefinition;
|
|
777
|
-
componentInstance.data = data;
|
|
778
|
-
if (this._inputs) {
|
|
779
|
-
this._setComponentInputs(componentInstance, this._inputs);
|
|
780
|
-
}
|
|
781
|
-
if (this.outputs) {
|
|
782
|
-
this._subscribeComponentOutputs(componentInstance, this.outputs);
|
|
783
|
-
}
|
|
784
|
-
this._componentInstances.push(componentInstance);
|
|
785
|
-
}
|
|
786
|
-
}
|
|
787
|
-
PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }, { token: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT }, { token: GUARD_RESOLVER }, { token: DATA_RESOLVER }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
768
|
+
])`);
|
|
769
|
+
rendering.componentImplementation = this.missingComponentComponent;
|
|
770
|
+
}
|
|
771
|
+
// apply the parent style attribute _ngcontent
|
|
772
|
+
// work-around for https://github.com/angular/angular/issues/12215
|
|
773
|
+
const createdComponentRef = this.view.createComponent(rendering.componentImplementation, {
|
|
774
|
+
index: index,
|
|
775
|
+
});
|
|
776
|
+
if (this.parentStyleAttribute) {
|
|
777
|
+
this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
|
|
778
|
+
}
|
|
779
|
+
const componentInstance = createdComponentRef.instance;
|
|
780
|
+
componentInstance.rendering = rendering.componentDefinition;
|
|
781
|
+
componentInstance.data = data;
|
|
782
|
+
if (this._inputs) {
|
|
783
|
+
this._setComponentInputs(componentInstance, this._inputs);
|
|
784
|
+
}
|
|
785
|
+
if (this.outputs) {
|
|
786
|
+
this._subscribeComponentOutputs(componentInstance, this.outputs);
|
|
787
|
+
}
|
|
788
|
+
this._componentInstances.push(componentInstance);
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }, { token: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT }, { token: GUARD_RESOLVER }, { token: DATA_RESOLVER }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
788
792
|
PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PlaceholderComponent, selector: "sc-placeholder,[sc-placeholder]", inputs: { name: "name", rendering: "rendering", renderings: "renderings", outputs: "outputs", clientOnly: "clientOnly", inputs: "inputs" }, outputs: { loaded: "loaded" }, queries: [{ propertyName: "renderEachTemplate", first: true, predicate: RenderEachDirective, descendants: true, static: true }, { propertyName: "renderEmptyTemplate", first: true, predicate: RenderEmptyDirective, descendants: true, static: true }, { propertyName: "placeholderLoading", first: true, predicate: PlaceholderLoadingDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
789
793
|
<ng-template
|
|
790
794
|
*ngIf="isLoading"
|
|
791
795
|
[ngTemplateOutlet]="placeholderLoading?.templateRef"
|
|
792
796
|
></ng-template>
|
|
793
797
|
<ng-template #view></ng-template>
|
|
794
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderComponent, decorators: [{
|
|
796
|
-
type: Component,
|
|
797
|
-
args: [{
|
|
798
|
-
selector: 'sc-placeholder,[sc-placeholder]',
|
|
798
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PlaceholderComponent, decorators: [{
|
|
800
|
+
type: Component,
|
|
801
|
+
args: [{
|
|
802
|
+
selector: 'sc-placeholder,[sc-placeholder]',
|
|
799
803
|
template: `
|
|
800
804
|
<ng-template
|
|
801
805
|
*ngIf="isLoading"
|
|
802
806
|
[ngTemplateOutlet]="placeholderLoading?.templateRef"
|
|
803
807
|
></ng-template>
|
|
804
808
|
<ng-template #view></ng-template>
|
|
805
|
-
`,
|
|
806
|
-
}]
|
|
807
|
-
}], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i0.Type, decorators: [{
|
|
808
|
-
type: Inject,
|
|
809
|
-
args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
|
|
810
|
-
}] }, { type: i0.Type, decorators: [{
|
|
811
|
-
type: Inject,
|
|
812
|
-
args: [PLACEHOLDER_HIDDEN_RENDERING_COMPONENT]
|
|
813
|
-
}] }, { type: undefined, decorators: [{
|
|
814
|
-
type: Inject,
|
|
815
|
-
args: [GUARD_RESOLVER]
|
|
816
|
-
}] }, { type: undefined, decorators: [{
|
|
817
|
-
type: Inject,
|
|
818
|
-
args: [DATA_RESOLVER]
|
|
819
|
-
}] }, { type: Object, decorators: [{
|
|
820
|
-
type: Inject,
|
|
821
|
-
args: [PLATFORM_ID]
|
|
822
|
-
}] }]; }, propDecorators: { name: [{
|
|
823
|
-
type: Input
|
|
824
|
-
}], rendering: [{
|
|
825
|
-
type: Input
|
|
826
|
-
}], renderings: [{
|
|
827
|
-
type: Input
|
|
828
|
-
}], outputs: [{
|
|
829
|
-
type: Input
|
|
830
|
-
}], clientOnly: [{
|
|
831
|
-
type: Input
|
|
832
|
-
}], loaded: [{
|
|
833
|
-
type: Output
|
|
834
|
-
}], renderEachTemplate: [{
|
|
835
|
-
type: ContentChild,
|
|
836
|
-
args: [RenderEachDirective, { static: true }]
|
|
837
|
-
}], renderEmptyTemplate: [{
|
|
838
|
-
type: ContentChild,
|
|
839
|
-
args: [RenderEmptyDirective, { static: true }]
|
|
840
|
-
}], placeholderLoading: [{
|
|
841
|
-
type: ContentChild,
|
|
842
|
-
args: [PlaceholderLoadingDirective, { static: true }]
|
|
843
|
-
}], view: [{
|
|
844
|
-
type: ViewChild,
|
|
845
|
-
args: ['view', { read: ViewContainerRef, static: true }]
|
|
846
|
-
}], inputs: [{
|
|
847
|
-
type: Input
|
|
809
|
+
`,
|
|
810
|
+
}]
|
|
811
|
+
}], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i0.Type, decorators: [{
|
|
812
|
+
type: Inject,
|
|
813
|
+
args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
|
|
814
|
+
}] }, { type: i0.Type, decorators: [{
|
|
815
|
+
type: Inject,
|
|
816
|
+
args: [PLACEHOLDER_HIDDEN_RENDERING_COMPONENT]
|
|
817
|
+
}] }, { type: undefined, decorators: [{
|
|
818
|
+
type: Inject,
|
|
819
|
+
args: [GUARD_RESOLVER]
|
|
820
|
+
}] }, { type: undefined, decorators: [{
|
|
821
|
+
type: Inject,
|
|
822
|
+
args: [DATA_RESOLVER]
|
|
823
|
+
}] }, { type: Object, decorators: [{
|
|
824
|
+
type: Inject,
|
|
825
|
+
args: [PLATFORM_ID]
|
|
826
|
+
}] }]; }, propDecorators: { name: [{
|
|
827
|
+
type: Input
|
|
828
|
+
}], rendering: [{
|
|
829
|
+
type: Input
|
|
830
|
+
}], renderings: [{
|
|
831
|
+
type: Input
|
|
832
|
+
}], outputs: [{
|
|
833
|
+
type: Input
|
|
834
|
+
}], clientOnly: [{
|
|
835
|
+
type: Input
|
|
836
|
+
}], loaded: [{
|
|
837
|
+
type: Output
|
|
838
|
+
}], renderEachTemplate: [{
|
|
839
|
+
type: ContentChild,
|
|
840
|
+
args: [RenderEachDirective, { static: true }]
|
|
841
|
+
}], renderEmptyTemplate: [{
|
|
842
|
+
type: ContentChild,
|
|
843
|
+
args: [RenderEmptyDirective, { static: true }]
|
|
844
|
+
}], placeholderLoading: [{
|
|
845
|
+
type: ContentChild,
|
|
846
|
+
args: [PlaceholderLoadingDirective, { static: true }]
|
|
847
|
+
}], view: [{
|
|
848
|
+
type: ViewChild,
|
|
849
|
+
args: ['view', { read: ViewContainerRef, static: true }]
|
|
850
|
+
}], inputs: [{
|
|
851
|
+
type: Input
|
|
848
852
|
}] } });
|
|
849
853
|
|
|
850
|
-
/**
|
|
851
|
-
* Renders a single JSS component given a rendering definition.
|
|
852
|
-
* Useful inside templated placeholders.
|
|
853
|
-
*/
|
|
854
|
-
class RenderComponentComponent {
|
|
855
|
-
constructor(differs, componentFactory, missingComponentComponent) {
|
|
856
|
-
this.differs = differs;
|
|
857
|
-
this.componentFactory = componentFactory;
|
|
858
|
-
this.missingComponentComponent = missingComponentComponent;
|
|
859
|
-
this.destroyed = false;
|
|
860
|
-
}
|
|
861
|
-
set inputs(value) {
|
|
862
|
-
this._inputs = value;
|
|
863
|
-
if (!this._differ && value) {
|
|
864
|
-
this._differ = this.differs.find(value).create();
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
ngOnChanges(changes) {
|
|
868
|
-
if (changes.rendering) {
|
|
869
|
-
this._render();
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
|
-
_setComponentInputs(componentInstance, inputs) {
|
|
873
|
-
Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
|
|
874
|
-
}
|
|
875
|
-
_subscribeComponentOutputs(componentInstance, outputs) {
|
|
876
|
-
Object.keys(outputs)
|
|
877
|
-
.filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
|
|
878
|
-
.forEach((output) => componentInstance[output]
|
|
879
|
-
.pipe(takeWhile(() => !this.destroyed))
|
|
880
|
-
.subscribe(outputs[output]));
|
|
881
|
-
}
|
|
882
|
-
_render() {
|
|
883
|
-
this.view.clear();
|
|
884
|
-
if (!this.rendering) {
|
|
885
|
-
return;
|
|
886
|
-
}
|
|
887
|
-
const resolveComponent = isRawRendering(this.rendering)
|
|
888
|
-
? Promise.resolve({
|
|
889
|
-
componentImplementation: RawComponent,
|
|
890
|
-
componentDefinition: this.rendering,
|
|
891
|
-
})
|
|
892
|
-
: this.componentFactory.getComponent(this.rendering);
|
|
893
|
-
resolveComponent.then((rendering) => {
|
|
894
|
-
if (!rendering.componentImplementation) {
|
|
895
|
-
const componentName = rendering.componentDefinition.componentName;
|
|
854
|
+
/**
|
|
855
|
+
* Renders a single JSS component given a rendering definition.
|
|
856
|
+
* Useful inside templated placeholders.
|
|
857
|
+
*/
|
|
858
|
+
class RenderComponentComponent {
|
|
859
|
+
constructor(differs, componentFactory, missingComponentComponent) {
|
|
860
|
+
this.differs = differs;
|
|
861
|
+
this.componentFactory = componentFactory;
|
|
862
|
+
this.missingComponentComponent = missingComponentComponent;
|
|
863
|
+
this.destroyed = false;
|
|
864
|
+
}
|
|
865
|
+
set inputs(value) {
|
|
866
|
+
this._inputs = value;
|
|
867
|
+
if (!this._differ && value) {
|
|
868
|
+
this._differ = this.differs.find(value).create();
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
ngOnChanges(changes) {
|
|
872
|
+
if (changes.rendering) {
|
|
873
|
+
this._render();
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
_setComponentInputs(componentInstance, inputs) {
|
|
877
|
+
Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
|
|
878
|
+
}
|
|
879
|
+
_subscribeComponentOutputs(componentInstance, outputs) {
|
|
880
|
+
Object.keys(outputs)
|
|
881
|
+
.filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
|
|
882
|
+
.forEach((output) => componentInstance[output]
|
|
883
|
+
.pipe(takeWhile(() => !this.destroyed))
|
|
884
|
+
.subscribe(outputs[output]));
|
|
885
|
+
}
|
|
886
|
+
_render() {
|
|
887
|
+
this.view.clear();
|
|
888
|
+
if (!this.rendering) {
|
|
889
|
+
return;
|
|
890
|
+
}
|
|
891
|
+
const resolveComponent = isRawRendering(this.rendering)
|
|
892
|
+
? Promise.resolve({
|
|
893
|
+
componentImplementation: RawComponent,
|
|
894
|
+
componentDefinition: this.rendering,
|
|
895
|
+
})
|
|
896
|
+
: this.componentFactory.getComponent(this.rendering);
|
|
897
|
+
resolveComponent.then((rendering) => {
|
|
898
|
+
if (!rendering.componentImplementation) {
|
|
899
|
+
const componentName = rendering.componentDefinition.componentName;
|
|
896
900
|
console.error(`Attempted to render unknown component ${componentName}.`, `Ensure component is mapped, like:
|
|
897
901
|
JssModule.withComponents([
|
|
898
902
|
{ name: '${componentName}', type: ${componentName}Component }
|
|
899
|
-
])`);
|
|
900
|
-
rendering.componentImplementation = this.missingComponentComponent;
|
|
901
|
-
}
|
|
902
|
-
const componentInstance = this.view.createComponent(rendering.componentImplementation)
|
|
903
|
-
.instance;
|
|
904
|
-
componentInstance.rendering = rendering.componentDefinition;
|
|
905
|
-
if (this._inputs) {
|
|
906
|
-
this._setComponentInputs(componentInstance, this._inputs);
|
|
907
|
-
}
|
|
908
|
-
if (this.outputs) {
|
|
909
|
-
this._subscribeComponentOutputs(componentInstance, this.outputs);
|
|
910
|
-
}
|
|
911
|
-
});
|
|
912
|
-
}
|
|
913
|
-
}
|
|
914
|
-
RenderComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderComponentComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
903
|
+
])`);
|
|
904
|
+
rendering.componentImplementation = this.missingComponentComponent;
|
|
905
|
+
}
|
|
906
|
+
const componentInstance = this.view.createComponent(rendering.componentImplementation)
|
|
907
|
+
.instance;
|
|
908
|
+
componentInstance.rendering = rendering.componentDefinition;
|
|
909
|
+
if (this._inputs) {
|
|
910
|
+
this._setComponentInputs(componentInstance, this._inputs);
|
|
911
|
+
}
|
|
912
|
+
if (this.outputs) {
|
|
913
|
+
this._subscribeComponentOutputs(componentInstance, this.outputs);
|
|
914
|
+
}
|
|
915
|
+
});
|
|
916
|
+
}
|
|
917
|
+
}
|
|
918
|
+
RenderComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderComponentComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
915
919
|
RenderComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RenderComponentComponent, selector: "sc-render-component", inputs: { rendering: "rendering", outputs: "outputs", inputs: "inputs" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
916
920
|
<ng-template #view></ng-template>
|
|
917
|
-
`, isInline: true });
|
|
918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderComponentComponent, decorators: [{
|
|
919
|
-
type: Component,
|
|
920
|
-
args: [{
|
|
921
|
-
selector: 'sc-render-component',
|
|
921
|
+
`, isInline: true });
|
|
922
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RenderComponentComponent, decorators: [{
|
|
923
|
+
type: Component,
|
|
924
|
+
args: [{
|
|
925
|
+
selector: 'sc-render-component',
|
|
922
926
|
template: `
|
|
923
927
|
<ng-template #view></ng-template>
|
|
924
|
-
`,
|
|
925
|
-
}]
|
|
926
|
-
}], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.Type, decorators: [{
|
|
927
|
-
type: Inject,
|
|
928
|
-
args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
|
|
929
|
-
}] }]; }, propDecorators: { rendering: [{
|
|
930
|
-
type: Input
|
|
931
|
-
}], outputs: [{
|
|
932
|
-
type: Input
|
|
933
|
-
}], view: [{
|
|
934
|
-
type: ViewChild,
|
|
935
|
-
args: ['view', { read: ViewContainerRef, static: true }]
|
|
936
|
-
}], inputs: [{
|
|
937
|
-
type: Input
|
|
928
|
+
`,
|
|
929
|
+
}]
|
|
930
|
+
}], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.Type, decorators: [{
|
|
931
|
+
type: Inject,
|
|
932
|
+
args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
|
|
933
|
+
}] }]; }, propDecorators: { rendering: [{
|
|
934
|
+
type: Input
|
|
935
|
+
}], outputs: [{
|
|
936
|
+
type: Input
|
|
937
|
+
}], view: [{
|
|
938
|
+
type: ViewChild,
|
|
939
|
+
args: ['view', { read: ViewContainerRef, static: true }]
|
|
940
|
+
}], inputs: [{
|
|
941
|
+
type: Input
|
|
938
942
|
}] } });
|
|
939
943
|
|
|
940
|
-
class DateDirective {
|
|
941
|
-
constructor(viewContainer, templateRef, datePipe) {
|
|
942
|
-
this.viewContainer = viewContainer;
|
|
943
|
-
this.templateRef = templateRef;
|
|
944
|
-
this.datePipe = datePipe;
|
|
945
|
-
this.editable = true;
|
|
946
|
-
}
|
|
947
|
-
ngOnChanges(changes) {
|
|
948
|
-
if (changes.field || changes.format) {
|
|
949
|
-
if (!this.viewRef) {
|
|
950
|
-
this.viewContainer.clear();
|
|
951
|
-
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
952
|
-
}
|
|
953
|
-
this.updateView();
|
|
954
|
-
}
|
|
955
|
-
}
|
|
956
|
-
updateView() {
|
|
957
|
-
const field = this.field;
|
|
958
|
-
if (!field || (!field.editable && !field.value)) {
|
|
959
|
-
return;
|
|
960
|
-
}
|
|
961
|
-
const html = field.editable && this.editable ? field.editable : field.value;
|
|
962
|
-
const setDangerously = field.editable && this.editable;
|
|
963
|
-
this.viewRef.rootNodes.forEach((node) => {
|
|
964
|
-
if (setDangerously) {
|
|
965
|
-
node.innerHTML = html;
|
|
966
|
-
}
|
|
967
|
-
else {
|
|
968
|
-
node.textContent = this.datePipe.transform(html, this.format, this.timezone, this.locale);
|
|
969
|
-
}
|
|
970
|
-
});
|
|
971
|
-
}
|
|
972
|
-
}
|
|
973
|
-
DateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Directive });
|
|
974
|
-
DateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DateDirective, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateDirective, decorators: [{
|
|
976
|
-
type: Directive,
|
|
977
|
-
args: [{
|
|
978
|
-
selector: '[scDate]',
|
|
979
|
-
}]
|
|
980
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$1.DatePipe }]; }, propDecorators: { format: [{
|
|
981
|
-
type: Input,
|
|
982
|
-
args: ['scDateFormat']
|
|
983
|
-
}], timezone: [{
|
|
984
|
-
type: Input,
|
|
985
|
-
args: ['scDateTimezone']
|
|
986
|
-
}], locale: [{
|
|
987
|
-
type: Input,
|
|
988
|
-
args: ['scDateLocale']
|
|
989
|
-
}], editable: [{
|
|
990
|
-
type: Input,
|
|
991
|
-
args: ['scDateEditable']
|
|
992
|
-
}], field: [{
|
|
993
|
-
type: Input,
|
|
994
|
-
args: ['scDate']
|
|
944
|
+
class DateDirective {
|
|
945
|
+
constructor(viewContainer, templateRef, datePipe) {
|
|
946
|
+
this.viewContainer = viewContainer;
|
|
947
|
+
this.templateRef = templateRef;
|
|
948
|
+
this.datePipe = datePipe;
|
|
949
|
+
this.editable = true;
|
|
950
|
+
}
|
|
951
|
+
ngOnChanges(changes) {
|
|
952
|
+
if (changes.field || changes.format) {
|
|
953
|
+
if (!this.viewRef) {
|
|
954
|
+
this.viewContainer.clear();
|
|
955
|
+
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
956
|
+
}
|
|
957
|
+
this.updateView();
|
|
958
|
+
}
|
|
959
|
+
}
|
|
960
|
+
updateView() {
|
|
961
|
+
const field = this.field;
|
|
962
|
+
if (!field || (!field.editable && !field.value)) {
|
|
963
|
+
return;
|
|
964
|
+
}
|
|
965
|
+
const html = field.editable && this.editable ? field.editable : field.value;
|
|
966
|
+
const setDangerously = field.editable && this.editable;
|
|
967
|
+
this.viewRef.rootNodes.forEach((node) => {
|
|
968
|
+
if (setDangerously) {
|
|
969
|
+
node.innerHTML = html;
|
|
970
|
+
}
|
|
971
|
+
else {
|
|
972
|
+
node.textContent = this.datePipe.transform(html, this.format, this.timezone, this.locale);
|
|
973
|
+
}
|
|
974
|
+
});
|
|
975
|
+
}
|
|
976
|
+
}
|
|
977
|
+
DateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Directive });
|
|
978
|
+
DateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DateDirective, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateDirective, decorators: [{
|
|
980
|
+
type: Directive,
|
|
981
|
+
args: [{
|
|
982
|
+
selector: '[scDate]',
|
|
983
|
+
}]
|
|
984
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$1.DatePipe }]; }, propDecorators: { format: [{
|
|
985
|
+
type: Input,
|
|
986
|
+
args: ['scDateFormat']
|
|
987
|
+
}], timezone: [{
|
|
988
|
+
type: Input,
|
|
989
|
+
args: ['scDateTimezone']
|
|
990
|
+
}], locale: [{
|
|
991
|
+
type: Input,
|
|
992
|
+
args: ['scDateLocale']
|
|
993
|
+
}], editable: [{
|
|
994
|
+
type: Input,
|
|
995
|
+
args: ['scDateEditable']
|
|
996
|
+
}], field: [{
|
|
997
|
+
type: Input,
|
|
998
|
+
args: ['scDate']
|
|
995
999
|
}] } });
|
|
996
1000
|
|
|
997
|
-
class EditFrameComponent {
|
|
998
|
-
constructor() {
|
|
999
|
-
this.isEditing = false;
|
|
1000
|
-
this.frameProps = {};
|
|
1001
|
-
this.chromeData = '';
|
|
1002
|
-
}
|
|
1003
|
-
ngOnChanges() {
|
|
1004
|
-
this.isEditing = this.sitecore.context.pageEditing || false;
|
|
1005
|
-
if (!this.isEditing) {
|
|
1006
|
-
return;
|
|
1007
|
-
}
|
|
1008
|
-
this.frameProps.class = 'scLooseFrameZone';
|
|
1009
|
-
if (this.cssClass) {
|
|
1010
|
-
this.frameProps.class = `${this.frameProps.class} ${this.cssClass}`;
|
|
1011
|
-
}
|
|
1012
|
-
// item uri for edit frame target
|
|
1013
|
-
if (this.dataSource) {
|
|
1014
|
-
const route = this.sitecore.route;
|
|
1015
|
-
const databaseName = this.dataSource.databaseName || route?.databaseName;
|
|
1016
|
-
const language = this.dataSource.language || this.sitecore.context.language;
|
|
1017
|
-
this.frameProps.sc_item = `sitecore://${databaseName}/${this.dataSource.itemId}?lang=${language}`;
|
|
1018
|
-
}
|
|
1019
|
-
this.chromeData = this.buildChromeData();
|
|
1020
|
-
}
|
|
1021
|
-
buildChromeData() {
|
|
1022
|
-
const chromeData = {
|
|
1023
|
-
displayName: this.title,
|
|
1024
|
-
expandedDisplayName: this.tooltip,
|
|
1025
|
-
};
|
|
1026
|
-
if (this.dataSource) {
|
|
1027
|
-
chromeData.contextItemUri = this.frameProps.sc_item;
|
|
1028
|
-
}
|
|
1029
|
-
chromeData.commands = this.buttons?.map((value) => {
|
|
1030
|
-
return mapButtonToCommand(value, this.dataSource?.itemId, this.parameters);
|
|
1031
|
-
});
|
|
1032
|
-
return JSON.stringify(chromeData);
|
|
1033
|
-
}
|
|
1034
|
-
}
|
|
1035
|
-
EditFrameComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EditFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1001
|
+
class EditFrameComponent {
|
|
1002
|
+
constructor() {
|
|
1003
|
+
this.isEditing = false;
|
|
1004
|
+
this.frameProps = {};
|
|
1005
|
+
this.chromeData = '';
|
|
1006
|
+
}
|
|
1007
|
+
ngOnChanges() {
|
|
1008
|
+
this.isEditing = this.sitecore.context.pageEditing || false;
|
|
1009
|
+
if (!this.isEditing) {
|
|
1010
|
+
return;
|
|
1011
|
+
}
|
|
1012
|
+
this.frameProps.class = 'scLooseFrameZone';
|
|
1013
|
+
if (this.cssClass) {
|
|
1014
|
+
this.frameProps.class = `${this.frameProps.class} ${this.cssClass}`;
|
|
1015
|
+
}
|
|
1016
|
+
// item uri for edit frame target
|
|
1017
|
+
if (this.dataSource) {
|
|
1018
|
+
const route = this.sitecore.route;
|
|
1019
|
+
const databaseName = this.dataSource.databaseName || route?.databaseName;
|
|
1020
|
+
const language = this.dataSource.language || this.sitecore.context.language;
|
|
1021
|
+
this.frameProps.sc_item = `sitecore://${databaseName}/${this.dataSource.itemId}?lang=${language}`;
|
|
1022
|
+
}
|
|
1023
|
+
this.chromeData = this.buildChromeData();
|
|
1024
|
+
}
|
|
1025
|
+
buildChromeData() {
|
|
1026
|
+
const chromeData = {
|
|
1027
|
+
displayName: this.title,
|
|
1028
|
+
expandedDisplayName: this.tooltip,
|
|
1029
|
+
};
|
|
1030
|
+
if (this.dataSource) {
|
|
1031
|
+
chromeData.contextItemUri = this.frameProps.sc_item;
|
|
1032
|
+
}
|
|
1033
|
+
chromeData.commands = this.buttons?.map((value) => {
|
|
1034
|
+
return mapButtonToCommand(value, this.dataSource?.itemId, this.parameters);
|
|
1035
|
+
});
|
|
1036
|
+
return JSON.stringify(chromeData);
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
EditFrameComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EditFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1036
1040
|
EditFrameComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EditFrameComponent, selector: "sc-edit-frame,[sc-edit-frame]", inputs: { dataSource: "dataSource", buttons: "buttons", title: "title", tooltip: "tooltip", cssClass: "cssClass", parameters: "parameters", sitecore: "sitecore" }, usesOnChanges: true, ngImport: i0, template: `
|
|
1037
1041
|
<ng-template #childContent>
|
|
1038
1042
|
<ng-content></ng-content>
|
|
@@ -1048,11 +1052,11 @@ EditFrameComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
1048
1052
|
<ng-template #elseBlock>
|
|
1049
1053
|
<ng-container *ngTemplateOutlet="childContent"></ng-container>
|
|
1050
1054
|
</ng-template>
|
|
1051
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1052
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EditFrameComponent, decorators: [{
|
|
1053
|
-
type: Component,
|
|
1054
|
-
args: [{
|
|
1055
|
-
selector: 'sc-edit-frame,[sc-edit-frame]',
|
|
1055
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EditFrameComponent, decorators: [{
|
|
1057
|
+
type: Component,
|
|
1058
|
+
args: [{
|
|
1059
|
+
selector: 'sc-edit-frame,[sc-edit-frame]',
|
|
1056
1060
|
template: `
|
|
1057
1061
|
<ng-template #childContent>
|
|
1058
1062
|
<ng-content></ng-content>
|
|
@@ -1068,297 +1072,297 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1068
1072
|
<ng-template #elseBlock>
|
|
1069
1073
|
<ng-container *ngTemplateOutlet="childContent"></ng-container>
|
|
1070
1074
|
</ng-template>
|
|
1071
|
-
`,
|
|
1072
|
-
}]
|
|
1073
|
-
}], propDecorators: { dataSource: [{
|
|
1074
|
-
type: Input
|
|
1075
|
-
}], buttons: [{
|
|
1076
|
-
type: Input
|
|
1077
|
-
}], title: [{
|
|
1078
|
-
type: Input
|
|
1079
|
-
}], tooltip: [{
|
|
1080
|
-
type: Input
|
|
1081
|
-
}], cssClass: [{
|
|
1082
|
-
type: Input
|
|
1083
|
-
}], parameters: [{
|
|
1084
|
-
type: Input
|
|
1085
|
-
}], sitecore: [{
|
|
1086
|
-
type: Input
|
|
1075
|
+
`,
|
|
1076
|
+
}]
|
|
1077
|
+
}], propDecorators: { dataSource: [{
|
|
1078
|
+
type: Input
|
|
1079
|
+
}], buttons: [{
|
|
1080
|
+
type: Input
|
|
1081
|
+
}], title: [{
|
|
1082
|
+
type: Input
|
|
1083
|
+
}], tooltip: [{
|
|
1084
|
+
type: Input
|
|
1085
|
+
}], cssClass: [{
|
|
1086
|
+
type: Input
|
|
1087
|
+
}], parameters: [{
|
|
1088
|
+
type: Input
|
|
1089
|
+
}], sitecore: [{
|
|
1090
|
+
type: Input
|
|
1087
1091
|
}] } });
|
|
1088
1092
|
|
|
1089
|
-
class RichTextDirective {
|
|
1090
|
-
constructor(viewContainer, templateRef, renderer, router) {
|
|
1091
|
-
this.viewContainer = viewContainer;
|
|
1092
|
-
this.templateRef = templateRef;
|
|
1093
|
-
this.renderer = renderer;
|
|
1094
|
-
this.router = router;
|
|
1095
|
-
this.editable = true;
|
|
1096
|
-
}
|
|
1097
|
-
ngOnChanges(changes) {
|
|
1098
|
-
if (changes.field || changes.editable) {
|
|
1099
|
-
if (!this.viewRef) {
|
|
1100
|
-
this.viewContainer.clear();
|
|
1101
|
-
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1102
|
-
}
|
|
1103
|
-
this.updateView();
|
|
1104
|
-
}
|
|
1105
|
-
}
|
|
1106
|
-
updateView() {
|
|
1107
|
-
const field = this.field;
|
|
1108
|
-
if (!field || (!field.editable && !field.value)) {
|
|
1109
|
-
return;
|
|
1110
|
-
}
|
|
1111
|
-
const html = field.editable && this.editable ? field.editable : field.value;
|
|
1112
|
-
this.viewRef.rootNodes.forEach((node) => {
|
|
1113
|
-
node.innerHTML = html;
|
|
1114
|
-
if (!node.querySelectorAll) {
|
|
1115
|
-
return;
|
|
1116
|
-
}
|
|
1117
|
-
const links = node.querySelectorAll('a[href]');
|
|
1118
|
-
const linksArray = [].slice.call(links);
|
|
1119
|
-
linksArray.forEach((link) => {
|
|
1120
|
-
const href = link.getAttribute('href');
|
|
1121
|
-
const target = link.getAttribute('target');
|
|
1122
|
-
if (!href || isAbsoluteUrl(href) || target === '_blank' || target === '_top') {
|
|
1123
|
-
return;
|
|
1124
|
-
}
|
|
1125
|
-
this.renderer.listen(link, 'click', (event) => {
|
|
1126
|
-
this.router.navigateByUrl(href);
|
|
1127
|
-
event.preventDefault();
|
|
1128
|
-
});
|
|
1129
|
-
});
|
|
1130
|
-
});
|
|
1131
|
-
}
|
|
1132
|
-
}
|
|
1133
|
-
RichTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RichTextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1134
|
-
RichTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RichTextDirective, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
1135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RichTextDirective, decorators: [{
|
|
1136
|
-
type: Directive,
|
|
1137
|
-
args: [{
|
|
1138
|
-
selector: '[scRichText]',
|
|
1139
|
-
}]
|
|
1140
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i1.Router }]; }, propDecorators: { editable: [{
|
|
1141
|
-
type: Input,
|
|
1142
|
-
args: ['scRichTextEditable']
|
|
1143
|
-
}], field: [{
|
|
1144
|
-
type: Input,
|
|
1145
|
-
args: ['scRichText']
|
|
1093
|
+
class RichTextDirective {
|
|
1094
|
+
constructor(viewContainer, templateRef, renderer, router) {
|
|
1095
|
+
this.viewContainer = viewContainer;
|
|
1096
|
+
this.templateRef = templateRef;
|
|
1097
|
+
this.renderer = renderer;
|
|
1098
|
+
this.router = router;
|
|
1099
|
+
this.editable = true;
|
|
1100
|
+
}
|
|
1101
|
+
ngOnChanges(changes) {
|
|
1102
|
+
if (changes.field || changes.editable) {
|
|
1103
|
+
if (!this.viewRef) {
|
|
1104
|
+
this.viewContainer.clear();
|
|
1105
|
+
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1106
|
+
}
|
|
1107
|
+
this.updateView();
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1110
|
+
updateView() {
|
|
1111
|
+
const field = this.field;
|
|
1112
|
+
if (!field || (!field.editable && !field.value)) {
|
|
1113
|
+
return;
|
|
1114
|
+
}
|
|
1115
|
+
const html = field.editable && this.editable ? field.editable : field.value;
|
|
1116
|
+
this.viewRef.rootNodes.forEach((node) => {
|
|
1117
|
+
node.innerHTML = html;
|
|
1118
|
+
if (!node.querySelectorAll) {
|
|
1119
|
+
return;
|
|
1120
|
+
}
|
|
1121
|
+
const links = node.querySelectorAll('a[href]');
|
|
1122
|
+
const linksArray = [].slice.call(links);
|
|
1123
|
+
linksArray.forEach((link) => {
|
|
1124
|
+
const href = link.getAttribute('href');
|
|
1125
|
+
const target = link.getAttribute('target');
|
|
1126
|
+
if (!href || isAbsoluteUrl(href) || target === '_blank' || target === '_top') {
|
|
1127
|
+
return;
|
|
1128
|
+
}
|
|
1129
|
+
this.renderer.listen(link, 'click', (event) => {
|
|
1130
|
+
this.router.navigateByUrl(href);
|
|
1131
|
+
event.preventDefault();
|
|
1132
|
+
});
|
|
1133
|
+
});
|
|
1134
|
+
});
|
|
1135
|
+
}
|
|
1136
|
+
}
|
|
1137
|
+
RichTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RichTextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1138
|
+
RichTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: RichTextDirective, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
1139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RichTextDirective, decorators: [{
|
|
1140
|
+
type: Directive,
|
|
1141
|
+
args: [{
|
|
1142
|
+
selector: '[scRichText]',
|
|
1143
|
+
}]
|
|
1144
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i1.Router }]; }, propDecorators: { editable: [{
|
|
1145
|
+
type: Input,
|
|
1146
|
+
args: ['scRichTextEditable']
|
|
1147
|
+
}], field: [{
|
|
1148
|
+
type: Input,
|
|
1149
|
+
args: ['scRichText']
|
|
1146
1150
|
}] } });
|
|
1147
1151
|
|
|
1148
|
-
class TextDirective {
|
|
1149
|
-
constructor(viewContainer, templateRef) {
|
|
1150
|
-
this.viewContainer = viewContainer;
|
|
1151
|
-
this.templateRef = templateRef;
|
|
1152
|
-
this.editable = true;
|
|
1153
|
-
this.encode = true;
|
|
1154
|
-
}
|
|
1155
|
-
ngOnChanges(changes) {
|
|
1156
|
-
if (changes.field || changes.editable || changes.encode) {
|
|
1157
|
-
if (!this.viewRef) {
|
|
1158
|
-
this.viewContainer.clear();
|
|
1159
|
-
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1160
|
-
}
|
|
1161
|
-
this.updateView();
|
|
1162
|
-
}
|
|
1163
|
-
}
|
|
1164
|
-
updateView() {
|
|
1165
|
-
const field = this.field;
|
|
1166
|
-
let editable = this.editable;
|
|
1167
|
-
if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
|
|
1168
|
-
return;
|
|
1169
|
-
}
|
|
1170
|
-
// can't use editable value if we want to output unencoded
|
|
1171
|
-
if (!this.encode) {
|
|
1172
|
-
editable = false;
|
|
1173
|
-
}
|
|
1174
|
-
const html = field.editable && editable ? field.editable : field.value;
|
|
1175
|
-
const setDangerously = (field.editable && editable) || !this.encode;
|
|
1176
|
-
this.viewRef.rootNodes.forEach((node) => {
|
|
1177
|
-
if (setDangerously) {
|
|
1178
|
-
node.innerHTML = html;
|
|
1179
|
-
}
|
|
1180
|
-
else {
|
|
1181
|
-
node.textContent = html;
|
|
1182
|
-
}
|
|
1183
|
-
});
|
|
1184
|
-
}
|
|
1185
|
-
}
|
|
1186
|
-
TextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1187
|
-
TextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TextDirective, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
1188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextDirective, decorators: [{
|
|
1189
|
-
type: Directive,
|
|
1190
|
-
args: [{
|
|
1191
|
-
selector: '[scText]',
|
|
1192
|
-
}]
|
|
1193
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { editable: [{
|
|
1194
|
-
type: Input,
|
|
1195
|
-
args: ['scTextEditable']
|
|
1196
|
-
}], encode: [{
|
|
1197
|
-
type: Input,
|
|
1198
|
-
args: ['scTextEncode']
|
|
1199
|
-
}], field: [{
|
|
1200
|
-
type: Input,
|
|
1201
|
-
args: ['scText']
|
|
1152
|
+
class TextDirective {
|
|
1153
|
+
constructor(viewContainer, templateRef) {
|
|
1154
|
+
this.viewContainer = viewContainer;
|
|
1155
|
+
this.templateRef = templateRef;
|
|
1156
|
+
this.editable = true;
|
|
1157
|
+
this.encode = true;
|
|
1158
|
+
}
|
|
1159
|
+
ngOnChanges(changes) {
|
|
1160
|
+
if (changes.field || changes.editable || changes.encode) {
|
|
1161
|
+
if (!this.viewRef) {
|
|
1162
|
+
this.viewContainer.clear();
|
|
1163
|
+
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1164
|
+
}
|
|
1165
|
+
this.updateView();
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1168
|
+
updateView() {
|
|
1169
|
+
const field = this.field;
|
|
1170
|
+
let editable = this.editable;
|
|
1171
|
+
if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
|
|
1172
|
+
return;
|
|
1173
|
+
}
|
|
1174
|
+
// can't use editable value if we want to output unencoded
|
|
1175
|
+
if (!this.encode) {
|
|
1176
|
+
editable = false;
|
|
1177
|
+
}
|
|
1178
|
+
const html = field.editable && editable ? field.editable : field.value;
|
|
1179
|
+
const setDangerously = (field.editable && editable) || !this.encode;
|
|
1180
|
+
this.viewRef.rootNodes.forEach((node) => {
|
|
1181
|
+
if (setDangerously) {
|
|
1182
|
+
node.innerHTML = html;
|
|
1183
|
+
}
|
|
1184
|
+
else {
|
|
1185
|
+
node.textContent = html;
|
|
1186
|
+
}
|
|
1187
|
+
});
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
TextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1191
|
+
TextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TextDirective, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"] }, usesOnChanges: true, ngImport: i0 });
|
|
1192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TextDirective, decorators: [{
|
|
1193
|
+
type: Directive,
|
|
1194
|
+
args: [{
|
|
1195
|
+
selector: '[scText]',
|
|
1196
|
+
}]
|
|
1197
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { editable: [{
|
|
1198
|
+
type: Input,
|
|
1199
|
+
args: ['scTextEditable']
|
|
1200
|
+
}], encode: [{
|
|
1201
|
+
type: Input,
|
|
1202
|
+
args: ['scTextEncode']
|
|
1203
|
+
}], field: [{
|
|
1204
|
+
type: Input,
|
|
1205
|
+
args: ['scText']
|
|
1202
1206
|
}] } });
|
|
1203
1207
|
|
|
1204
|
-
/**
|
|
1205
|
-
* @param {T} value
|
|
1206
|
-
* @returns {Promise | Observable | any} resolved value
|
|
1207
|
-
*/
|
|
1208
|
-
function wrapIntoObservable(value) {
|
|
1209
|
-
if (ɵisObservable(value)) {
|
|
1210
|
-
return value;
|
|
1211
|
-
}
|
|
1212
|
-
if (ɵisPromise(value)) {
|
|
1213
|
-
return from(Promise.resolve(value));
|
|
1214
|
-
}
|
|
1215
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1216
|
-
return of(value);
|
|
1208
|
+
/**
|
|
1209
|
+
* @param {T} value
|
|
1210
|
+
* @returns {Promise | Observable | any} resolved value
|
|
1211
|
+
*/
|
|
1212
|
+
function wrapIntoObservable(value) {
|
|
1213
|
+
if (ɵisObservable(value)) {
|
|
1214
|
+
return value;
|
|
1215
|
+
}
|
|
1216
|
+
if (ɵisPromise(value)) {
|
|
1217
|
+
return from(Promise.resolve(value));
|
|
1218
|
+
}
|
|
1219
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1220
|
+
return of(value);
|
|
1217
1221
|
}
|
|
1218
1222
|
|
|
1219
|
-
/**
|
|
1220
|
-
* @param {Injector} injector
|
|
1221
|
-
* @param {ActivatedRoute} activatedRoute
|
|
1222
|
-
* @param {Router} router
|
|
1223
|
-
* @returns resolved data
|
|
1224
|
-
*/
|
|
1225
|
-
function dataResolverFactory(injector, activatedRoute, router) {
|
|
1226
|
-
/**
|
|
1227
|
-
* @param {JssResolve<unknown> | Type<JssResolve<unknown>>} resolver
|
|
1228
|
-
* @returns resolver instance
|
|
1229
|
-
*/
|
|
1230
|
-
function getResolverInstance(resolver) {
|
|
1231
|
-
return 'resolve' in resolver ? resolver : injector.get(resolver);
|
|
1232
|
-
}
|
|
1233
|
-
/**
|
|
1234
|
-
* @param {ComponentFactoryResult} factory
|
|
1235
|
-
* @returns {Array<[string, JssResolve<unknown>]>} resolver instances
|
|
1236
|
-
*/
|
|
1237
|
-
function collectResolverInstances(factory) {
|
|
1238
|
-
if (factory.resolve) {
|
|
1239
|
-
const resolve = factory.resolve;
|
|
1240
|
-
return Object.keys(factory.resolve).map((key) => [
|
|
1241
|
-
key,
|
|
1242
|
-
getResolverInstance(resolve[key]),
|
|
1243
|
-
]);
|
|
1244
|
-
}
|
|
1245
|
-
return [];
|
|
1246
|
-
}
|
|
1247
|
-
/**
|
|
1248
|
-
* @param {JssResolve<unknown>} resolver
|
|
1249
|
-
* @param {ComponentFactoryResult} factory
|
|
1250
|
-
* @returns data
|
|
1251
|
-
*/
|
|
1252
|
-
function _resolveData(resolver, factory) {
|
|
1253
|
-
const data = resolver.resolve({
|
|
1254
|
-
activatedRoute: activatedRoute.snapshot,
|
|
1255
|
-
routerState: router.routerState.snapshot,
|
|
1256
|
-
rendering: factory.componentDefinition,
|
|
1257
|
-
});
|
|
1258
|
-
const data$ = wrapIntoObservable(data);
|
|
1259
|
-
return data$.pipe(take(1)).toPromise();
|
|
1260
|
-
}
|
|
1261
|
-
return function resolveData(factories) {
|
|
1262
|
-
return Promise.all(factories.map((factory) => {
|
|
1263
|
-
const resolvers = collectResolverInstances(factory);
|
|
1264
|
-
const pendingData = resolvers.map(([key, resolver]) => _resolveData(resolver, factory).then((data) => [key, data]));
|
|
1265
|
-
return Promise.all(pendingData)
|
|
1266
|
-
.then((allData) => allData.reduce((acc, [key, data]) => {
|
|
1267
|
-
acc[key] = data;
|
|
1268
|
-
return acc;
|
|
1269
|
-
}, {}))
|
|
1270
|
-
.then((data) => ({ factory, data }));
|
|
1271
|
-
}));
|
|
1272
|
-
};
|
|
1223
|
+
/**
|
|
1224
|
+
* @param {Injector} injector
|
|
1225
|
+
* @param {ActivatedRoute} activatedRoute
|
|
1226
|
+
* @param {Router} router
|
|
1227
|
+
* @returns resolved data
|
|
1228
|
+
*/
|
|
1229
|
+
function dataResolverFactory(injector, activatedRoute, router) {
|
|
1230
|
+
/**
|
|
1231
|
+
* @param {JssResolve<unknown> | Type<JssResolve<unknown>>} resolver
|
|
1232
|
+
* @returns resolver instance
|
|
1233
|
+
*/
|
|
1234
|
+
function getResolverInstance(resolver) {
|
|
1235
|
+
return 'resolve' in resolver ? resolver : injector.get(resolver);
|
|
1236
|
+
}
|
|
1237
|
+
/**
|
|
1238
|
+
* @param {ComponentFactoryResult} factory
|
|
1239
|
+
* @returns {Array<[string, JssResolve<unknown>]>} resolver instances
|
|
1240
|
+
*/
|
|
1241
|
+
function collectResolverInstances(factory) {
|
|
1242
|
+
if (factory.resolve) {
|
|
1243
|
+
const resolve = factory.resolve;
|
|
1244
|
+
return Object.keys(factory.resolve).map((key) => [
|
|
1245
|
+
key,
|
|
1246
|
+
getResolverInstance(resolve[key]),
|
|
1247
|
+
]);
|
|
1248
|
+
}
|
|
1249
|
+
return [];
|
|
1250
|
+
}
|
|
1251
|
+
/**
|
|
1252
|
+
* @param {JssResolve<unknown>} resolver
|
|
1253
|
+
* @param {ComponentFactoryResult} factory
|
|
1254
|
+
* @returns data
|
|
1255
|
+
*/
|
|
1256
|
+
function _resolveData(resolver, factory) {
|
|
1257
|
+
const data = resolver.resolve({
|
|
1258
|
+
activatedRoute: activatedRoute.snapshot,
|
|
1259
|
+
routerState: router.routerState.snapshot,
|
|
1260
|
+
rendering: factory.componentDefinition,
|
|
1261
|
+
});
|
|
1262
|
+
const data$ = wrapIntoObservable(data);
|
|
1263
|
+
return data$.pipe(take(1)).toPromise();
|
|
1264
|
+
}
|
|
1265
|
+
return function resolveData(factories) {
|
|
1266
|
+
return Promise.all(factories.map((factory) => {
|
|
1267
|
+
const resolvers = collectResolverInstances(factory);
|
|
1268
|
+
const pendingData = resolvers.map(([key, resolver]) => _resolveData(resolver, factory).then((data) => [key, data]));
|
|
1269
|
+
return Promise.all(pendingData)
|
|
1270
|
+
.then((allData) => allData.reduce((acc, [key, data]) => {
|
|
1271
|
+
acc[key] = data;
|
|
1272
|
+
return acc;
|
|
1273
|
+
}, {}))
|
|
1274
|
+
.then((data) => ({ factory, data }));
|
|
1275
|
+
}));
|
|
1276
|
+
};
|
|
1273
1277
|
}
|
|
1274
1278
|
|
|
1275
|
-
/**
|
|
1276
|
-
* @param {boolean | string | string[] | UrlTree} value
|
|
1277
|
-
* @returns instance of value
|
|
1278
|
-
*/
|
|
1279
|
-
function isRedirectValue(value) {
|
|
1280
|
-
return value instanceof UrlTree || typeof value === 'string' || Array.isArray(value);
|
|
1281
|
-
}
|
|
1282
|
-
/**
|
|
1283
|
-
* Resolves components based on provided guards
|
|
1284
|
-
* @param {Injector} injector
|
|
1285
|
-
* @param {ActivatedRoute} activatedRoute
|
|
1286
|
-
* @param {Router} router
|
|
1287
|
-
* @returns {(factories: ComponentFactoryResult[]) => Promise<ComponentFactoryResult[]>} factory
|
|
1288
|
-
*/
|
|
1289
|
-
function guardResolverFactory(injector, activatedRoute, router) {
|
|
1290
|
-
/**
|
|
1291
|
-
* @param {JssCanActivate | Type<JssCanActivate> | JssCanActivateFn} guard
|
|
1292
|
-
* @returns resolved guard
|
|
1293
|
-
*/
|
|
1294
|
-
function getGuardInstance(guard) {
|
|
1295
|
-
if ('canActivate' in guard) {
|
|
1296
|
-
return guard;
|
|
1297
|
-
}
|
|
1298
|
-
try {
|
|
1299
|
-
// Class is provided
|
|
1300
|
-
return injector.get(guard);
|
|
1301
|
-
}
|
|
1302
|
-
catch {
|
|
1303
|
-
// Function is provided
|
|
1304
|
-
return guard;
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
/**
|
|
1308
|
-
* @param {ComponentFactoryResult} factory
|
|
1309
|
-
* @returns {(JssCanActivate | JssCanActivateFn)[]} guard instances
|
|
1310
|
-
*/
|
|
1311
|
-
function collectGuardInstances(factory) {
|
|
1312
|
-
if (factory.canActivate) {
|
|
1313
|
-
return Array.isArray(factory.canActivate)
|
|
1314
|
-
? factory.canActivate.map(getGuardInstance)
|
|
1315
|
-
: [getGuardInstance(factory.canActivate)];
|
|
1316
|
-
}
|
|
1317
|
-
return [];
|
|
1318
|
-
}
|
|
1319
|
-
/**
|
|
1320
|
-
*
|
|
1321
|
-
* @param {JssCanActivate | JssCanActivateFn} guard
|
|
1322
|
-
* @param {ComponentFactoryResult} factory
|
|
1323
|
-
* @returns canActivate
|
|
1324
|
-
*/
|
|
1325
|
-
function resolveGuard(guard, factory) {
|
|
1326
|
-
const canActivate = 'canActivate' in guard ? guard.canActivate : guard;
|
|
1327
|
-
const guardValue = canActivate({
|
|
1328
|
-
activatedRoute: activatedRoute.snapshot,
|
|
1329
|
-
routerState: router.routerState.snapshot,
|
|
1330
|
-
rendering: factory.componentDefinition,
|
|
1331
|
-
});
|
|
1332
|
-
const canActivate$ = wrapIntoObservable(guardValue);
|
|
1333
|
-
return canActivate$
|
|
1334
|
-
.pipe(take(1), mergeMap((value) => {
|
|
1335
|
-
if (isRedirectValue(value)) {
|
|
1336
|
-
return throwError(value);
|
|
1337
|
-
}
|
|
1338
|
-
else {
|
|
1339
|
-
return of(value);
|
|
1340
|
-
}
|
|
1341
|
-
}))
|
|
1342
|
-
.toPromise();
|
|
1343
|
-
}
|
|
1344
|
-
return function resolveGuards(factories) {
|
|
1345
|
-
const resolved = factories.map((factory) => {
|
|
1346
|
-
const guards = collectGuardInstances(factory);
|
|
1347
|
-
const pending = guards.map((guard) => resolveGuard(guard, factory));
|
|
1348
|
-
return Promise.all(pending)
|
|
1349
|
-
.then((canActive) => canActive.every((v) => v))
|
|
1350
|
-
.then((canActivate) => ({
|
|
1351
|
-
factory,
|
|
1352
|
-
canActivate,
|
|
1353
|
-
}));
|
|
1354
|
-
});
|
|
1355
|
-
return Promise.all(resolved).then((mapped) => mapped.filter((m) => m.canActivate).map((m) => m.factory));
|
|
1356
|
-
};
|
|
1279
|
+
/**
|
|
1280
|
+
* @param {boolean | string | string[] | UrlTree} value
|
|
1281
|
+
* @returns instance of value
|
|
1282
|
+
*/
|
|
1283
|
+
function isRedirectValue(value) {
|
|
1284
|
+
return value instanceof UrlTree || typeof value === 'string' || Array.isArray(value);
|
|
1285
|
+
}
|
|
1286
|
+
/**
|
|
1287
|
+
* Resolves components based on provided guards
|
|
1288
|
+
* @param {Injector} injector
|
|
1289
|
+
* @param {ActivatedRoute} activatedRoute
|
|
1290
|
+
* @param {Router} router
|
|
1291
|
+
* @returns {(factories: ComponentFactoryResult[]) => Promise<ComponentFactoryResult[]>} factory
|
|
1292
|
+
*/
|
|
1293
|
+
function guardResolverFactory(injector, activatedRoute, router) {
|
|
1294
|
+
/**
|
|
1295
|
+
* @param {JssCanActivate | Type<JssCanActivate> | JssCanActivateFn} guard
|
|
1296
|
+
* @returns resolved guard
|
|
1297
|
+
*/
|
|
1298
|
+
function getGuardInstance(guard) {
|
|
1299
|
+
if ('canActivate' in guard) {
|
|
1300
|
+
return guard;
|
|
1301
|
+
}
|
|
1302
|
+
try {
|
|
1303
|
+
// Class is provided
|
|
1304
|
+
return injector.get(guard);
|
|
1305
|
+
}
|
|
1306
|
+
catch {
|
|
1307
|
+
// Function is provided
|
|
1308
|
+
return guard;
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1311
|
+
/**
|
|
1312
|
+
* @param {ComponentFactoryResult} factory
|
|
1313
|
+
* @returns {(JssCanActivate | JssCanActivateFn)[]} guard instances
|
|
1314
|
+
*/
|
|
1315
|
+
function collectGuardInstances(factory) {
|
|
1316
|
+
if (factory.canActivate) {
|
|
1317
|
+
return Array.isArray(factory.canActivate)
|
|
1318
|
+
? factory.canActivate.map(getGuardInstance)
|
|
1319
|
+
: [getGuardInstance(factory.canActivate)];
|
|
1320
|
+
}
|
|
1321
|
+
return [];
|
|
1322
|
+
}
|
|
1323
|
+
/**
|
|
1324
|
+
*
|
|
1325
|
+
* @param {JssCanActivate | JssCanActivateFn} guard
|
|
1326
|
+
* @param {ComponentFactoryResult} factory
|
|
1327
|
+
* @returns canActivate
|
|
1328
|
+
*/
|
|
1329
|
+
function resolveGuard(guard, factory) {
|
|
1330
|
+
const canActivate = 'canActivate' in guard ? guard.canActivate : guard;
|
|
1331
|
+
const guardValue = canActivate({
|
|
1332
|
+
activatedRoute: activatedRoute.snapshot,
|
|
1333
|
+
routerState: router.routerState.snapshot,
|
|
1334
|
+
rendering: factory.componentDefinition,
|
|
1335
|
+
});
|
|
1336
|
+
const canActivate$ = wrapIntoObservable(guardValue);
|
|
1337
|
+
return canActivate$
|
|
1338
|
+
.pipe(take(1), mergeMap((value) => {
|
|
1339
|
+
if (isRedirectValue(value)) {
|
|
1340
|
+
return throwError(value);
|
|
1341
|
+
}
|
|
1342
|
+
else {
|
|
1343
|
+
return of(value);
|
|
1344
|
+
}
|
|
1345
|
+
}))
|
|
1346
|
+
.toPromise();
|
|
1347
|
+
}
|
|
1348
|
+
return function resolveGuards(factories) {
|
|
1349
|
+
const resolved = factories.map((factory) => {
|
|
1350
|
+
const guards = collectGuardInstances(factory);
|
|
1351
|
+
const pending = guards.map((guard) => resolveGuard(guard, factory));
|
|
1352
|
+
return Promise.all(pending)
|
|
1353
|
+
.then((canActive) => canActive.every((v) => v))
|
|
1354
|
+
.then((canActivate) => ({
|
|
1355
|
+
factory,
|
|
1356
|
+
canActivate,
|
|
1357
|
+
}));
|
|
1358
|
+
});
|
|
1359
|
+
return Promise.all(resolved).then((mapped) => mapped.filter((m) => m.canActivate).map((m) => m.factory));
|
|
1360
|
+
};
|
|
1357
1361
|
}
|
|
1358
1362
|
|
|
1359
|
-
class MissingComponentComponent {
|
|
1360
|
-
}
|
|
1361
|
-
MissingComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MissingComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1363
|
+
class MissingComponentComponent {
|
|
1364
|
+
}
|
|
1365
|
+
MissingComponentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MissingComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1362
1366
|
MissingComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MissingComponentComponent, selector: "sc-missing-component", inputs: { rendering: "rendering" }, ngImport: i0, template: `
|
|
1363
1367
|
<div
|
|
1364
1368
|
style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;"
|
|
@@ -1366,11 +1370,11 @@ MissingComponentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
1366
1370
|
<h2>{{ rendering.componentName }}</h2>
|
|
1367
1371
|
<p>JSS component is missing Angular component implementation.</p>
|
|
1368
1372
|
</div>
|
|
1369
|
-
`, isInline: true });
|
|
1370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MissingComponentComponent, decorators: [{
|
|
1371
|
-
type: Component,
|
|
1372
|
-
args: [{
|
|
1373
|
-
selector: 'sc-missing-component',
|
|
1373
|
+
`, isInline: true });
|
|
1374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MissingComponentComponent, decorators: [{
|
|
1375
|
+
type: Component,
|
|
1376
|
+
args: [{
|
|
1377
|
+
selector: 'sc-missing-component',
|
|
1374
1378
|
template: `
|
|
1375
1379
|
<div
|
|
1376
1380
|
style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;"
|
|
@@ -1378,157 +1382,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1378
1382
|
<h2>{{ rendering.componentName }}</h2>
|
|
1379
1383
|
<p>JSS component is missing Angular component implementation.</p>
|
|
1380
1384
|
</div>
|
|
1381
|
-
`,
|
|
1382
|
-
}]
|
|
1383
|
-
}], propDecorators: { rendering: [{
|
|
1384
|
-
type: Input
|
|
1385
|
+
`,
|
|
1386
|
+
}]
|
|
1387
|
+
}], propDecorators: { rendering: [{
|
|
1388
|
+
type: Input
|
|
1385
1389
|
}] } });
|
|
1386
1390
|
|
|
1387
|
-
class JssModule {
|
|
1388
|
-
/**
|
|
1389
|
-
* Instantiates the JSS module with no component factory.
|
|
1390
|
-
* Useful for using it from libraries. Most of the time you'd want withComponents()
|
|
1391
|
-
* @returns {ModuleWithProviders<JssModule>} module
|
|
1392
|
-
*/
|
|
1393
|
-
static forRoot() {
|
|
1394
|
-
return {
|
|
1395
|
-
ngModule: JssModule,
|
|
1396
|
-
providers: [
|
|
1397
|
-
DatePipe,
|
|
1398
|
-
JssComponentFactoryService,
|
|
1399
|
-
{
|
|
1400
|
-
provide: GUARD_RESOLVER,
|
|
1401
|
-
useFactory: guardResolverFactory,
|
|
1402
|
-
deps: [Injector, ActivatedRoute, Router],
|
|
1403
|
-
},
|
|
1404
|
-
{
|
|
1405
|
-
provide: DATA_RESOLVER,
|
|
1406
|
-
useFactory: dataResolverFactory,
|
|
1407
|
-
deps: [Injector, ActivatedRoute, Router],
|
|
1408
|
-
},
|
|
1409
|
-
],
|
|
1410
|
-
};
|
|
1411
|
-
}
|
|
1412
|
-
/**
|
|
1413
|
-
* Instantiates a module for a lazy-loaded JSS component
|
|
1414
|
-
* @param {Type<unknown>} component
|
|
1415
|
-
* @returns {ModuleWithProviders<JssModule>} module
|
|
1416
|
-
*/
|
|
1417
|
-
static forChild(component) {
|
|
1418
|
-
return {
|
|
1419
|
-
ngModule: JssModule,
|
|
1420
|
-
providers: [
|
|
1421
|
-
{ provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
|
|
1422
|
-
{ provide: ROUTES, useValue: [], multi: true },
|
|
1423
|
-
{ provide: DYNAMIC_COMPONENT, useValue: component },
|
|
1424
|
-
],
|
|
1425
|
-
};
|
|
1426
|
-
}
|
|
1427
|
-
/**
|
|
1428
|
-
* Instantiates the JSS module and specifies the mapping from component name to component implementation.
|
|
1429
|
-
* Appropriate when defining the set of JSS components that your app is aware of.
|
|
1430
|
-
* @param {ComponentNameAndType[]} components
|
|
1431
|
-
* @param {ComponentNameAndModule[]} [lazyComponents]
|
|
1432
|
-
* @returns {ModuleWithProviders<JssModule>} module
|
|
1433
|
-
*/
|
|
1434
|
-
static withComponents(components, lazyComponents) {
|
|
1435
|
-
return {
|
|
1436
|
-
ngModule: JssModule,
|
|
1437
|
-
providers: [
|
|
1438
|
-
{
|
|
1439
|
-
provide: ANALYZE_FOR_ENTRY_COMPONENTS,
|
|
1440
|
-
useValue: components,
|
|
1441
|
-
multi: true,
|
|
1442
|
-
},
|
|
1443
|
-
{ provide: PLACEHOLDER_COMPONENTS, useValue: components },
|
|
1444
|
-
{ provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
|
|
1445
|
-
{ provide: ROUTES, useValue: lazyComponents || [], multi: true },
|
|
1446
|
-
{ provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent },
|
|
1447
|
-
{ provide: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT, useValue: HiddenRenderingComponent },
|
|
1448
|
-
...JssModule.forRoot().providers,
|
|
1449
|
-
],
|
|
1450
|
-
};
|
|
1451
|
-
}
|
|
1452
|
-
}
|
|
1453
|
-
JssModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1454
|
-
JssModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: JssModule, declarations: [FileDirective,
|
|
1455
|
-
ImageDirective,
|
|
1456
|
-
LinkDirective,
|
|
1457
|
-
RouterLinkDirective,
|
|
1458
|
-
GenericLinkDirective,
|
|
1459
|
-
DateDirective,
|
|
1460
|
-
RenderEachDirective,
|
|
1461
|
-
RenderEmptyDirective,
|
|
1462
|
-
PlaceholderLoadingDirective,
|
|
1463
|
-
RenderComponentComponent,
|
|
1464
|
-
PlaceholderComponent,
|
|
1465
|
-
RawComponent,
|
|
1466
|
-
RichTextDirective,
|
|
1467
|
-
TextDirective,
|
|
1468
|
-
MissingComponentComponent,
|
|
1469
|
-
HiddenRenderingComponent,
|
|
1470
|
-
EditFrameComponent], imports: [CommonModule], exports: [FileDirective,
|
|
1471
|
-
ImageDirective,
|
|
1472
|
-
DateDirective,
|
|
1473
|
-
LinkDirective,
|
|
1474
|
-
RouterLinkDirective,
|
|
1475
|
-
GenericLinkDirective,
|
|
1476
|
-
RenderEachDirective,
|
|
1477
|
-
RenderEmptyDirective,
|
|
1478
|
-
RenderComponentComponent,
|
|
1479
|
-
PlaceholderComponent,
|
|
1480
|
-
HiddenRenderingComponent,
|
|
1481
|
-
PlaceholderLoadingDirective,
|
|
1482
|
-
RichTextDirective,
|
|
1483
|
-
TextDirective,
|
|
1484
|
-
EditFrameComponent] });
|
|
1485
|
-
JssModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssModule, imports: [CommonModule] });
|
|
1486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssModule, decorators: [{
|
|
1487
|
-
type: NgModule,
|
|
1488
|
-
args: [{
|
|
1489
|
-
imports: [CommonModule],
|
|
1490
|
-
declarations: [
|
|
1491
|
-
FileDirective,
|
|
1492
|
-
ImageDirective,
|
|
1493
|
-
LinkDirective,
|
|
1494
|
-
RouterLinkDirective,
|
|
1495
|
-
GenericLinkDirective,
|
|
1496
|
-
DateDirective,
|
|
1497
|
-
RenderEachDirective,
|
|
1498
|
-
RenderEmptyDirective,
|
|
1499
|
-
PlaceholderLoadingDirective,
|
|
1500
|
-
RenderComponentComponent,
|
|
1501
|
-
PlaceholderComponent,
|
|
1502
|
-
RawComponent,
|
|
1503
|
-
RichTextDirective,
|
|
1504
|
-
TextDirective,
|
|
1505
|
-
MissingComponentComponent,
|
|
1506
|
-
HiddenRenderingComponent,
|
|
1507
|
-
EditFrameComponent,
|
|
1508
|
-
],
|
|
1509
|
-
exports: [
|
|
1510
|
-
FileDirective,
|
|
1511
|
-
ImageDirective,
|
|
1512
|
-
DateDirective,
|
|
1513
|
-
LinkDirective,
|
|
1514
|
-
RouterLinkDirective,
|
|
1515
|
-
GenericLinkDirective,
|
|
1516
|
-
RenderEachDirective,
|
|
1517
|
-
RenderEmptyDirective,
|
|
1518
|
-
RenderComponentComponent,
|
|
1519
|
-
PlaceholderComponent,
|
|
1520
|
-
HiddenRenderingComponent,
|
|
1521
|
-
PlaceholderLoadingDirective,
|
|
1522
|
-
RichTextDirective,
|
|
1523
|
-
TextDirective,
|
|
1524
|
-
EditFrameComponent,
|
|
1525
|
-
],
|
|
1526
|
-
entryComponents: [RawComponent, MissingComponentComponent],
|
|
1527
|
-
}]
|
|
1391
|
+
class JssModule {
|
|
1392
|
+
/**
|
|
1393
|
+
* Instantiates the JSS module with no component factory.
|
|
1394
|
+
* Useful for using it from libraries. Most of the time you'd want withComponents()
|
|
1395
|
+
* @returns {ModuleWithProviders<JssModule>} module
|
|
1396
|
+
*/
|
|
1397
|
+
static forRoot() {
|
|
1398
|
+
return {
|
|
1399
|
+
ngModule: JssModule,
|
|
1400
|
+
providers: [
|
|
1401
|
+
DatePipe,
|
|
1402
|
+
JssComponentFactoryService,
|
|
1403
|
+
{
|
|
1404
|
+
provide: GUARD_RESOLVER,
|
|
1405
|
+
useFactory: guardResolverFactory,
|
|
1406
|
+
deps: [Injector, ActivatedRoute, Router],
|
|
1407
|
+
},
|
|
1408
|
+
{
|
|
1409
|
+
provide: DATA_RESOLVER,
|
|
1410
|
+
useFactory: dataResolverFactory,
|
|
1411
|
+
deps: [Injector, ActivatedRoute, Router],
|
|
1412
|
+
},
|
|
1413
|
+
],
|
|
1414
|
+
};
|
|
1415
|
+
}
|
|
1416
|
+
/**
|
|
1417
|
+
* Instantiates a module for a lazy-loaded JSS component
|
|
1418
|
+
* @param {Type<unknown>} component
|
|
1419
|
+
* @returns {ModuleWithProviders<JssModule>} module
|
|
1420
|
+
*/
|
|
1421
|
+
static forChild(component) {
|
|
1422
|
+
return {
|
|
1423
|
+
ngModule: JssModule,
|
|
1424
|
+
providers: [
|
|
1425
|
+
{ provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
|
|
1426
|
+
{ provide: ROUTES, useValue: [], multi: true },
|
|
1427
|
+
{ provide: DYNAMIC_COMPONENT, useValue: component },
|
|
1428
|
+
],
|
|
1429
|
+
};
|
|
1430
|
+
}
|
|
1431
|
+
/**
|
|
1432
|
+
* Instantiates the JSS module and specifies the mapping from component name to component implementation.
|
|
1433
|
+
* Appropriate when defining the set of JSS components that your app is aware of.
|
|
1434
|
+
* @param {ComponentNameAndType[]} components
|
|
1435
|
+
* @param {ComponentNameAndModule[]} [lazyComponents]
|
|
1436
|
+
* @returns {ModuleWithProviders<JssModule>} module
|
|
1437
|
+
*/
|
|
1438
|
+
static withComponents(components, lazyComponents) {
|
|
1439
|
+
return {
|
|
1440
|
+
ngModule: JssModule,
|
|
1441
|
+
providers: [
|
|
1442
|
+
{
|
|
1443
|
+
provide: ANALYZE_FOR_ENTRY_COMPONENTS,
|
|
1444
|
+
useValue: components,
|
|
1445
|
+
multi: true,
|
|
1446
|
+
},
|
|
1447
|
+
{ provide: PLACEHOLDER_COMPONENTS, useValue: components },
|
|
1448
|
+
{ provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
|
|
1449
|
+
{ provide: ROUTES, useValue: lazyComponents || [], multi: true },
|
|
1450
|
+
{ provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent },
|
|
1451
|
+
{ provide: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT, useValue: HiddenRenderingComponent },
|
|
1452
|
+
...JssModule.forRoot().providers,
|
|
1453
|
+
],
|
|
1454
|
+
};
|
|
1455
|
+
}
|
|
1456
|
+
}
|
|
1457
|
+
JssModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1458
|
+
JssModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: JssModule, declarations: [FileDirective,
|
|
1459
|
+
ImageDirective,
|
|
1460
|
+
LinkDirective,
|
|
1461
|
+
RouterLinkDirective,
|
|
1462
|
+
GenericLinkDirective,
|
|
1463
|
+
DateDirective,
|
|
1464
|
+
RenderEachDirective,
|
|
1465
|
+
RenderEmptyDirective,
|
|
1466
|
+
PlaceholderLoadingDirective,
|
|
1467
|
+
RenderComponentComponent,
|
|
1468
|
+
PlaceholderComponent,
|
|
1469
|
+
RawComponent,
|
|
1470
|
+
RichTextDirective,
|
|
1471
|
+
TextDirective,
|
|
1472
|
+
MissingComponentComponent,
|
|
1473
|
+
HiddenRenderingComponent,
|
|
1474
|
+
EditFrameComponent], imports: [CommonModule], exports: [FileDirective,
|
|
1475
|
+
ImageDirective,
|
|
1476
|
+
DateDirective,
|
|
1477
|
+
LinkDirective,
|
|
1478
|
+
RouterLinkDirective,
|
|
1479
|
+
GenericLinkDirective,
|
|
1480
|
+
RenderEachDirective,
|
|
1481
|
+
RenderEmptyDirective,
|
|
1482
|
+
RenderComponentComponent,
|
|
1483
|
+
PlaceholderComponent,
|
|
1484
|
+
HiddenRenderingComponent,
|
|
1485
|
+
PlaceholderLoadingDirective,
|
|
1486
|
+
RichTextDirective,
|
|
1487
|
+
TextDirective,
|
|
1488
|
+
EditFrameComponent] });
|
|
1489
|
+
JssModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssModule, imports: [CommonModule] });
|
|
1490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: JssModule, decorators: [{
|
|
1491
|
+
type: NgModule,
|
|
1492
|
+
args: [{
|
|
1493
|
+
imports: [CommonModule],
|
|
1494
|
+
declarations: [
|
|
1495
|
+
FileDirective,
|
|
1496
|
+
ImageDirective,
|
|
1497
|
+
LinkDirective,
|
|
1498
|
+
RouterLinkDirective,
|
|
1499
|
+
GenericLinkDirective,
|
|
1500
|
+
DateDirective,
|
|
1501
|
+
RenderEachDirective,
|
|
1502
|
+
RenderEmptyDirective,
|
|
1503
|
+
PlaceholderLoadingDirective,
|
|
1504
|
+
RenderComponentComponent,
|
|
1505
|
+
PlaceholderComponent,
|
|
1506
|
+
RawComponent,
|
|
1507
|
+
RichTextDirective,
|
|
1508
|
+
TextDirective,
|
|
1509
|
+
MissingComponentComponent,
|
|
1510
|
+
HiddenRenderingComponent,
|
|
1511
|
+
EditFrameComponent,
|
|
1512
|
+
],
|
|
1513
|
+
exports: [
|
|
1514
|
+
FileDirective,
|
|
1515
|
+
ImageDirective,
|
|
1516
|
+
DateDirective,
|
|
1517
|
+
LinkDirective,
|
|
1518
|
+
RouterLinkDirective,
|
|
1519
|
+
GenericLinkDirective,
|
|
1520
|
+
RenderEachDirective,
|
|
1521
|
+
RenderEmptyDirective,
|
|
1522
|
+
RenderComponentComponent,
|
|
1523
|
+
PlaceholderComponent,
|
|
1524
|
+
HiddenRenderingComponent,
|
|
1525
|
+
PlaceholderLoadingDirective,
|
|
1526
|
+
RichTextDirective,
|
|
1527
|
+
TextDirective,
|
|
1528
|
+
EditFrameComponent,
|
|
1529
|
+
],
|
|
1530
|
+
entryComponents: [RawComponent, MissingComponentComponent],
|
|
1531
|
+
}]
|
|
1528
1532
|
}] });
|
|
1529
1533
|
|
|
1530
|
-
/**
|
|
1531
|
-
* Generated bundle index. Do not edit.
|
|
1534
|
+
/**
|
|
1535
|
+
* Generated bundle index. Do not edit.
|
|
1532
1536
|
*/
|
|
1533
1537
|
|
|
1534
1538
|
export { ComponentNameAndType, DYNAMIC_COMPONENT, DateDirective, EditFrameComponent, FileDirective, GenericLinkDirective, HiddenRenderingComponent, ImageDirective, JssModule, LinkDirective, PlaceholderComponent, PlaceholderLoadingDirective, RenderComponentComponent, RenderEachDirective, RenderEmptyDirective, RichTextDirective, RouterLinkDirective, TextDirective, isRawRendering };
|