@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.
Files changed (81) hide show
  1. package/.eslintrc.json +18 -0
  2. package/README.md +128 -78
  3. package/jest.config.ts +22 -0
  4. package/ng-package.json +7 -0
  5. package/package.json +4 -21
  6. package/project.json +33 -0
  7. package/{index.d.ts → src/index.ts} +0 -1
  8. package/src/lib/components/dot-editable-text/dot-editable-text.component.css +4 -0
  9. package/src/lib/components/dot-editable-text/dot-editable-text.component.html +8 -0
  10. package/src/lib/components/dot-editable-text/dot-editable-text.component.spec.ts +424 -0
  11. package/src/lib/components/dot-editable-text/dot-editable-text.component.ts +269 -0
  12. package/src/lib/components/dot-editable-text/utils.ts +51 -0
  13. package/src/lib/components/no-component/no-component.component.css +3 -0
  14. package/src/lib/components/no-component/no-component.component.spec.ts +24 -0
  15. package/src/lib/components/no-component/no-component.component.ts +31 -0
  16. package/src/lib/layout/column/column.component.css +99 -0
  17. package/src/lib/layout/column/column.component.spec.ts +33 -0
  18. package/src/lib/layout/column/column.component.ts +49 -0
  19. package/src/lib/layout/container/container.component.css +9 -0
  20. package/src/lib/layout/container/container.component.html +26 -0
  21. package/src/lib/layout/container/container.component.spec.ts +205 -0
  22. package/src/lib/layout/container/container.component.ts +140 -0
  23. package/src/lib/layout/contentlet/contentlet.component.spec.ts +22 -0
  24. package/src/lib/layout/contentlet/contentlet.component.ts +101 -0
  25. package/src/lib/layout/dotcms-layout/dotcms-layout.component.css +3 -0
  26. package/src/lib/layout/dotcms-layout/dotcms-layout.component.spec.ts +195 -0
  27. package/src/lib/layout/dotcms-layout/dotcms-layout.component.ts +150 -0
  28. package/src/lib/layout/row/row.component.css +6 -0
  29. package/src/lib/layout/row/row.component.spec.ts +28 -0
  30. package/src/lib/layout/row/row.component.ts +32 -0
  31. package/{lib/models/dotcms.model.d.ts → src/lib/models/dotcms.model.ts} +21 -3
  32. package/src/lib/models/index.ts +47 -0
  33. package/{lib/services/dotcms-context/page-context.service.d.ts → src/lib/services/dotcms-context/page-context.service.ts} +41 -12
  34. package/src/lib/services/dotcms-context/page-context.spec.ts +80 -0
  35. package/src/lib/utils/index.ts +92 -0
  36. package/src/lib/utils/testing.utils.ts +1019 -0
  37. package/src/test-setup.ts +8 -0
  38. package/tsconfig.json +29 -0
  39. package/tsconfig.lib.json +12 -0
  40. package/tsconfig.lib.prod.json +9 -0
  41. package/tsconfig.spec.json +11 -0
  42. package/dotcms-angular.d.ts.map +0 -1
  43. package/esm2022/dotcms-angular.mjs +0 -5
  44. package/esm2022/index.mjs +0 -5
  45. package/esm2022/lib/components/dot-editable-text/dot-editable-text.component.mjs +0 -225
  46. package/esm2022/lib/components/dot-editable-text/utils.mjs +0 -43
  47. package/esm2022/lib/components/no-component/no-component.component.mjs +0 -27
  48. package/esm2022/lib/layout/column/column.component.mjs +0 -33
  49. package/esm2022/lib/layout/container/container.component.mjs +0 -78
  50. package/esm2022/lib/layout/contentlet/contentlet.component.mjs +0 -65
  51. package/esm2022/lib/layout/dotcms-layout/dotcms-layout.component.mjs +0 -87
  52. package/esm2022/lib/layout/row/row.component.mjs +0 -23
  53. package/esm2022/lib/models/dotcms.model.mjs +0 -3
  54. package/esm2022/lib/models/index.mjs +0 -3
  55. package/esm2022/lib/services/dotcms-context/page-context.service.mjs +0 -75
  56. package/esm2022/lib/utils/index.mjs +0 -57
  57. package/fesm2022/dotcms-angular.mjs +0 -697
  58. package/fesm2022/dotcms-angular.mjs.map +0 -1
  59. package/index.d.ts.map +0 -1
  60. package/lib/components/dot-editable-text/dot-editable-text.component.d.ts +0 -129
  61. package/lib/components/dot-editable-text/dot-editable-text.component.d.ts.map +0 -1
  62. package/lib/components/dot-editable-text/utils.d.ts +0 -7
  63. package/lib/components/dot-editable-text/utils.d.ts.map +0 -1
  64. package/lib/components/no-component/no-component.component.d.ts +0 -13
  65. package/lib/components/no-component/no-component.component.d.ts.map +0 -1
  66. package/lib/layout/column/column.component.d.ts +0 -11
  67. package/lib/layout/column/column.component.d.ts.map +0 -1
  68. package/lib/layout/container/container.component.d.ts +0 -34
  69. package/lib/layout/container/container.component.d.ts.map +0 -1
  70. package/lib/layout/contentlet/contentlet.component.d.ts +0 -19
  71. package/lib/layout/contentlet/contentlet.component.d.ts.map +0 -1
  72. package/lib/layout/dotcms-layout/dotcms-layout.component.d.ts +0 -54
  73. package/lib/layout/dotcms-layout/dotcms-layout.component.d.ts.map +0 -1
  74. package/lib/layout/row/row.component.d.ts +0 -8
  75. package/lib/layout/row/row.component.d.ts.map +0 -1
  76. package/lib/models/dotcms.model.d.ts.map +0 -1
  77. package/lib/models/index.d.ts +0 -11
  78. package/lib/models/index.d.ts.map +0 -1
  79. package/lib/services/dotcms-context/page-context.service.d.ts.map +0 -1
  80. package/lib/utils/index.d.ts +0 -49
  81. 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