@dotcms/angular 0.0.1-alpha.37 → 0.0.1-alpha.39
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/.eslintrc.json +18 -0
- package/README.md +128 -78
- package/jest.config.ts +22 -0
- package/ng-package.json +7 -0
- package/package.json +4 -21
- package/project.json +33 -0
- package/{index.d.ts → src/index.ts} +0 -1
- package/src/lib/components/dot-editable-text/dot-editable-text.component.css +4 -0
- package/src/lib/components/dot-editable-text/dot-editable-text.component.html +8 -0
- package/src/lib/components/dot-editable-text/dot-editable-text.component.spec.ts +424 -0
- package/src/lib/components/dot-editable-text/dot-editable-text.component.ts +269 -0
- package/src/lib/components/dot-editable-text/utils.ts +51 -0
- package/src/lib/components/no-component/no-component.component.css +3 -0
- package/src/lib/components/no-component/no-component.component.spec.ts +24 -0
- package/src/lib/components/no-component/no-component.component.ts +31 -0
- package/src/lib/layout/column/column.component.css +99 -0
- package/src/lib/layout/column/column.component.spec.ts +33 -0
- package/src/lib/layout/column/column.component.ts +49 -0
- package/src/lib/layout/container/container.component.css +9 -0
- package/src/lib/layout/container/container.component.html +26 -0
- package/src/lib/layout/container/container.component.spec.ts +205 -0
- package/src/lib/layout/container/container.component.ts +140 -0
- package/src/lib/layout/contentlet/contentlet.component.spec.ts +22 -0
- package/src/lib/layout/contentlet/contentlet.component.ts +101 -0
- package/src/lib/layout/dotcms-layout/dotcms-layout.component.css +3 -0
- package/src/lib/layout/dotcms-layout/dotcms-layout.component.spec.ts +195 -0
- package/src/lib/layout/dotcms-layout/dotcms-layout.component.ts +150 -0
- package/src/lib/layout/row/row.component.css +6 -0
- package/src/lib/layout/row/row.component.spec.ts +28 -0
- package/src/lib/layout/row/row.component.ts +32 -0
- package/{lib/models/dotcms.model.d.ts → src/lib/models/dotcms.model.ts} +21 -3
- package/src/lib/models/index.ts +47 -0
- package/{lib/services/dotcms-context/page-context.service.d.ts → src/lib/services/dotcms-context/page-context.service.ts} +41 -12
- package/src/lib/services/dotcms-context/page-context.spec.ts +80 -0
- package/src/lib/utils/index.ts +92 -0
- package/src/lib/utils/testing.utils.ts +1019 -0
- package/src/test-setup.ts +8 -0
- package/tsconfig.json +29 -0
- package/tsconfig.lib.json +12 -0
- package/tsconfig.lib.prod.json +9 -0
- package/tsconfig.spec.json +11 -0
- package/dotcms-angular.d.ts.map +0 -1
- package/esm2022/dotcms-angular.mjs +0 -5
- package/esm2022/index.mjs +0 -5
- package/esm2022/lib/components/dot-editable-text/dot-editable-text.component.mjs +0 -225
- package/esm2022/lib/components/dot-editable-text/utils.mjs +0 -43
- package/esm2022/lib/components/no-component/no-component.component.mjs +0 -27
- package/esm2022/lib/layout/column/column.component.mjs +0 -33
- package/esm2022/lib/layout/container/container.component.mjs +0 -78
- package/esm2022/lib/layout/contentlet/contentlet.component.mjs +0 -65
- package/esm2022/lib/layout/dotcms-layout/dotcms-layout.component.mjs +0 -87
- package/esm2022/lib/layout/row/row.component.mjs +0 -23
- package/esm2022/lib/models/dotcms.model.mjs +0 -3
- package/esm2022/lib/models/index.mjs +0 -3
- package/esm2022/lib/services/dotcms-context/page-context.service.mjs +0 -75
- package/esm2022/lib/utils/index.mjs +0 -57
- package/fesm2022/dotcms-angular.mjs +0 -697
- package/fesm2022/dotcms-angular.mjs.map +0 -1
- package/index.d.ts.map +0 -1
- package/lib/components/dot-editable-text/dot-editable-text.component.d.ts +0 -129
- package/lib/components/dot-editable-text/dot-editable-text.component.d.ts.map +0 -1
- package/lib/components/dot-editable-text/utils.d.ts +0 -7
- package/lib/components/dot-editable-text/utils.d.ts.map +0 -1
- package/lib/components/no-component/no-component.component.d.ts +0 -13
- package/lib/components/no-component/no-component.component.d.ts.map +0 -1
- package/lib/layout/column/column.component.d.ts +0 -11
- package/lib/layout/column/column.component.d.ts.map +0 -1
- package/lib/layout/container/container.component.d.ts +0 -34
- package/lib/layout/container/container.component.d.ts.map +0 -1
- package/lib/layout/contentlet/contentlet.component.d.ts +0 -19
- package/lib/layout/contentlet/contentlet.component.d.ts.map +0 -1
- package/lib/layout/dotcms-layout/dotcms-layout.component.d.ts +0 -54
- package/lib/layout/dotcms-layout/dotcms-layout.component.d.ts.map +0 -1
- package/lib/layout/row/row.component.d.ts +0 -8
- package/lib/layout/row/row.component.d.ts.map +0 -1
- package/lib/models/dotcms.model.d.ts.map +0 -1
- package/lib/models/index.d.ts +0 -11
- package/lib/models/index.d.ts.map +0 -1
- package/lib/services/dotcms-context/page-context.service.d.ts.map +0 -1
- package/lib/utils/index.d.ts +0 -49
- package/lib/utils/index.d.ts.map +0 -1
|
@@ -1,697 +0,0 @@
|
|
|
1
|
-
import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
|
|
2
|
-
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, Renderer2, ElementRef, SecurityContext, Component, ViewChild, Input, HostListener, Injectable, ChangeDetectionStrategy, HostBinding, signal, computed, DestroyRef } from '@angular/core';
|
|
4
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
|
-
import { isInsideEditor, DotCmsClient, postMessageToEditor, CUSTOMER_ACTIONS, initEditor, updateNavigation } from '@dotcms/client';
|
|
6
|
-
import { AsyncPipe, NgComponentOutlet } from '@angular/common';
|
|
7
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
|
-
import { ActivatedRoute } from '@angular/router';
|
|
9
|
-
import { BehaviorSubject } from 'rxjs';
|
|
10
|
-
import { map } from 'rxjs/operators';
|
|
11
|
-
|
|
12
|
-
const DEFAULT_TINYMCE_CONFIG = {
|
|
13
|
-
menubar: false,
|
|
14
|
-
inline: true,
|
|
15
|
-
valid_styles: {
|
|
16
|
-
'*': 'font-size,font-family,color,text-decoration,text-align'
|
|
17
|
-
},
|
|
18
|
-
powerpaste_word_import: 'clean',
|
|
19
|
-
powerpaste_html_import: 'clean',
|
|
20
|
-
suffix: '.min', // Suffix to use when loading resources
|
|
21
|
-
license_key: 'gpl'
|
|
22
|
-
};
|
|
23
|
-
const TINYMCE_CONFIG = {
|
|
24
|
-
minimal: {
|
|
25
|
-
...DEFAULT_TINYMCE_CONFIG,
|
|
26
|
-
plugins: 'link autolink',
|
|
27
|
-
toolbar: 'bold italic underline | link',
|
|
28
|
-
valid_elements: 'strong,em,span[style],a[href]'
|
|
29
|
-
},
|
|
30
|
-
full: {
|
|
31
|
-
...DEFAULT_TINYMCE_CONFIG,
|
|
32
|
-
plugins: 'link lists autolink charmap',
|
|
33
|
-
style_formats: [
|
|
34
|
-
{ title: 'Paragraph', format: 'p' },
|
|
35
|
-
{ title: 'Header 1', format: 'h1' },
|
|
36
|
-
{ title: 'Header 2', format: 'h2' },
|
|
37
|
-
{ title: 'Header 3', format: 'h3' },
|
|
38
|
-
{ title: 'Header 4', format: 'h4' },
|
|
39
|
-
{ title: 'Header 5', format: 'h5' },
|
|
40
|
-
{ title: 'Header 6', format: 'h6' },
|
|
41
|
-
{ title: 'Pre', format: 'pre' },
|
|
42
|
-
{ title: 'Code', format: 'code' }
|
|
43
|
-
],
|
|
44
|
-
toolbar: [
|
|
45
|
-
'styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'
|
|
46
|
-
]
|
|
47
|
-
},
|
|
48
|
-
plain: {
|
|
49
|
-
...DEFAULT_TINYMCE_CONFIG,
|
|
50
|
-
plugins: '',
|
|
51
|
-
toolbar: ''
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Dot editable text component.
|
|
57
|
-
* This component is responsible to render a text field that can be edited inline.
|
|
58
|
-
*
|
|
59
|
-
* @export
|
|
60
|
-
* @class DotEditableTextComponent
|
|
61
|
-
* @implements {OnInit}
|
|
62
|
-
* @implements {OnChanges}
|
|
63
|
-
*/
|
|
64
|
-
class DotEditableTextComponent {
|
|
65
|
-
constructor() {
|
|
66
|
-
/**
|
|
67
|
-
* Represents the mode of the editor which can be `plain`, `minimal`, or `full`
|
|
68
|
-
*
|
|
69
|
-
* @type {DOT_EDITABLE_TEXT_MODE}
|
|
70
|
-
* @memberof DotEditableTextComponent
|
|
71
|
-
*/
|
|
72
|
-
this.mode = 'plain';
|
|
73
|
-
/**
|
|
74
|
-
* Represents the format of the editor which can be `text` or `html`
|
|
75
|
-
*
|
|
76
|
-
* @type {DOT_EDITABLE_TEXT_FORMAT}
|
|
77
|
-
* @memberof DotEditableTextComponent
|
|
78
|
-
*/
|
|
79
|
-
this.format = 'text';
|
|
80
|
-
/**
|
|
81
|
-
* Represents the field name of the `contentlet` that can be edited
|
|
82
|
-
*
|
|
83
|
-
* @memberof DotEditableTextComponent
|
|
84
|
-
*/
|
|
85
|
-
this.fieldName = '';
|
|
86
|
-
/**
|
|
87
|
-
* Represents the content of the `contentlet` that can be edited
|
|
88
|
-
*
|
|
89
|
-
* @protected
|
|
90
|
-
* @memberof DotEditableTextComponent
|
|
91
|
-
*/
|
|
92
|
-
this.content = '';
|
|
93
|
-
this.#sanitizer = inject(DomSanitizer);
|
|
94
|
-
this.#renderer = inject(Renderer2);
|
|
95
|
-
this.#elementRef = inject(ElementRef);
|
|
96
|
-
}
|
|
97
|
-
#sanitizer;
|
|
98
|
-
#renderer;
|
|
99
|
-
#elementRef;
|
|
100
|
-
/**
|
|
101
|
-
* The TinyMCE editor
|
|
102
|
-
*
|
|
103
|
-
* @readonly
|
|
104
|
-
* @memberof DotEditableTextComponent
|
|
105
|
-
*/
|
|
106
|
-
get editor() {
|
|
107
|
-
return this.editorComponent?.editor;
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Returns the number of pages the contentlet is on
|
|
111
|
-
*
|
|
112
|
-
* @readonly
|
|
113
|
-
* @memberof DotEditableTextComponent
|
|
114
|
-
*/
|
|
115
|
-
get onNumberOfPages() {
|
|
116
|
-
return this.contentlet['onNumberOfPages'] || 1;
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* Handle copy contentlet inline editing success event
|
|
120
|
-
*
|
|
121
|
-
* @param {MessageEvent} { data }
|
|
122
|
-
* @return {*}
|
|
123
|
-
* @memberof DotEditableTextComponent
|
|
124
|
-
*/
|
|
125
|
-
onMessage({ data }) {
|
|
126
|
-
const { name, payload } = data;
|
|
127
|
-
if (name !== 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS') {
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
const { oldInode, inode } = payload;
|
|
131
|
-
const currentInode = this.contentlet.inode;
|
|
132
|
-
if (currentInode === oldInode || currentInode === inode) {
|
|
133
|
-
this.editorComponent.editor.focus();
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
ngOnInit() {
|
|
138
|
-
this.isInsideEditor = isInsideEditor();
|
|
139
|
-
if (!this.isInsideEditor) {
|
|
140
|
-
this.innerHTMLToElement();
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
this.init = {
|
|
144
|
-
...TINYMCE_CONFIG[this.mode],
|
|
145
|
-
base_url: `${DotCmsClient.dotcmsUrl}/ext/tinymcev7`
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
ngOnChanges() {
|
|
149
|
-
this.content = this.contentlet[this.fieldName] || '';
|
|
150
|
-
if (this.editor) {
|
|
151
|
-
this.editor.setContent(this.content, { format: this.format });
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
/**
|
|
155
|
-
* Handle mouse down event
|
|
156
|
-
*
|
|
157
|
-
* @param {EventObj<MouseEvent>} { event }
|
|
158
|
-
* @return {*}
|
|
159
|
-
* @memberof DotEditableTextComponent
|
|
160
|
-
*/
|
|
161
|
-
onMouseDown({ event }) {
|
|
162
|
-
if (this.onNumberOfPages <= 1 || this.editorComponent.editor.hasFocus()) {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
const { inode, languageId: language } = this.contentlet;
|
|
166
|
-
event.stopPropagation();
|
|
167
|
-
event.preventDefault();
|
|
168
|
-
try {
|
|
169
|
-
postMessageToEditor({
|
|
170
|
-
action: CUSTOMER_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
|
|
171
|
-
payload: {
|
|
172
|
-
dataset: {
|
|
173
|
-
inode,
|
|
174
|
-
language,
|
|
175
|
-
fieldName: this.fieldName
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
catch (error) {
|
|
181
|
-
console.error('Failed to post message to editor:', error);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
/**
|
|
185
|
-
* Handle focus out event
|
|
186
|
-
*
|
|
187
|
-
* @return {*}
|
|
188
|
-
* @memberof DotEditableTextComponent
|
|
189
|
-
*/
|
|
190
|
-
onFocusOut() {
|
|
191
|
-
const content = this.editor.getContent({ format: this.format });
|
|
192
|
-
if (!this.editor.isDirty() || !this.didContentChange(content)) {
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
|
-
const { inode, languageId: langId } = this.contentlet;
|
|
196
|
-
try {
|
|
197
|
-
postMessageToEditor({
|
|
198
|
-
action: CUSTOMER_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,
|
|
199
|
-
payload: {
|
|
200
|
-
content,
|
|
201
|
-
dataset: {
|
|
202
|
-
inode,
|
|
203
|
-
langId,
|
|
204
|
-
fieldName: this.fieldName
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
catch (error) {
|
|
210
|
-
console.error('Failed to post message to editor:', error);
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
/**
|
|
214
|
-
* inner HTML to element
|
|
215
|
-
*
|
|
216
|
-
* @private
|
|
217
|
-
* @param {string} editedContent
|
|
218
|
-
* @return {*}
|
|
219
|
-
* @memberof DotEditableTextComponent
|
|
220
|
-
*/
|
|
221
|
-
innerHTMLToElement() {
|
|
222
|
-
const element = this.#elementRef.nativeElement;
|
|
223
|
-
const safeHtml = this.#sanitizer.bypassSecurityTrustHtml(this.content);
|
|
224
|
-
const content = this.#sanitizer.sanitize(SecurityContext.HTML, safeHtml) || '';
|
|
225
|
-
this.#renderer.setProperty(element, 'innerHTML', content);
|
|
226
|
-
}
|
|
227
|
-
/**
|
|
228
|
-
* Check if the content has changed
|
|
229
|
-
*
|
|
230
|
-
* @private
|
|
231
|
-
* @param {string} editedContent
|
|
232
|
-
* @return {*}
|
|
233
|
-
* @memberof DotEditableTextComponent
|
|
234
|
-
*/
|
|
235
|
-
didContentChange(editedContent) {
|
|
236
|
-
return this.content !== editedContent;
|
|
237
|
-
}
|
|
238
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: DotEditableTextComponent, isStandalone: true, selector: "dot-editable-text", inputs: { mode: "mode", format: "format", contentlet: "contentlet", fieldName: "fieldName" }, host: { listeners: { "window:message": "onMessage($event)" } }, providers: [
|
|
240
|
-
{
|
|
241
|
-
provide: TINYMCE_SCRIPT_SRC,
|
|
242
|
-
useFactory: () => {
|
|
243
|
-
return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isInsideEditor) {\n <editor\n #tinyEditor\n [init]=\"init\"\n [initialValue]=\"content\"\n (onMouseDown)=\"onMouseDown($event)\"\n (onFocusOut)=\"onFocusOut()\" />\n}\n", styles: [":host ::ng-deep .mce-content-body:not(.mce-edit-focus):hover{outline:2px solid #006ce7;border-radius:4px}\n"], dependencies: [{ kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }] }); }
|
|
247
|
-
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotEditableTextComponent, decorators: [{
|
|
249
|
-
type: Component,
|
|
250
|
-
args: [{ selector: 'dot-editable-text', standalone: true, imports: [EditorComponent], providers: [
|
|
251
|
-
{
|
|
252
|
-
provide: TINYMCE_SCRIPT_SRC,
|
|
253
|
-
useFactory: () => {
|
|
254
|
-
return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
], template: "@if (isInsideEditor) {\n <editor\n #tinyEditor\n [init]=\"init\"\n [initialValue]=\"content\"\n (onMouseDown)=\"onMouseDown($event)\"\n (onFocusOut)=\"onFocusOut()\" />\n}\n", styles: [":host ::ng-deep .mce-content-body:not(.mce-edit-focus):hover{outline:2px solid #006ce7;border-radius:4px}\n"] }]
|
|
258
|
-
}], propDecorators: { editorComponent: [{
|
|
259
|
-
type: ViewChild,
|
|
260
|
-
args: [EditorComponent]
|
|
261
|
-
}], mode: [{
|
|
262
|
-
type: Input
|
|
263
|
-
}], format: [{
|
|
264
|
-
type: Input
|
|
265
|
-
}], contentlet: [{
|
|
266
|
-
type: Input
|
|
267
|
-
}], fieldName: [{
|
|
268
|
-
type: Input
|
|
269
|
-
}], onMessage: [{
|
|
270
|
-
type: HostListener,
|
|
271
|
-
args: ['window:message', ['$event']]
|
|
272
|
-
}] } });
|
|
273
|
-
|
|
274
|
-
/**
|
|
275
|
-
* @author dotCMS
|
|
276
|
-
* @description This service is responsible for managing the page context.
|
|
277
|
-
* @export
|
|
278
|
-
* @class PageContextService
|
|
279
|
-
*/
|
|
280
|
-
class PageContextService {
|
|
281
|
-
constructor() {
|
|
282
|
-
this.context$ = new BehaviorSubject(null);
|
|
283
|
-
}
|
|
284
|
-
/**
|
|
285
|
-
* @description Get the context
|
|
286
|
-
* @readonly
|
|
287
|
-
* @type {DotCMSPageContext}
|
|
288
|
-
* @memberof PageContextService
|
|
289
|
-
*/
|
|
290
|
-
get context() {
|
|
291
|
-
return this.context$.getValue();
|
|
292
|
-
}
|
|
293
|
-
/**
|
|
294
|
-
* @description Get the context as an observable
|
|
295
|
-
* @readonly
|
|
296
|
-
* @memberof PageContextService
|
|
297
|
-
*/
|
|
298
|
-
get contextObs$() {
|
|
299
|
-
return this.context$.asObservable();
|
|
300
|
-
}
|
|
301
|
-
/**
|
|
302
|
-
* @description Get the current page asset
|
|
303
|
-
* @readonly
|
|
304
|
-
* @type {(Observable<DotCMSPageAsset | null>)}
|
|
305
|
-
* @memberof PageContextService
|
|
306
|
-
*/
|
|
307
|
-
get currentPage$() {
|
|
308
|
-
return this.contextObs$.pipe(map((context) => context?.pageAsset || null));
|
|
309
|
-
}
|
|
310
|
-
/**
|
|
311
|
-
*
|
|
312
|
-
* @description Set the context
|
|
313
|
-
* @param {DotCMSPageAsset} value
|
|
314
|
-
* @memberof DotcmsContextService
|
|
315
|
-
*/
|
|
316
|
-
setContext(pageAsset, components) {
|
|
317
|
-
this.context$.next({
|
|
318
|
-
pageAsset,
|
|
319
|
-
components,
|
|
320
|
-
isInsideEditor: isInsideEditor()
|
|
321
|
-
});
|
|
322
|
-
}
|
|
323
|
-
/**
|
|
324
|
-
* @description Set the page asset in the context
|
|
325
|
-
* @param {DotCMSPageAsset} pageAsset
|
|
326
|
-
* @memberof PageContextService
|
|
327
|
-
*/
|
|
328
|
-
setPageAsset(pageAsset) {
|
|
329
|
-
this.context$.next({
|
|
330
|
-
...this.context,
|
|
331
|
-
pageAsset
|
|
332
|
-
});
|
|
333
|
-
}
|
|
334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: PageContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
335
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: PageContextService, providedIn: 'root' }); }
|
|
336
|
-
}
|
|
337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: PageContextService, decorators: [{
|
|
338
|
-
type: Injectable,
|
|
339
|
-
args: [{
|
|
340
|
-
providedIn: 'root'
|
|
341
|
-
}]
|
|
342
|
-
}] });
|
|
343
|
-
|
|
344
|
-
//Changed the type, to avoid SQ issue.
|
|
345
|
-
//This should be put inside a lib
|
|
346
|
-
const endClassMap = {
|
|
347
|
-
1: 'col-end-1',
|
|
348
|
-
2: 'col-end-2',
|
|
349
|
-
3: 'col-end-3',
|
|
350
|
-
4: 'col-end-4',
|
|
351
|
-
5: 'col-end-5',
|
|
352
|
-
6: 'col-end-6',
|
|
353
|
-
7: 'col-end-7',
|
|
354
|
-
8: 'col-end-8',
|
|
355
|
-
9: 'col-end-9',
|
|
356
|
-
10: 'col-end-10',
|
|
357
|
-
11: 'col-end-11',
|
|
358
|
-
12: 'col-end-12',
|
|
359
|
-
13: 'col-end-13'
|
|
360
|
-
};
|
|
361
|
-
//Changed the type, to avoid SQ issue.
|
|
362
|
-
//This should be put inside a lib
|
|
363
|
-
const startClassMap = {
|
|
364
|
-
1: 'col-start-1',
|
|
365
|
-
2: 'col-start-2',
|
|
366
|
-
3: 'col-start-3',
|
|
367
|
-
4: 'col-start-4',
|
|
368
|
-
5: 'col-start-5',
|
|
369
|
-
6: 'col-start-6',
|
|
370
|
-
7: 'col-start-7',
|
|
371
|
-
8: 'col-start-8',
|
|
372
|
-
9: 'col-start-9',
|
|
373
|
-
10: 'col-start-10',
|
|
374
|
-
11: 'col-start-11',
|
|
375
|
-
12: 'col-start-12'
|
|
376
|
-
};
|
|
377
|
-
const getContainersData = (containers, containerRef) => {
|
|
378
|
-
const { identifier, uuid } = containerRef;
|
|
379
|
-
const { containerStructures, container } = containers[identifier];
|
|
380
|
-
const { variantId } = container?.parentPermissionable || {};
|
|
381
|
-
const acceptTypes = containerStructures
|
|
382
|
-
.map((structure) => structure.contentTypeVar)
|
|
383
|
-
.join(',');
|
|
384
|
-
const contentlets = containers[identifier].contentlets[`uuid-${uuid}`];
|
|
385
|
-
return {
|
|
386
|
-
...containers[identifier].container,
|
|
387
|
-
acceptTypes,
|
|
388
|
-
contentlets,
|
|
389
|
-
variantId
|
|
390
|
-
};
|
|
391
|
-
};
|
|
392
|
-
const getPositionStyleClasses = (start, end) => {
|
|
393
|
-
const startClass = startClassMap[start];
|
|
394
|
-
const endClass = endClassMap[end];
|
|
395
|
-
return {
|
|
396
|
-
startClass,
|
|
397
|
-
endClass
|
|
398
|
-
};
|
|
399
|
-
};
|
|
400
|
-
|
|
401
|
-
/**
|
|
402
|
-
* This is part of the Angular SDK.
|
|
403
|
-
* This is a component for the `NoComponentComponent` component.
|
|
404
|
-
*/
|
|
405
|
-
class NoComponent {
|
|
406
|
-
constructor() {
|
|
407
|
-
this.testId = 'no-component';
|
|
408
|
-
}
|
|
409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: NoComponent, isStandalone: true, selector: "dotcms-no-component", inputs: { contentlet: "contentlet" }, host: { properties: { "attr.data-testid": "this.testId" } }, ngImport: i0, template: `
|
|
411
|
-
No Component for {{ contentlet.contentType }}
|
|
412
|
-
`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
413
|
-
}
|
|
414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NoComponent, decorators: [{
|
|
415
|
-
type: Component,
|
|
416
|
-
args: [{ selector: 'dotcms-no-component', standalone: true, template: `
|
|
417
|
-
No Component for {{ contentlet.contentType }}
|
|
418
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
|
|
419
|
-
}], propDecorators: { contentlet: [{
|
|
420
|
-
type: Input
|
|
421
|
-
}], testId: [{
|
|
422
|
-
type: HostBinding,
|
|
423
|
-
args: ['attr.data-testid']
|
|
424
|
-
}] } });
|
|
425
|
-
|
|
426
|
-
class ContentletComponent {
|
|
427
|
-
constructor() {
|
|
428
|
-
this.identifier = null;
|
|
429
|
-
this.baseType = null;
|
|
430
|
-
this.title = null;
|
|
431
|
-
this.inode = null;
|
|
432
|
-
this.dotType = null;
|
|
433
|
-
this.dotContainer = null;
|
|
434
|
-
this.numberOfPages = null;
|
|
435
|
-
this.dotContent = null;
|
|
436
|
-
}
|
|
437
|
-
ngOnChanges() {
|
|
438
|
-
this.identifier = this.contentlet.identifier;
|
|
439
|
-
this.baseType = this.contentlet.baseType;
|
|
440
|
-
this.title = this.contentlet.title;
|
|
441
|
-
this.inode = this.contentlet.inode;
|
|
442
|
-
this.dotType = this.contentlet.contentType;
|
|
443
|
-
this.dotContainer = this.container;
|
|
444
|
-
this.numberOfPages = this.contentlet['onNumberOfPages'];
|
|
445
|
-
this.dotContent = 'contentlet';
|
|
446
|
-
}
|
|
447
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
448
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet-wrapper", inputs: { contentlet: "contentlet", container: "container" }, host: { properties: { "attr.data-dot-identifier": "this.identifier", "attr.data-dot-basetype": "this.baseType", "attr.data-dot-title": "this.title", "attr.data-dot-inode": "this.inode", "attr.data-dot-type": "this.dotType", "attr.data-dot-container": "this.dotContainer", "attr.data-dot-on-number-of-pages": "this.numberOfPages", "attr.data-dot-object": "this.dotContent" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
449
|
-
}
|
|
450
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContentletComponent, decorators: [{
|
|
451
|
-
type: Component,
|
|
452
|
-
args: [{
|
|
453
|
-
selector: 'dotcms-contentlet-wrapper',
|
|
454
|
-
standalone: true,
|
|
455
|
-
template: '<ng-content></ng-content>',
|
|
456
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
457
|
-
}]
|
|
458
|
-
}], propDecorators: { contentlet: [{
|
|
459
|
-
type: Input,
|
|
460
|
-
args: [{ required: true }]
|
|
461
|
-
}], container: [{
|
|
462
|
-
type: Input
|
|
463
|
-
}], identifier: [{
|
|
464
|
-
type: HostBinding,
|
|
465
|
-
args: ['attr.data-dot-identifier']
|
|
466
|
-
}], baseType: [{
|
|
467
|
-
type: HostBinding,
|
|
468
|
-
args: ['attr.data-dot-basetype']
|
|
469
|
-
}], title: [{
|
|
470
|
-
type: HostBinding,
|
|
471
|
-
args: ['attr.data-dot-title']
|
|
472
|
-
}], inode: [{
|
|
473
|
-
type: HostBinding,
|
|
474
|
-
args: ['attr.data-dot-inode']
|
|
475
|
-
}], dotType: [{
|
|
476
|
-
type: HostBinding,
|
|
477
|
-
args: ['attr.data-dot-type']
|
|
478
|
-
}], dotContainer: [{
|
|
479
|
-
type: HostBinding,
|
|
480
|
-
args: ['attr.data-dot-container']
|
|
481
|
-
}], numberOfPages: [{
|
|
482
|
-
type: HostBinding,
|
|
483
|
-
args: ['attr.data-dot-on-number-of-pages']
|
|
484
|
-
}], dotContent: [{
|
|
485
|
-
type: HostBinding,
|
|
486
|
-
args: ['attr.data-dot-object']
|
|
487
|
-
}] } });
|
|
488
|
-
|
|
489
|
-
class ContainerComponent {
|
|
490
|
-
constructor() {
|
|
491
|
-
this.pageContextService = inject(PageContextService);
|
|
492
|
-
this.NoComponent = NoComponent;
|
|
493
|
-
this.$isInsideEditor = signal(false);
|
|
494
|
-
this.$contentlets = signal([]);
|
|
495
|
-
this.$dotContainer = signal(null);
|
|
496
|
-
this.$dotContainerAsString = computed(() => JSON.stringify(this.$dotContainer()));
|
|
497
|
-
this.acceptTypes = null;
|
|
498
|
-
this.identifier = null;
|
|
499
|
-
this.maxContentlets = null;
|
|
500
|
-
this.uuid = null;
|
|
501
|
-
this.class = null;
|
|
502
|
-
this.dotObject = null;
|
|
503
|
-
this.testId = 'dot-container';
|
|
504
|
-
}
|
|
505
|
-
ngOnChanges() {
|
|
506
|
-
const { pageAsset, components, isInsideEditor } = this.pageContextService.context;
|
|
507
|
-
const { acceptTypes, maxContentlets, variantId, path, contentlets } = getContainersData(pageAsset.containers, this.container);
|
|
508
|
-
const { identifier, uuid } = this.container;
|
|
509
|
-
this.componentsMap = components;
|
|
510
|
-
this.$isInsideEditor.set(isInsideEditor);
|
|
511
|
-
this.$contentlets.set(contentlets);
|
|
512
|
-
this.$dotContainer.set({
|
|
513
|
-
identifier: path ?? identifier,
|
|
514
|
-
acceptTypes,
|
|
515
|
-
maxContentlets,
|
|
516
|
-
variantId,
|
|
517
|
-
uuid
|
|
518
|
-
});
|
|
519
|
-
if (this.$isInsideEditor()) {
|
|
520
|
-
this.acceptTypes = acceptTypes;
|
|
521
|
-
this.identifier = identifier;
|
|
522
|
-
this.maxContentlets = maxContentlets;
|
|
523
|
-
this.uuid = uuid;
|
|
524
|
-
this.class = this.$contentlets().length ? null : 'empty-container';
|
|
525
|
-
this.dotObject = 'container';
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: ContainerComponent, isStandalone: true, selector: "dotcms-container", inputs: { container: "container" }, host: { properties: { "attr.data-dot-accept-types": "this.acceptTypes", "attr.data-dot-identifier": "this.identifier", "attr.data-max-contentlets": "this.maxContentlets", "attr.data-dot-uuid": "this.uuid", "class": "this.class", "attr.data-dot-object": "this.dotObject", "attr.data-testid": "this.testId" } }, usesOnChanges: true, ngImport: i0, template: "@if ($isInsideEditor()) {\n @if ($contentlets().length) {\n @for (contentlet of $contentlets(); track $index) {\n <dotcms-contentlet-wrapper\n [contentlet]=\"contentlet\"\n [container]=\"$dotContainerAsString()\">\n <ng-container\n *ngComponentOutlet=\"\n (componentsMap[contentlet.contentType] || componentsMap['CustomNoComponent']\n | async) || NoComponent;\n inputs: { contentlet }\n \" />\n </dotcms-contentlet-wrapper>\n }\n } @else {\n This container is empty.\n }\n} @else {\n @for (contentlet of $contentlets(); track $index) {\n <ng-container\n *ngComponentOutlet=\"\n componentsMap[contentlet.contentType] | async;\n inputs: { contentlet }\n \" />\n }\n}\n", styles: [":host.empty-container{width:100%;background-color:#ecf0fd;display:flex;justify-content:center;align-items:center;color:#030e32;height:10rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ContentletComponent, selector: "dotcms-contentlet-wrapper", inputs: ["contentlet", "container"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
530
|
-
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
532
|
-
type: Component,
|
|
533
|
-
args: [{ selector: 'dotcms-container', standalone: true, imports: [AsyncPipe, NgComponentOutlet, NoComponent, ContentletComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ($isInsideEditor()) {\n @if ($contentlets().length) {\n @for (contentlet of $contentlets(); track $index) {\n <dotcms-contentlet-wrapper\n [contentlet]=\"contentlet\"\n [container]=\"$dotContainerAsString()\">\n <ng-container\n *ngComponentOutlet=\"\n (componentsMap[contentlet.contentType] || componentsMap['CustomNoComponent']\n | async) || NoComponent;\n inputs: { contentlet }\n \" />\n </dotcms-contentlet-wrapper>\n }\n } @else {\n This container is empty.\n }\n} @else {\n @for (contentlet of $contentlets(); track $index) {\n <ng-container\n *ngComponentOutlet=\"\n componentsMap[contentlet.contentType] | async;\n inputs: { contentlet }\n \" />\n }\n}\n", styles: [":host.empty-container{width:100%;background-color:#ecf0fd;display:flex;justify-content:center;align-items:center;color:#030e32;height:10rem}\n"] }]
|
|
534
|
-
}], propDecorators: { container: [{
|
|
535
|
-
type: Input,
|
|
536
|
-
args: [{ required: true }]
|
|
537
|
-
}], acceptTypes: [{
|
|
538
|
-
type: HostBinding,
|
|
539
|
-
args: ['attr.data-dot-accept-types']
|
|
540
|
-
}], identifier: [{
|
|
541
|
-
type: HostBinding,
|
|
542
|
-
args: ['attr.data-dot-identifier']
|
|
543
|
-
}], maxContentlets: [{
|
|
544
|
-
type: HostBinding,
|
|
545
|
-
args: ['attr.data-max-contentlets']
|
|
546
|
-
}], uuid: [{
|
|
547
|
-
type: HostBinding,
|
|
548
|
-
args: ['attr.data-dot-uuid']
|
|
549
|
-
}], class: [{
|
|
550
|
-
type: HostBinding,
|
|
551
|
-
args: ['class']
|
|
552
|
-
}], dotObject: [{
|
|
553
|
-
type: HostBinding,
|
|
554
|
-
args: ['attr.data-dot-object']
|
|
555
|
-
}], testId: [{
|
|
556
|
-
type: HostBinding,
|
|
557
|
-
args: ['attr.data-testid']
|
|
558
|
-
}] } });
|
|
559
|
-
|
|
560
|
-
class ColumnComponent {
|
|
561
|
-
constructor() {
|
|
562
|
-
this.containerClasses = '';
|
|
563
|
-
}
|
|
564
|
-
ngOnInit() {
|
|
565
|
-
const { startClass, endClass } = getPositionStyleClasses(this.column.leftOffset, this.column.width + this.column.leftOffset);
|
|
566
|
-
this.containerClasses = `${startClass} ${endClass}`;
|
|
567
|
-
}
|
|
568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.containerClasses" } }, ngImport: i0, template: `
|
|
570
|
-
@for (container of column.containers; track $index) {
|
|
571
|
-
<dotcms-container [container]="container" />
|
|
572
|
-
}
|
|
573
|
-
`, isInline: true, styles: [":host.col-start-1{grid-column-start:1}:host.col-start-2{grid-column-start:2}:host.col-start-3{grid-column-start:3}:host.col-start-4{grid-column-start:4}:host.col-start-5{grid-column-start:5}:host.col-start-6{grid-column-start:6}:host.col-start-7{grid-column-start:7}:host.col-start-8{grid-column-start:8}:host.col-start-9{grid-column-start:9}:host.col-start-10{grid-column-start:10}:host.col-start-11{grid-column-start:11}:host.col-start-12{grid-column-start:12}:host.col-end-1{grid-column-end:1}:host.col-end-2{grid-column-end:2}:host.col-end-3{grid-column-end:3}:host.col-end-4{grid-column-end:4}:host.col-end-5{grid-column-end:5}:host.col-end-6{grid-column-end:6}:host.col-end-7{grid-column-end:7}:host.col-end-8{grid-column-end:8}:host.col-end-9{grid-column-end:9}:host.col-end-10{grid-column-end:10}:host.col-end-11{grid-column-end:11}:host.col-end-12{grid-column-end:12}:host.col-end-13{grid-column-end:13}\n"], dependencies: [{ kind: "component", type: ContainerComponent, selector: "dotcms-container", inputs: ["container"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
574
|
-
}
|
|
575
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ColumnComponent, decorators: [{
|
|
576
|
-
type: Component,
|
|
577
|
-
args: [{ selector: 'dotcms-column', standalone: true, imports: [ContainerComponent], template: `
|
|
578
|
-
@for (container of column.containers; track $index) {
|
|
579
|
-
<dotcms-container [container]="container" />
|
|
580
|
-
}
|
|
581
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.col-start-1{grid-column-start:1}:host.col-start-2{grid-column-start:2}:host.col-start-3{grid-column-start:3}:host.col-start-4{grid-column-start:4}:host.col-start-5{grid-column-start:5}:host.col-start-6{grid-column-start:6}:host.col-start-7{grid-column-start:7}:host.col-start-8{grid-column-start:8}:host.col-start-9{grid-column-start:9}:host.col-start-10{grid-column-start:10}:host.col-start-11{grid-column-start:11}:host.col-start-12{grid-column-start:12}:host.col-end-1{grid-column-end:1}:host.col-end-2{grid-column-end:2}:host.col-end-3{grid-column-end:3}:host.col-end-4{grid-column-end:4}:host.col-end-5{grid-column-end:5}:host.col-end-6{grid-column-end:6}:host.col-end-7{grid-column-end:7}:host.col-end-8{grid-column-end:8}:host.col-end-9{grid-column-end:9}:host.col-end-10{grid-column-end:10}:host.col-end-11{grid-column-end:11}:host.col-end-12{grid-column-end:12}:host.col-end-13{grid-column-end:13}\n"] }]
|
|
582
|
-
}], propDecorators: { column: [{
|
|
583
|
-
type: Input
|
|
584
|
-
}], containerClasses: [{
|
|
585
|
-
type: HostBinding,
|
|
586
|
-
args: ['class']
|
|
587
|
-
}] } });
|
|
588
|
-
|
|
589
|
-
class RowComponent {
|
|
590
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row" }, ngImport: i0, template: `
|
|
592
|
-
@for (column of row.columns; track $index) {
|
|
593
|
-
<dotcms-column [column]="column" />
|
|
594
|
-
}
|
|
595
|
-
`, isInline: true, styles: [":host{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;row-gap:1rem}\n"], dependencies: [{ kind: "component", type: ColumnComponent, selector: "dotcms-column", inputs: ["column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
596
|
-
}
|
|
597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RowComponent, decorators: [{
|
|
598
|
-
type: Component,
|
|
599
|
-
args: [{ selector: 'dotcms-row', standalone: true, imports: [ColumnComponent], template: `
|
|
600
|
-
@for (column of row.columns; track $index) {
|
|
601
|
-
<dotcms-column [column]="column" />
|
|
602
|
-
}
|
|
603
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;row-gap:1rem}\n"] }]
|
|
604
|
-
}], propDecorators: { row: [{
|
|
605
|
-
type: Input,
|
|
606
|
-
args: [{ required: true }]
|
|
607
|
-
}] } });
|
|
608
|
-
|
|
609
|
-
/**
|
|
610
|
-
* `DotcmsLayoutComponent` is a class that represents the layout for a DotCMS page.
|
|
611
|
-
* It includes a `pageAsset` property that represents the DotCMS page asset and a `components` property that represents the dynamic components for the page.
|
|
612
|
-
*
|
|
613
|
-
* @export
|
|
614
|
-
* @class DotcmsLayoutComponent
|
|
615
|
-
*/
|
|
616
|
-
class DotcmsLayoutComponent {
|
|
617
|
-
constructor() {
|
|
618
|
-
this.route = inject(ActivatedRoute);
|
|
619
|
-
this.pageContextService = inject(PageContextService);
|
|
620
|
-
this.destroyRef$ = inject(DestroyRef);
|
|
621
|
-
this.pageAsset$ = this.pageContextService.currentPage$;
|
|
622
|
-
}
|
|
623
|
-
set pageAsset(value) {
|
|
624
|
-
this._pageAsset = value;
|
|
625
|
-
if (!value.layout) {
|
|
626
|
-
console.warn('Warning: pageAsset does not have a `layout` property. Might be using an advaced template or your dotCMS instance not have a enterprise license.');
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
get pageAsset() {
|
|
630
|
-
return this._pageAsset;
|
|
631
|
-
}
|
|
632
|
-
ngOnInit() {
|
|
633
|
-
this.pageContextService.setContext(this.pageAsset, this.components);
|
|
634
|
-
if (!isInsideEditor()) {
|
|
635
|
-
return;
|
|
636
|
-
}
|
|
637
|
-
this.client = DotCmsClient.instance;
|
|
638
|
-
this.route.url.pipe(takeUntilDestroyed(this.destroyRef$)).subscribe((urlSegments) => {
|
|
639
|
-
const pathname = '/' + urlSegments.join('/');
|
|
640
|
-
initEditor({ pathname });
|
|
641
|
-
updateNavigation(pathname || '/');
|
|
642
|
-
});
|
|
643
|
-
this.client.editor.on('changes', (data) => {
|
|
644
|
-
if (this.onReload) {
|
|
645
|
-
this.onReload();
|
|
646
|
-
return;
|
|
647
|
-
}
|
|
648
|
-
this.pageContextService.setPageAsset(data);
|
|
649
|
-
});
|
|
650
|
-
postMessageToEditor({ action: CUSTOMER_ACTIONS.CLIENT_READY, payload: this.editor });
|
|
651
|
-
}
|
|
652
|
-
ngOnDestroy() {
|
|
653
|
-
if (!isInsideEditor()) {
|
|
654
|
-
return;
|
|
655
|
-
}
|
|
656
|
-
this.client.editor.off('changes');
|
|
657
|
-
}
|
|
658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotcmsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: DotcmsLayoutComponent, isStandalone: true, selector: "dotcms-layout", inputs: { pageAsset: "pageAsset", components: "components", onReload: "onReload", editor: "editor" }, ngImport: i0, template: `
|
|
660
|
-
@if (pageAsset$ | async; as page) {
|
|
661
|
-
@for (row of this.page?.layout?.body?.rows; track $index) {
|
|
662
|
-
<dotcms-row [row]="row" />
|
|
663
|
-
}
|
|
664
|
-
}
|
|
665
|
-
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: RowComponent, selector: "dotcms-row", inputs: ["row"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
666
|
-
}
|
|
667
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotcmsLayoutComponent, decorators: [{
|
|
668
|
-
type: Component,
|
|
669
|
-
args: [{ selector: 'dotcms-layout', standalone: true, imports: [RowComponent, AsyncPipe], template: `
|
|
670
|
-
@if (pageAsset$ | async; as page) {
|
|
671
|
-
@for (row of this.page?.layout?.body?.rows; track $index) {
|
|
672
|
-
<dotcms-row [row]="row" />
|
|
673
|
-
}
|
|
674
|
-
}
|
|
675
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
|
|
676
|
-
}], propDecorators: { pageAsset: [{
|
|
677
|
-
type: Input,
|
|
678
|
-
args: [{ required: true }]
|
|
679
|
-
}], components: [{
|
|
680
|
-
type: Input,
|
|
681
|
-
args: [{ required: true }]
|
|
682
|
-
}], onReload: [{
|
|
683
|
-
type: Input
|
|
684
|
-
}], editor: [{
|
|
685
|
-
type: Input
|
|
686
|
-
}] } });
|
|
687
|
-
|
|
688
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
689
|
-
|
|
690
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
691
|
-
|
|
692
|
-
/**
|
|
693
|
-
* Generated bundle index. Do not edit.
|
|
694
|
-
*/
|
|
695
|
-
|
|
696
|
-
export { DotEditableTextComponent, DotcmsLayoutComponent, PageContextService };
|
|
697
|
-
//# sourceMappingURL=dotcms-angular.mjs.map
|