@dotcms/angular 0.0.1-beta.14 → 0.0.1-beta.16

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 (75) hide show
  1. package/esm2022/lib/deprecated/utils/image_loader.mjs +1 -2
  2. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/code.component.mjs +49 -0
  3. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/contentlet.component.mjs +53 -0
  4. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/image.component.mjs +25 -0
  5. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/list.component.mjs +66 -0
  6. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/table.component.mjs +97 -0
  7. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/text.component.mjs +231 -0
  8. package/esm2022/next/components/dotcms-block-editor-renderer/blocks/video.components.mjs +48 -0
  9. package/esm2022/next/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.mjs +46 -0
  10. package/esm2022/next/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.mjs +43 -0
  11. package/esm2022/next/components/dotcms-editable-text/dotcms-editable-text.component.mjs +1 -1
  12. package/esm2022/next/components/dotcms-layout-body/components/column/column.component.mjs +45 -0
  13. package/esm2022/next/components/dotcms-layout-body/components/container/components/container-not-found/container-not-found.component.mjs +52 -0
  14. package/esm2022/next/components/dotcms-layout-body/components/container/components/empty-container/empty-container.component.mjs +43 -0
  15. package/esm2022/next/components/dotcms-layout-body/components/container/container.component.mjs +99 -0
  16. package/esm2022/next/components/dotcms-layout-body/components/contentlet/contentlet.component.mjs +145 -0
  17. package/esm2022/next/components/dotcms-layout-body/components/fallback-component/fallback-component.component.mjs +47 -0
  18. package/esm2022/next/components/dotcms-layout-body/components/page-error-message/page-error-message.component.mjs +55 -0
  19. package/esm2022/next/components/dotcms-layout-body/components/row/row.component.mjs +46 -0
  20. package/esm2022/next/components/dotcms-layout-body/dotcms-layout-body.component.mjs +69 -0
  21. package/esm2022/next/models/index.mjs +2 -2
  22. package/esm2022/next/public_api.mjs +3 -1
  23. package/esm2022/next/store/dotcms.store.mjs +61 -0
  24. package/fesm2022/dotcms-angular-next.mjs +1250 -3
  25. package/fesm2022/dotcms-angular-next.mjs.map +1 -1
  26. package/fesm2022/dotcms-angular.mjs +0 -1
  27. package/fesm2022/dotcms-angular.mjs.map +1 -1
  28. package/next/components/dotcms-block-editor-renderer/blocks/code.component.d.ts +10 -0
  29. package/next/components/dotcms-block-editor-renderer/blocks/code.component.d.ts.map +1 -0
  30. package/next/components/dotcms-block-editor-renderer/blocks/contentlet.component.d.ts +25 -0
  31. package/next/components/dotcms-block-editor-renderer/blocks/contentlet.component.d.ts.map +1 -0
  32. package/next/components/dotcms-block-editor-renderer/blocks/image.component.d.ts +9 -0
  33. package/next/components/dotcms-block-editor-renderer/blocks/image.component.d.ts.map +1 -0
  34. package/next/components/dotcms-block-editor-renderer/blocks/list.component.d.ts +14 -0
  35. package/next/components/dotcms-block-editor-renderer/blocks/list.component.d.ts.map +1 -0
  36. package/next/components/dotcms-block-editor-renderer/blocks/table.component.d.ts +10 -0
  37. package/next/components/dotcms-block-editor-renderer/blocks/table.component.d.ts.map +1 -0
  38. package/next/components/dotcms-block-editor-renderer/blocks/text.component.d.ts +27 -0
  39. package/next/components/dotcms-block-editor-renderer/blocks/text.component.d.ts.map +1 -0
  40. package/next/components/dotcms-block-editor-renderer/blocks/video.components.d.ts +10 -0
  41. package/next/components/dotcms-block-editor-renderer/blocks/video.components.d.ts.map +1 -0
  42. package/next/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.d.ts +37 -0
  43. package/next/components/dotcms-block-editor-renderer/dotcms-block-editor-renderer.component.d.ts.map +1 -0
  44. package/next/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.d.ts +12 -0
  45. package/next/components/dotcms-block-editor-renderer/item/dotcms-block-editor-item.component.d.ts.map +1 -0
  46. package/next/components/dotcms-editable-text/dotcms-editable-text.component.d.ts +1 -1
  47. package/next/components/dotcms-editable-text/dotcms-editable-text.component.d.ts.map +1 -1
  48. package/next/components/dotcms-layout-body/components/column/column.component.d.ts +21 -0
  49. package/next/components/dotcms-layout-body/components/column/column.component.d.ts.map +1 -0
  50. package/next/components/dotcms-layout-body/components/container/components/container-not-found/container-not-found.component.d.ts +27 -0
  51. package/next/components/dotcms-layout-body/components/container/components/container-not-found/container-not-found.component.d.ts.map +1 -0
  52. package/next/components/dotcms-layout-body/components/container/components/empty-container/empty-container.component.d.ts +23 -0
  53. package/next/components/dotcms-layout-body/components/container/components/empty-container/empty-container.component.d.ts.map +1 -0
  54. package/next/components/dotcms-layout-body/components/container/container.component.d.ts +31 -0
  55. package/next/components/dotcms-layout-body/components/container/container.component.d.ts.map +1 -0
  56. package/next/components/dotcms-layout-body/components/contentlet/contentlet.component.d.ts +47 -0
  57. package/next/components/dotcms-layout-body/components/contentlet/contentlet.component.d.ts.map +1 -0
  58. package/next/components/dotcms-layout-body/components/fallback-component/fallback-component.component.d.ts +16 -0
  59. package/next/components/dotcms-layout-body/components/fallback-component/fallback-component.component.d.ts.map +1 -0
  60. package/next/components/dotcms-layout-body/components/page-error-message/page-error-message.component.d.ts +13 -0
  61. package/next/components/dotcms-layout-body/components/page-error-message/page-error-message.component.d.ts.map +1 -0
  62. package/next/components/dotcms-layout-body/components/row/row.component.d.ts +22 -0
  63. package/next/components/dotcms-layout-body/components/row/row.component.d.ts.map +1 -0
  64. package/next/components/dotcms-layout-body/dotcms-layout-body.component.d.ts +30 -0
  65. package/next/components/dotcms-layout-body/dotcms-layout-body.component.d.ts.map +1 -0
  66. package/next/models/index.d.ts +9 -10
  67. package/next/models/index.d.ts.map +1 -1
  68. package/next/public_api.d.ts +2 -0
  69. package/next/public_api.d.ts.map +1 -1
  70. package/next/store/dotcms.store.d.ts +36 -0
  71. package/next/store/dotcms.store.d.ts.map +1 -0
  72. package/package.json +3 -3
  73. package/esm2022/next/models/dotcms.model.mjs +0 -3
  74. package/next/models/dotcms.model.d.ts +0 -416
  75. package/next/models/dotcms.model.d.ts.map +0 -1
@@ -1,11 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener } from '@angular/core';
2
+ import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener, ChangeDetectionStrategy, computed, signal, Injectable, HostBinding } from '@angular/core';
3
3
  import { getUVEState } from '@dotcms/uve';
4
4
  import { UVE_MODE } from '@dotcms/uve/types';
5
- import { IMAGE_LOADER } from '@angular/common';
5
+ import { IMAGE_LOADER, NgComponentOutlet, AsyncPipe, NgTemplateOutlet, NgStyle } from '@angular/common';
6
6
  import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
7
7
  import { DomSanitizer } from '@angular/platform-browser';
8
8
  import { NOTIFY_CLIENT, isInsideEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS } from '@dotcms/client';
9
+ import { Blocks, isValidBlocks, PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
9
10
 
10
11
  /**
11
12
  * Directive to show a template when the UVE is in a specific mode.
@@ -387,9 +388,1255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
387
388
  args: ['window:message', ['$event']]
388
389
  }] } });
389
390
 
391
+ class DotCodeBlock {
392
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
393
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotCodeBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-code-block", ngImport: i0, template: `
394
+ <pre>
395
+ <code>
396
+ <ng-content />
397
+ </code>
398
+ </pre>
399
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
400
+ }
401
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCodeBlock, decorators: [{
402
+ type: Component,
403
+ args: [{
404
+ selector: 'dotcms-block-editor-renderer-code-block',
405
+ standalone: true,
406
+ template: `
407
+ <pre>
408
+ <code>
409
+ <ng-content />
410
+ </code>
411
+ </pre>
412
+ `,
413
+ changeDetection: ChangeDetectionStrategy.OnPush
414
+ }]
415
+ }] });
416
+ class DotBlockQuote {
417
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
418
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotBlockQuote, isStandalone: true, selector: "dotcms-block-editor-renderer-block-quote", ngImport: i0, template: `
419
+ <blockquote>
420
+ <ng-content />
421
+ </blockquote>
422
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
423
+ }
424
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBlockQuote, decorators: [{
425
+ type: Component,
426
+ args: [{
427
+ selector: 'dotcms-block-editor-renderer-block-quote',
428
+ standalone: true,
429
+ template: `
430
+ <blockquote>
431
+ <ng-content />
432
+ </blockquote>
433
+ `,
434
+ changeDetection: ChangeDetectionStrategy.OnPush
435
+ }]
436
+ }] });
437
+
438
+ /**
439
+ * Default component for unknown content type
440
+ */
441
+ class DotDefaultContentBlock {
442
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotDefaultContentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
443
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotDefaultContentBlock, selector: "dot-default-content", inputs: { contentlet: "contentlet" }, ngImport: i0, template: '<div>Unknown Content Type: {{ contentlet?.contentType }}</div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
444
+ }
445
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotDefaultContentBlock, decorators: [{
446
+ type: Component,
447
+ args: [{
448
+ selector: 'dot-default-content',
449
+ template: '<div>Unknown Content Type: {{ contentlet?.contentType }}</div>',
450
+ changeDetection: ChangeDetectionStrategy.OnPush
451
+ }]
452
+ }], propDecorators: { contentlet: [{
453
+ type: Input
454
+ }] } });
455
+ /**
456
+ * DotContent component that renders content based on content type
457
+ */
458
+ class DotContentletBlock {
459
+ constructor() {
460
+ this.$data = computed(() => this.attrs?.['data']);
461
+ }
462
+ ngOnInit() {
463
+ if (!this.$data()) {
464
+ console.error('DotCMSBlockEditorRendererContentlet: No data provided');
465
+ }
466
+ this.contentComponent =
467
+ this.customRenderers?.[this.$data()?.contentType] ??
468
+ Promise.resolve().then(function () { return contentlet_component; }).then((m) => m.DotDefaultContentBlock);
469
+ }
470
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
471
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotContentletBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-contentlet", inputs: { customRenderers: "customRenderers", attrs: "attrs" }, ngImport: i0, template: '<ng-container *ngComponentOutlet="contentComponent | async; inputs: { contentlet: $data() }"></ng-container>', isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
472
+ }
473
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, decorators: [{
474
+ type: Component,
475
+ args: [{
476
+ selector: 'dotcms-block-editor-renderer-contentlet',
477
+ standalone: true,
478
+ imports: [NgComponentOutlet, AsyncPipe],
479
+ changeDetection: ChangeDetectionStrategy.OnPush,
480
+ template: '<ng-container *ngComponentOutlet="contentComponent | async; inputs: { contentlet: $data() }"></ng-container>'
481
+ }]
482
+ }], propDecorators: { customRenderers: [{
483
+ type: Input
484
+ }], attrs: [{
485
+ type: Input
486
+ }] } });
487
+
488
+ var contentlet_component = /*#__PURE__*/Object.freeze({
489
+ __proto__: null,
490
+ DotContentletBlock: DotContentletBlock,
491
+ DotDefaultContentBlock: DotDefaultContentBlock
492
+ });
493
+
494
+ class DotImageBlock {
495
+ constructor() {
496
+ this.$srcURL = computed(() => this.attrs?.['src']);
497
+ }
498
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
499
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotImageBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-image", inputs: { attrs: "attrs" }, ngImport: i0, template: `
500
+ <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
501
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
502
+ }
503
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotImageBlock, decorators: [{
504
+ type: Component,
505
+ args: [{
506
+ selector: 'dotcms-block-editor-renderer-image',
507
+ standalone: true,
508
+ template: `
509
+ <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
510
+ `,
511
+ changeDetection: ChangeDetectionStrategy.OnPush
512
+ }]
513
+ }], propDecorators: { attrs: [{
514
+ type: Input
515
+ }] } });
516
+
517
+ class DotBulletList {
518
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
519
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotBulletList, isStandalone: true, selector: "dotcms-block-editor-renderer-bullet-list", ngImport: i0, template: `
520
+ <ul>
521
+ <ng-content />
522
+ </ul>
523
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
524
+ }
525
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBulletList, decorators: [{
526
+ type: Component,
527
+ args: [{
528
+ selector: 'dotcms-block-editor-renderer-bullet-list',
529
+ standalone: true,
530
+ changeDetection: ChangeDetectionStrategy.OnPush,
531
+ template: `
532
+ <ul>
533
+ <ng-content />
534
+ </ul>
535
+ `
536
+ }]
537
+ }] });
538
+ class DotOrdererList {
539
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
540
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotOrdererList, isStandalone: true, selector: "dotcms-block-editor-renderer-ordered-list", ngImport: i0, template: `
541
+ <ol>
542
+ <ng-content />
543
+ </ol>
544
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
545
+ }
546
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotOrdererList, decorators: [{
547
+ type: Component,
548
+ args: [{
549
+ selector: 'dotcms-block-editor-renderer-ordered-list',
550
+ standalone: true,
551
+ changeDetection: ChangeDetectionStrategy.OnPush,
552
+ template: `
553
+ <ol>
554
+ <ng-content />
555
+ </ol>
556
+ `
557
+ }]
558
+ }] });
559
+ class DotListItem {
560
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
561
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotListItem, isStandalone: true, selector: "dotcms-block-editor-renderer-list-item", ngImport: i0, template: `
562
+ <li>
563
+ <ng-content />
564
+ </li>
565
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
566
+ }
567
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotListItem, decorators: [{
568
+ type: Component,
569
+ args: [{
570
+ selector: 'dotcms-block-editor-renderer-list-item',
571
+ standalone: true,
572
+ changeDetection: ChangeDetectionStrategy.OnPush,
573
+ template: `
574
+ <li>
575
+ <ng-content />
576
+ </li>
577
+ `
578
+ }]
579
+ }] });
580
+
581
+ class DotTableBlock {
582
+ constructor() {
583
+ this.blockEditorItem = DotCMSBlockEditorItemComponent;
584
+ }
585
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
586
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotTableBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-table", inputs: { content: "content" }, ngImport: i0, template: `
587
+ <table>
588
+ <thead>
589
+ @for (rowNode of content?.slice(0, 1); track rowNode.type) {
590
+ <tr>
591
+ @for (cellNode of rowNode.content; track cellNode.type) {
592
+ <th
593
+ [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
594
+ [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
595
+ <ng-container
596
+ *ngComponentOutlet="
597
+ blockEditorItem;
598
+ inputs: { content: cellNode.content }
599
+ "></ng-container>
600
+ </th>
601
+ }
602
+ </tr>
603
+ }
604
+ </thead>
605
+ <tbody>
606
+ @for (rowNode of content?.slice(1); track rowNode.type) {
607
+ <tr>
608
+ @for (cellNode of rowNode.content; track cellNode.type) {
609
+ <td
610
+ [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
611
+ [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
612
+ <ng-container
613
+ *ngComponentOutlet="
614
+ blockEditorItem;
615
+ inputs: { content: cellNode.content }
616
+ "></ng-container>
617
+ </td>
618
+ }
619
+ </tr>
620
+ }
621
+ </tbody>
622
+ </table>
623
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
624
+ }
625
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTableBlock, decorators: [{
626
+ type: Component,
627
+ args: [{
628
+ selector: 'dotcms-block-editor-renderer-table',
629
+ standalone: true,
630
+ imports: [NgComponentOutlet],
631
+ template: `
632
+ <table>
633
+ <thead>
634
+ @for (rowNode of content?.slice(0, 1); track rowNode.type) {
635
+ <tr>
636
+ @for (cellNode of rowNode.content; track cellNode.type) {
637
+ <th
638
+ [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
639
+ [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
640
+ <ng-container
641
+ *ngComponentOutlet="
642
+ blockEditorItem;
643
+ inputs: { content: cellNode.content }
644
+ "></ng-container>
645
+ </th>
646
+ }
647
+ </tr>
648
+ }
649
+ </thead>
650
+ <tbody>
651
+ @for (rowNode of content?.slice(1); track rowNode.type) {
652
+ <tr>
653
+ @for (cellNode of rowNode.content; track cellNode.type) {
654
+ <td
655
+ [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
656
+ [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
657
+ <ng-container
658
+ *ngComponentOutlet="
659
+ blockEditorItem;
660
+ inputs: { content: cellNode.content }
661
+ "></ng-container>
662
+ </td>
663
+ }
664
+ </tr>
665
+ }
666
+ </tbody>
667
+ </table>
668
+ `
669
+ }]
670
+ }], propDecorators: { content: [{
671
+ type: Input
672
+ }] } });
673
+
674
+ class DotParagraphBlock {
675
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
676
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotParagraphBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-paragraph", ngImport: i0, template: `
677
+ <p>
678
+ <ng-content />
679
+ </p>
680
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
681
+ }
682
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotParagraphBlock, decorators: [{
683
+ type: Component,
684
+ args: [{
685
+ selector: 'dotcms-block-editor-renderer-paragraph',
686
+ standalone: true,
687
+ changeDetection: ChangeDetectionStrategy.OnPush,
688
+ template: `
689
+ <p>
690
+ <ng-content />
691
+ </p>
692
+ `
693
+ }]
694
+ }] });
695
+ class DotHeadingBlock {
696
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
697
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotHeadingBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-heading", inputs: { level: "level" }, ngImport: i0, template: `
698
+ @switch (level) {
699
+ @case ('1') {
700
+ <h1>
701
+ <ng-content />
702
+ </h1>
703
+ }
704
+ @case ('2') {
705
+ <h2>
706
+ <ng-content />
707
+ </h2>
708
+ }
709
+ @case ('3') {
710
+ <h3>
711
+ <ng-content />
712
+ </h3>
713
+ }
714
+ @case ('4') {
715
+ <h4>
716
+ <ng-content />
717
+ </h4>
718
+ }
719
+ @case ('5') {
720
+ <h5>
721
+ <ng-content />
722
+ </h5>
723
+ }
724
+ @case ('6') {
725
+ <h6>
726
+ <ng-content />
727
+ </h6>
728
+ }
729
+ @default {
730
+ <h1>
731
+ <ng-content />
732
+ </h1>
733
+ }
734
+ }
735
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
736
+ }
737
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotHeadingBlock, decorators: [{
738
+ type: Component,
739
+ args: [{
740
+ selector: 'dotcms-block-editor-renderer-heading',
741
+ standalone: true,
742
+ changeDetection: ChangeDetectionStrategy.OnPush,
743
+ template: `
744
+ @switch (level) {
745
+ @case ('1') {
746
+ <h1>
747
+ <ng-content />
748
+ </h1>
749
+ }
750
+ @case ('2') {
751
+ <h2>
752
+ <ng-content />
753
+ </h2>
754
+ }
755
+ @case ('3') {
756
+ <h3>
757
+ <ng-content />
758
+ </h3>
759
+ }
760
+ @case ('4') {
761
+ <h4>
762
+ <ng-content />
763
+ </h4>
764
+ }
765
+ @case ('5') {
766
+ <h5>
767
+ <ng-content />
768
+ </h5>
769
+ }
770
+ @case ('6') {
771
+ <h6>
772
+ <ng-content />
773
+ </h6>
774
+ }
775
+ @default {
776
+ <h1>
777
+ <ng-content />
778
+ </h1>
779
+ }
780
+ }
781
+ `
782
+ }]
783
+ }], propDecorators: { level: [{
784
+ type: Input
785
+ }] } });
786
+ class DotTextBlock {
787
+ constructor() {
788
+ this.marks = [];
789
+ this.text = '';
790
+ this.$remainingMarks = computed(() => this.marks?.slice(1));
791
+ this.$currentAttrs = computed(() => {
792
+ const attrs = { ...(this.marks?.[0]?.attrs || {}) };
793
+ if (attrs['class']) {
794
+ attrs['className'] = attrs['class'];
795
+ delete attrs['class'];
796
+ }
797
+ return attrs;
798
+ });
799
+ }
800
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
801
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotTextBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-text", inputs: { marks: "marks", text: "text" }, ngImport: i0, template: `
802
+ @switch (marks?.[0]?.type) {
803
+ @case ('link') {
804
+ <a
805
+ [attr.href]="$currentAttrs()['href'] || ''"
806
+ [attr.target]="$currentAttrs()['target'] || ''">
807
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
808
+ </a>
809
+ }
810
+ @case ('bold') {
811
+ <strong>
812
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
813
+ </strong>
814
+ }
815
+ @case ('underline') {
816
+ <u>
817
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
818
+ </u>
819
+ }
820
+ @case ('italic') {
821
+ <em>
822
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
823
+ </em>
824
+ }
825
+ @case ('strike') {
826
+ <s>
827
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
828
+ </s>
829
+ }
830
+ @case ('superscript') {
831
+ <sup>
832
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
833
+ </sup>
834
+ }
835
+ @case ('subscript') {
836
+ <sub>
837
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
838
+ </sub>
839
+ }
840
+ @default {
841
+ {{ text }}
842
+ }
843
+ }
844
+ `, isInline: true, dependencies: [{ kind: "component", type: DotTextBlock, selector: "dotcms-block-editor-renderer-text", inputs: ["marks", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
845
+ }
846
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTextBlock, decorators: [{
847
+ type: Component,
848
+ args: [{
849
+ selector: 'dotcms-block-editor-renderer-text',
850
+ standalone: true,
851
+ changeDetection: ChangeDetectionStrategy.OnPush,
852
+ template: `
853
+ @switch (marks?.[0]?.type) {
854
+ @case ('link') {
855
+ <a
856
+ [attr.href]="$currentAttrs()['href'] || ''"
857
+ [attr.target]="$currentAttrs()['target'] || ''">
858
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
859
+ </a>
860
+ }
861
+ @case ('bold') {
862
+ <strong>
863
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
864
+ </strong>
865
+ }
866
+ @case ('underline') {
867
+ <u>
868
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
869
+ </u>
870
+ }
871
+ @case ('italic') {
872
+ <em>
873
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
874
+ </em>
875
+ }
876
+ @case ('strike') {
877
+ <s>
878
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
879
+ </s>
880
+ }
881
+ @case ('superscript') {
882
+ <sup>
883
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
884
+ </sup>
885
+ }
886
+ @case ('subscript') {
887
+ <sub>
888
+ <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
889
+ </sub>
890
+ }
891
+ @default {
892
+ {{ text }}
893
+ }
894
+ }
895
+ `
896
+ }]
897
+ }], propDecorators: { marks: [{
898
+ type: Input
899
+ }], text: [{
900
+ type: Input
901
+ }] } });
902
+
903
+ class DotVideoBlock {
904
+ constructor() {
905
+ this.$srcURL = computed(() => this.attrs?.['src']);
906
+ this.$posterURL = computed(() => this.attrs?.['data']?.['thumbnail']);
907
+ }
908
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
909
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotVideoBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-video", inputs: { attrs: "attrs" }, ngImport: i0, template: `
910
+ <video
911
+ [controls]="true"
912
+ preload="metadata"
913
+ [poster]="this.$posterURL()"
914
+ [width]="attrs?.['width']"
915
+ [height]="attrs?.['height']">
916
+ <track default kind="captions" srclang="en" />
917
+ <source [src]="this.$srcURL()" [type]="attrs?.['mimeType']" />
918
+ Your browser does not support the
919
+ <code>video</code>
920
+ element.
921
+ </video>
922
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
923
+ }
924
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotVideoBlock, decorators: [{
925
+ type: Component,
926
+ args: [{
927
+ selector: 'dotcms-block-editor-renderer-video',
928
+ standalone: true,
929
+ changeDetection: ChangeDetectionStrategy.OnPush,
930
+ template: `
931
+ <video
932
+ [controls]="true"
933
+ preload="metadata"
934
+ [poster]="this.$posterURL()"
935
+ [width]="attrs?.['width']"
936
+ [height]="attrs?.['height']">
937
+ <track default kind="captions" srclang="en" />
938
+ <source [src]="this.$srcURL()" [type]="attrs?.['mimeType']" />
939
+ Your browser does not support the
940
+ <code>video</code>
941
+ element.
942
+ </video>
943
+ `
944
+ }]
945
+ }], propDecorators: { attrs: [{
946
+ type: Input
947
+ }] } });
948
+
949
+ class DotCMSBlockEditorItemComponent {
950
+ constructor() {
951
+ this.BLOCKS = Blocks;
952
+ }
953
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
954
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorItemComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-block", inputs: { content: "content", customRenderers: "customRenderers" }, ngImport: i0, template: "@for (node of content; track node) {\n @if (customRenderers?.[node.type]) {\n <ng-container\n *ngTemplateOutlet=\"\n customRender;\n context: { customRender: customRenderers?.[node.type], node: node }\n \"></ng-container>\n } @else {\n @switch (node.type) {\n @case (BLOCKS.PARAGRAPH) {\n <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-paragraph>\n }\n\n @case (BLOCKS.TEXT) {\n <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n }\n\n @case (BLOCKS.HEADING) {\n <dotcms-block-editor-renderer-heading\n [style]=\"node.attrs || {}\"\n [level]=\"node.attrs?.['level'] || '1'\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-heading>\n }\n\n @case (BLOCKS.BULLET_LIST) {\n <dotcms-block-editor-renderer-bullet-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-bullet-list>\n }\n\n @case (BLOCKS.ORDERED_LIST) {\n <dotcms-block-editor-renderer-ordered-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-ordered-list>\n }\n\n @case (BLOCKS.LIST_ITEM) {\n <dotcms-block-editor-renderer-list-item>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-list-item>\n }\n\n @case (BLOCKS.BLOCK_QUOTE) {\n <dotcms-block-editor-renderer-block-quote>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-block-quote>\n }\n\n @case (BLOCKS.CODE_BLOCK) {\n <dotcms-block-editor-renderer-code-block>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-code-block>\n }\n\n @case (BLOCKS.HARDBREAK) {\n <br />\n }\n\n @case (BLOCKS.HORIZONTAL_RULE) {\n <hr />\n }\n\n @case (BLOCKS.DOT_IMAGE) {\n <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.DOT_VIDEO) {\n <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.TABLE) {\n <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n }\n\n @case (BLOCKS.DOT_CONTENT) {\n <dotcms-block-editor-renderer-contentlet\n [attrs]=\"node.attrs || {}\"\n [customRenderers]=\"customRenderers\" />\n }\n\n @default {\n <div>Unknown Block Type: {{ node.type }}</div>\n }\n }\n }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n <ng-container\n *ngComponentOutlet=\"customRender | async; inputs: { content: node }\"></ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DotParagraphBlock, selector: "dotcms-block-editor-renderer-paragraph" }, { kind: "component", type: DotTextBlock, selector: "dotcms-block-editor-renderer-text", inputs: ["marks", "text"] }, { kind: "component", type: DotHeadingBlock, selector: "dotcms-block-editor-renderer-heading", inputs: ["level"] }, { kind: "component", type: DotBulletList, selector: "dotcms-block-editor-renderer-bullet-list" }, { kind: "component", type: DotOrdererList, selector: "dotcms-block-editor-renderer-ordered-list" }, { kind: "component", type: DotListItem, selector: "dotcms-block-editor-renderer-list-item" }, { kind: "component", type: DotCodeBlock, selector: "dotcms-block-editor-renderer-code-block" }, { kind: "component", type: DotBlockQuote, selector: "dotcms-block-editor-renderer-block-quote" }, { kind: "component", type: DotImageBlock, selector: "dotcms-block-editor-renderer-image", inputs: ["attrs"] }, { kind: "component", type: DotVideoBlock, selector: "dotcms-block-editor-renderer-video", inputs: ["attrs"] }, { kind: "component", type: DotTableBlock, selector: "dotcms-block-editor-renderer-table", inputs: ["content"] }, { kind: "component", type: DotContentletBlock, selector: "dotcms-block-editor-renderer-contentlet", inputs: ["customRenderers", "attrs"] }] }); }
955
+ }
956
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
957
+ type: Component,
958
+ args: [{ selector: 'dotcms-block-editor-renderer-block', standalone: true, imports: [
959
+ NgTemplateOutlet,
960
+ NgComponentOutlet,
961
+ AsyncPipe,
962
+ DotParagraphBlock,
963
+ DotTextBlock,
964
+ DotHeadingBlock,
965
+ DotBulletList,
966
+ DotOrdererList,
967
+ DotListItem,
968
+ DotCodeBlock,
969
+ DotBlockQuote,
970
+ DotImageBlock,
971
+ DotVideoBlock,
972
+ DotTableBlock,
973
+ DotContentletBlock
974
+ ], template: "@for (node of content; track node) {\n @if (customRenderers?.[node.type]) {\n <ng-container\n *ngTemplateOutlet=\"\n customRender;\n context: { customRender: customRenderers?.[node.type], node: node }\n \"></ng-container>\n } @else {\n @switch (node.type) {\n @case (BLOCKS.PARAGRAPH) {\n <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-paragraph>\n }\n\n @case (BLOCKS.TEXT) {\n <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n }\n\n @case (BLOCKS.HEADING) {\n <dotcms-block-editor-renderer-heading\n [style]=\"node.attrs || {}\"\n [level]=\"node.attrs?.['level'] || '1'\">\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-heading>\n }\n\n @case (BLOCKS.BULLET_LIST) {\n <dotcms-block-editor-renderer-bullet-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-bullet-list>\n }\n\n @case (BLOCKS.ORDERED_LIST) {\n <dotcms-block-editor-renderer-ordered-list>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-ordered-list>\n }\n\n @case (BLOCKS.LIST_ITEM) {\n <dotcms-block-editor-renderer-list-item>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-list-item>\n }\n\n @case (BLOCKS.BLOCK_QUOTE) {\n <dotcms-block-editor-renderer-block-quote>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-block-quote>\n }\n\n @case (BLOCKS.CODE_BLOCK) {\n <dotcms-block-editor-renderer-code-block>\n <dotcms-block-editor-renderer-block\n [content]=\"node.content\"\n [customRenderers]=\"customRenderers\" />\n </dotcms-block-editor-renderer-code-block>\n }\n\n @case (BLOCKS.HARDBREAK) {\n <br />\n }\n\n @case (BLOCKS.HORIZONTAL_RULE) {\n <hr />\n }\n\n @case (BLOCKS.DOT_IMAGE) {\n <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.DOT_VIDEO) {\n <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n }\n\n @case (BLOCKS.TABLE) {\n <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n }\n\n @case (BLOCKS.DOT_CONTENT) {\n <dotcms-block-editor-renderer-contentlet\n [attrs]=\"node.attrs || {}\"\n [customRenderers]=\"customRenderers\" />\n }\n\n @default {\n <div>Unknown Block Type: {{ node.type }}</div>\n }\n }\n }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n <ng-container\n *ngComponentOutlet=\"customRender | async; inputs: { content: node }\"></ng-container>\n</ng-template>\n" }]
975
+ }], propDecorators: { content: [{
976
+ type: Input
977
+ }], customRenderers: [{
978
+ type: Input
979
+ }] } });
980
+
981
+ /**
982
+ * A component that renders content from DotCMS's Block Editor field.
983
+ *
984
+ * This component provides an easy way to render Block Editor content in your Angular applications.
985
+ * It handles the rendering of standard blocks and allows customization through custom renderers.
986
+ *
987
+ * For more information about Block Editor, see {@link https://dev.dotcms.com/docs/block-editor}
988
+ *
989
+ * @example
990
+ * ```html
991
+ * <dotcms-block-editor-renderer
992
+ * [blocks]="myBlockEditorContent"
993
+ * [customRenderers]="myCustomRenderers">
994
+ * </dotcms-block-editor-renderer>
995
+ * ```
996
+ */
997
+ class DotCMSBlockEditorRendererComponent {
998
+ constructor() {
999
+ this.$blockEditorState = signal({ error: null });
1000
+ this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT);
1001
+ }
1002
+ ngOnInit() {
1003
+ const state = isValidBlocks(this.blocks);
1004
+ if (state.error) {
1005
+ console.error('Error in dotcms-block-editor-renderer: ', state.error);
1006
+ }
1007
+ this.$blockEditorState.set(isValidBlocks(this.blocks));
1008
+ }
1009
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1010
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorRendererComponent, isStandalone: true, selector: "dotcms-block-editor-renderer", inputs: { blocks: "blocks", customRenderers: "customRenderers" }, ngImport: i0, template: "@if ($blockEditorState().error && $isInEditMode()) {\n <div data-testid=\"invalid-blocks-message\">\n {{ $blockEditorState().error }}\n </div>\n} @else if (!$blockEditorState().error) {\n <dotcms-block-editor-renderer-block\n [content]=\"blocks.content\"\n [customRenderers]=\"customRenderers\" />\n}\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }] }); }
1011
+ }
1012
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
1013
+ type: Component,
1014
+ args: [{ selector: 'dotcms-block-editor-renderer', standalone: true, imports: [DotCMSBlockEditorItemComponent], template: "@if ($blockEditorState().error && $isInEditMode()) {\n <div data-testid=\"invalid-blocks-message\">\n {{ $blockEditorState().error }}\n </div>\n} @else if (!$blockEditorState().error) {\n <dotcms-block-editor-renderer-block\n [content]=\"blocks.content\"\n [customRenderers]=\"customRenderers\" />\n}\n" }]
1015
+ }], propDecorators: { blocks: [{
1016
+ type: Input
1017
+ }], customRenderers: [{
1018
+ type: Input
1019
+ }] } });
1020
+
1021
+ /**
1022
+ * @description This component is used to display a message when a page is missing the required `layout.body` property.
1023
+ * @internal
1024
+ * @class PageErrorMessageComponent
1025
+ */
1026
+ class PageErrorMessageComponent {
1027
+ ngOnInit() {
1028
+ console.warn('Missing required layout.body property in page');
1029
+ }
1030
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1031
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: PageErrorMessageComponent, isStandalone: true, selector: "dotcms-page-error-message", ngImport: i0, template: `
1032
+ <div
1033
+ data-testid="error-message"
1034
+ style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 4px;">
1035
+ <p style="margin: 0 0 0.5rem; color: #666;">
1036
+ The
1037
+ <code>page</code>
1038
+ is missing the required
1039
+ <code>layout.body</code>
1040
+ property.
1041
+ </p>
1042
+ <p style="margin: 0; color: #666;">
1043
+ Make sure the page asset is properly loaded and includes a layout configuration.
1044
+ </p>
1045
+ </div>
1046
+ `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1047
+ }
1048
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageErrorMessageComponent, decorators: [{
1049
+ type: Component,
1050
+ args: [{
1051
+ selector: 'dotcms-page-error-message',
1052
+ standalone: true,
1053
+ imports: [],
1054
+ template: `
1055
+ <div
1056
+ data-testid="error-message"
1057
+ style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 4px;">
1058
+ <p style="margin: 0 0 0.5rem; color: #666;">
1059
+ The
1060
+ <code>page</code>
1061
+ is missing the required
1062
+ <code>layout.body</code>
1063
+ property.
1064
+ </p>
1065
+ <p style="margin: 0; color: #666;">
1066
+ Make sure the page asset is properly loaded and includes a layout configuration.
1067
+ </p>
1068
+ </div>
1069
+ `,
1070
+ changeDetection: ChangeDetectionStrategy.OnPush
1071
+ }]
1072
+ }] });
1073
+
1074
+ const EMPTY_DOTCMS_PAGE_STORE = {
1075
+ page: {},
1076
+ components: {},
1077
+ mode: PRODUCTION_MODE
1078
+ };
1079
+ /**
1080
+ * @description This service is responsible for managing the page context.
1081
+ * @internal
1082
+ * @author dotCMS
1083
+ * @export
1084
+ * @class DotCMSStore
1085
+ */
1086
+ class DotCMSStore {
1087
+ constructor() {
1088
+ this.$store = signal(EMPTY_DOTCMS_PAGE_STORE);
1089
+ /**
1090
+ * @description Get if the current context is in development mode
1091
+ * @readonly
1092
+ * @type {boolean}
1093
+ * @memberof DotCMSStore
1094
+ */
1095
+ this.$isDevMode = computed(() => {
1096
+ const uveState = getUVEState();
1097
+ if (uveState?.mode) {
1098
+ return uveState?.mode === UVE_MODE.EDIT;
1099
+ }
1100
+ return this.$store()?.mode === DEVELOPMENT_MODE;
1101
+ });
1102
+ }
1103
+ /**
1104
+ * @description Get the store
1105
+ * @readonly
1106
+ * @type {DotCMSPageStore}
1107
+ * @memberof DotCMSStore
1108
+ */
1109
+ get store() {
1110
+ return this.$store();
1111
+ }
1112
+ /**
1113
+ * @description Set the store
1114
+ * @param {DotCMSPageStore} value
1115
+ * @memberof DotCMSStore
1116
+ */
1117
+ setStore(store) {
1118
+ this.$store.set(store);
1119
+ }
1120
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1121
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSStore, providedIn: 'root' }); }
1122
+ }
1123
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSStore, decorators: [{
1124
+ type: Injectable,
1125
+ args: [{
1126
+ providedIn: 'root'
1127
+ }]
1128
+ }] });
1129
+
1130
+ /**
1131
+ * @description This component is used to display a message when a container is not found.
1132
+ * @export
1133
+ * @internal
1134
+ * @class ContainerNotFoundComponent
1135
+ * @implements {OnInit}
1136
+ */
1137
+ class ContainerNotFoundComponent {
1138
+ constructor() {
1139
+ this.identifier = 'unknown';
1140
+ this.#dotcmsContextService = inject(DotCMSStore);
1141
+ this.$isDevMode = this.#dotcmsContextService.$isDevMode;
1142
+ this.emptyContainerStyle = EMPTY_CONTAINER_STYLE_ANGULAR;
1143
+ }
1144
+ #dotcmsContextService;
1145
+ ngOnInit() {
1146
+ if (this.$isDevMode()) {
1147
+ console.error(`Container with identifier ${this.identifier} not found`);
1148
+ }
1149
+ }
1150
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1151
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContainerNotFoundComponent, isStandalone: true, selector: "dotcms-container-not-found", inputs: { identifier: "identifier" }, ngImport: i0, template: `
1152
+ @if ($isDevMode()) {
1153
+ <div [attr.data-testid]="'container-not-found'" [ngStyle]="emptyContainerStyle">
1154
+ This container with identifier {{ identifier }} was not found.
1155
+ </div>
1156
+ }
1157
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
1158
+ }
1159
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerNotFoundComponent, decorators: [{
1160
+ type: Component,
1161
+ args: [{
1162
+ selector: 'dotcms-container-not-found',
1163
+ standalone: true,
1164
+ imports: [NgStyle],
1165
+ template: `
1166
+ @if ($isDevMode()) {
1167
+ <div [attr.data-testid]="'container-not-found'" [ngStyle]="emptyContainerStyle">
1168
+ This container with identifier {{ identifier }} was not found.
1169
+ </div>
1170
+ }
1171
+ `
1172
+ }]
1173
+ }], propDecorators: { identifier: [{
1174
+ type: Input
1175
+ }] } });
1176
+
1177
+ /**
1178
+ * @description This component is used to display a message when a container is empty.
1179
+ * @export
1180
+ * @internal
1181
+ * @class EmptyContainerComponent
1182
+ */
1183
+ class EmptyContainerComponent {
1184
+ constructor() {
1185
+ this.emptyContainerStyle = EMPTY_CONTAINER_STYLE_ANGULAR;
1186
+ this.#dotCMSStore = inject(DotCMSStore);
1187
+ this.$isDevMode = this.#dotCMSStore.$isDevMode;
1188
+ }
1189
+ #dotCMSStore;
1190
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: EmptyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1191
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: EmptyContainerComponent, isStandalone: true, selector: "dotcms-empty-container", ngImport: i0, template: `
1192
+ @if ($isDevMode()) {
1193
+ <div [ngStyle]="emptyContainerStyle" data-testid="empty-container">
1194
+ <span data-testid="empty-container-message">This container is empty.</span>
1195
+ </div>
1196
+ }
1197
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
1198
+ }
1199
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: EmptyContainerComponent, decorators: [{
1200
+ type: Component,
1201
+ args: [{
1202
+ selector: 'dotcms-empty-container',
1203
+ standalone: true,
1204
+ imports: [NgStyle],
1205
+ template: `
1206
+ @if ($isDevMode()) {
1207
+ <div [ngStyle]="emptyContainerStyle" data-testid="empty-container">
1208
+ <span data-testid="empty-container-message">This container is empty.</span>
1209
+ </div>
1210
+ }
1211
+ `
1212
+ }]
1213
+ }] });
1214
+
1215
+ /**
1216
+ * @description Fallback component that renders when no custom component is found for a contentlet
1217
+ * @category Components
1218
+ * @internal
1219
+ * @class FallbackComponent
1220
+ */
1221
+ class FallbackComponent {
1222
+ constructor() {
1223
+ this.UserNoComponent = null;
1224
+ }
1225
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1226
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: FallbackComponent, isStandalone: true, selector: "dotcms-fallback-component", inputs: { UserNoComponent: "UserNoComponent", contentlet: "contentlet" }, ngImport: i0, template: `
1227
+ @if (UserNoComponent) {
1228
+ <ng-container *ngComponentOutlet="UserNoComponent | async; inputs: { contentlet }" />
1229
+ } @else {
1230
+ <div data-testid="dotcms-fallback-component">
1231
+ <p>No component found for content type: {{ contentlet.contentType }}</p>
1232
+ </div>
1233
+ }
1234
+ `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1235
+ }
1236
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FallbackComponent, decorators: [{
1237
+ type: Component,
1238
+ args: [{
1239
+ selector: 'dotcms-fallback-component',
1240
+ standalone: true,
1241
+ imports: [AsyncPipe, NgComponentOutlet],
1242
+ template: `
1243
+ @if (UserNoComponent) {
1244
+ <ng-container *ngComponentOutlet="UserNoComponent | async; inputs: { contentlet }" />
1245
+ } @else {
1246
+ <div data-testid="dotcms-fallback-component">
1247
+ <p>No component found for content type: {{ contentlet.contentType }}</p>
1248
+ </div>
1249
+ }
1250
+ `,
1251
+ changeDetection: ChangeDetectionStrategy.OnPush
1252
+ }]
1253
+ }], propDecorators: { UserNoComponent: [{
1254
+ type: Input
1255
+ }], contentlet: [{
1256
+ type: Input
1257
+ }] } });
1258
+
1259
+ /**
1260
+ * @description Contentlet component that renders DotCMS content with development mode support
1261
+ *
1262
+ * @component
1263
+ * @param {DotCMSContentlet} contentlet - The contentlet to be rendered
1264
+ * @param {string} container - The container identifier
1265
+ * @class ContentletComponent
1266
+ */
1267
+ class ContentletComponent {
1268
+ constructor() {
1269
+ this.dotObject = 'contentlet';
1270
+ this.#dotCMSStore = inject(DotCMSStore);
1271
+ this.$contentlet = signal(null);
1272
+ this.$UserComponent = signal(null);
1273
+ this.$UserNoComponent = signal(null);
1274
+ this.$isDevMode = this.#dotCMSStore.$isDevMode;
1275
+ this.$haveContent = signal(false);
1276
+ this.$style = computed(() => this.$isDevMode() && !this.$haveContent() ? { minHeight: '4rem' } : {});
1277
+ this.$dotAttributes = computed(() => {
1278
+ const contentlet = this.$contentlet();
1279
+ if (!contentlet || !this.$isDevMode())
1280
+ return {};
1281
+ return getDotContentletAttributes(contentlet, this.container);
1282
+ });
1283
+ this.identifier = null;
1284
+ this.basetype = null;
1285
+ this.title = null;
1286
+ this.inode = null;
1287
+ this.type = null;
1288
+ this.containerAttribute = null;
1289
+ this.onNumberOfPages = null;
1290
+ this.styleAttribute = null;
1291
+ }
1292
+ #dotCMSStore;
1293
+ ngOnChanges() {
1294
+ this.$contentlet.set(this.contentlet);
1295
+ this.setupComponents();
1296
+ this.identifier = this.$dotAttributes()['data-dot-identifier'];
1297
+ this.basetype = this.$dotAttributes()['data-dot-basetype'];
1298
+ this.title = this.$dotAttributes()['data-dot-title'];
1299
+ this.inode = this.$dotAttributes()['data-dot-inode'];
1300
+ this.type = this.$dotAttributes()['data-dot-type'];
1301
+ this.containerAttribute = this.$dotAttributes()['data-dot-container'];
1302
+ this.onNumberOfPages = this.$dotAttributes()['data-dot-on-number-of-pages'];
1303
+ this.styleAttribute = this.$style();
1304
+ }
1305
+ ngAfterViewInit() {
1306
+ this.checkContent();
1307
+ }
1308
+ setupComponents() {
1309
+ const store = this.#dotCMSStore.store;
1310
+ if (!store)
1311
+ return;
1312
+ if (!store?.components)
1313
+ return;
1314
+ this.$UserComponent.set(store.components[this.contentlet?.contentType]);
1315
+ this.$UserNoComponent.set(store.components[CUSTOM_NO_COMPONENT]);
1316
+ }
1317
+ checkContent() {
1318
+ const element = this.contentletRef?.nativeElement;
1319
+ if (element) {
1320
+ const hasContent = element.getBoundingClientRect().height > 0;
1321
+ this.$haveContent.set(hasContent);
1322
+ }
1323
+ }
1324
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1325
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet", inputs: { contentlet: "contentlet", container: "container" }, host: { properties: { "attr.data-dot-object": "this.dotObject", "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.type", "attr.data-dot-container": "this.containerAttribute", "attr.data-dot-on-number-of-pages": "this.onNumberOfPages", "style": "this.styleAttribute" } }, viewQueries: [{ propertyName: "contentletRef", first: true, predicate: ["contentletRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
1326
+ @if ($UserComponent()) {
1327
+ <ng-container
1328
+ *ngComponentOutlet="
1329
+ $UserComponent() | async;
1330
+ inputs: { contentlet: $contentlet() ?? contentlet }
1331
+ " />
1332
+ } @else if ($UserNoComponent() && $isDevMode()) {
1333
+ <dotcms-fallback-component
1334
+ [UserNoComponent]="$UserNoComponent()"
1335
+ [contentlet]="$contentlet() ?? contentlet" />
1336
+ }
1337
+ `, isInline: true, dependencies: [{ kind: "component", type: FallbackComponent, selector: "dotcms-fallback-component", inputs: ["UserNoComponent", "contentlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1338
+ }
1339
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, decorators: [{
1340
+ type: Component,
1341
+ args: [{
1342
+ selector: 'dotcms-contentlet',
1343
+ standalone: true,
1344
+ imports: [FallbackComponent, AsyncPipe, NgComponentOutlet],
1345
+ template: `
1346
+ @if ($UserComponent()) {
1347
+ <ng-container
1348
+ *ngComponentOutlet="
1349
+ $UserComponent() | async;
1350
+ inputs: { contentlet: $contentlet() ?? contentlet }
1351
+ " />
1352
+ } @else if ($UserNoComponent() && $isDevMode()) {
1353
+ <dotcms-fallback-component
1354
+ [UserNoComponent]="$UserNoComponent()"
1355
+ [contentlet]="$contentlet() ?? contentlet" />
1356
+ }
1357
+ `,
1358
+ changeDetection: ChangeDetectionStrategy.OnPush
1359
+ }]
1360
+ }], propDecorators: { contentlet: [{
1361
+ type: Input,
1362
+ args: [{ required: true }]
1363
+ }], container: [{
1364
+ type: Input,
1365
+ args: [{ required: true }]
1366
+ }], contentletRef: [{
1367
+ type: ViewChild,
1368
+ args: ['contentletRef']
1369
+ }], dotObject: [{
1370
+ type: HostBinding,
1371
+ args: ['attr.data-dot-object']
1372
+ }], identifier: [{
1373
+ type: HostBinding,
1374
+ args: ['attr.data-dot-identifier']
1375
+ }], basetype: [{
1376
+ type: HostBinding,
1377
+ args: ['attr.data-dot-basetype']
1378
+ }], title: [{
1379
+ type: HostBinding,
1380
+ args: ['attr.data-dot-title']
1381
+ }], inode: [{
1382
+ type: HostBinding,
1383
+ args: ['attr.data-dot-inode']
1384
+ }], type: [{
1385
+ type: HostBinding,
1386
+ args: ['attr.data-dot-type']
1387
+ }], containerAttribute: [{
1388
+ type: HostBinding,
1389
+ args: ['attr.data-dot-container']
1390
+ }], onNumberOfPages: [{
1391
+ type: HostBinding,
1392
+ args: ['attr.data-dot-on-number-of-pages']
1393
+ }], styleAttribute: [{
1394
+ type: HostBinding,
1395
+ args: ['style']
1396
+ }] } });
1397
+
1398
+ /**
1399
+ * @description This component renders a container with all its content using the layout provided by dotCMS Page API.
1400
+ *
1401
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
1402
+ * @category Components
1403
+ * @internal
1404
+ * @class ContainerComponent
1405
+ */
1406
+ class ContainerComponent {
1407
+ constructor() {
1408
+ this.#dotCMSStore = inject(DotCMSStore);
1409
+ this.$containerData = signal(null);
1410
+ this.$contentlets = signal([]);
1411
+ this.$isEmpty = computed(() => this.$contentlets().length === 0);
1412
+ this.$dotAttributes = computed(() => {
1413
+ const containerData = this.$containerData();
1414
+ if (!containerData || !this.#dotCMSStore.$isDevMode()) {
1415
+ return {};
1416
+ }
1417
+ return getDotContainerAttributes(containerData);
1418
+ });
1419
+ this.dotObject = 'container';
1420
+ this.acceptTypes = null;
1421
+ this.identifier = null;
1422
+ this.maxContentlets = null;
1423
+ this.uuid = null;
1424
+ }
1425
+ #dotCMSStore;
1426
+ ngOnChanges() {
1427
+ const { page } = this.#dotCMSStore.store ?? {};
1428
+ if (!page) {
1429
+ return;
1430
+ }
1431
+ this.$containerData.set(getContainersData(page, this.container));
1432
+ this.$contentlets.set(getContentletsInContainer(page, this.container));
1433
+ this.acceptTypes = this.$dotAttributes()['data-dot-accept-types'];
1434
+ this.identifier = this.$dotAttributes()['data-dot-identifier'];
1435
+ this.maxContentlets = this.$dotAttributes()['data-max-contentlets'];
1436
+ this.uuid = this.$dotAttributes()['data-dot-uuid'];
1437
+ }
1438
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1439
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContainerComponent, isStandalone: true, selector: "dotcms-container", inputs: { container: "container" }, host: { properties: { "attr.data-dot-object": "this.dotObject", "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" } }, usesOnChanges: true, ngImport: i0, template: `
1440
+ @if (!$containerData()) {
1441
+ <dotcms-container-not-found [identifier]="container.identifier" />
1442
+ } @else if ($isEmpty()) {
1443
+ <dotcms-empty-container />
1444
+ } @else {
1445
+ @for (contentlet of $contentlets(); track contentlet.identifier) {
1446
+ <dotcms-contentlet [contentlet]="contentlet" [container]="container.identifier" />
1447
+ }
1448
+ }
1449
+ `, isInline: true, dependencies: [{ kind: "component", type: ContainerNotFoundComponent, selector: "dotcms-container-not-found", inputs: ["identifier"] }, { kind: "component", type: EmptyContainerComponent, selector: "dotcms-empty-container" }, { kind: "component", type: ContentletComponent, selector: "dotcms-contentlet", inputs: ["contentlet", "container"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1450
+ }
1451
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerComponent, decorators: [{
1452
+ type: Component,
1453
+ args: [{
1454
+ selector: 'dotcms-container',
1455
+ standalone: true,
1456
+ imports: [ContainerNotFoundComponent, EmptyContainerComponent, ContentletComponent],
1457
+ template: `
1458
+ @if (!$containerData()) {
1459
+ <dotcms-container-not-found [identifier]="container.identifier" />
1460
+ } @else if ($isEmpty()) {
1461
+ <dotcms-empty-container />
1462
+ } @else {
1463
+ @for (contentlet of $contentlets(); track contentlet.identifier) {
1464
+ <dotcms-contentlet [contentlet]="contentlet" [container]="container.identifier" />
1465
+ }
1466
+ }
1467
+ `,
1468
+ changeDetection: ChangeDetectionStrategy.OnPush
1469
+ }]
1470
+ }], propDecorators: { container: [{
1471
+ type: Input,
1472
+ args: [{ required: true }]
1473
+ }], dotObject: [{
1474
+ type: HostBinding,
1475
+ args: ['attr.data-dot-object']
1476
+ }], acceptTypes: [{
1477
+ type: HostBinding,
1478
+ args: ['attr.data-dot-accept-types']
1479
+ }], identifier: [{
1480
+ type: HostBinding,
1481
+ args: ['attr.data-dot-identifier']
1482
+ }], maxContentlets: [{
1483
+ type: HostBinding,
1484
+ args: ['attr.data-max-contentlets']
1485
+ }], uuid: [{
1486
+ type: HostBinding,
1487
+ args: ['attr.data-dot-uuid']
1488
+ }] } });
1489
+
1490
+ /**
1491
+ * This component renders a column with all its content using the layout provided by dotCMS Page API.
1492
+ *
1493
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
1494
+ * @category Components
1495
+ * @internal
1496
+ */
1497
+ class ColumnComponent {
1498
+ constructor() {
1499
+ this.customClasses = '';
1500
+ }
1501
+ ngOnChanges() {
1502
+ const positionClasses = getColumnPositionClasses(this.column);
1503
+ this.customClasses = combineClasses([positionClasses.startClass, positionClasses.endClass]);
1504
+ }
1505
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1506
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.customClasses" } }, usesOnChanges: true, ngImport: i0, template: `
1507
+ <div [class]="column.styleClass" data-testid="dotcms-column">
1508
+ @for (container of column.containers; track $index) {
1509
+ <dotcms-container [container]="container" />
1510
+ }
1511
+ </div>
1512
+ `, 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 }); }
1513
+ }
1514
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColumnComponent, decorators: [{
1515
+ type: Component,
1516
+ args: [{ selector: 'dotcms-column', standalone: true, imports: [ContainerComponent], template: `
1517
+ <div [class]="column.styleClass" data-testid="dotcms-column">
1518
+ @for (container of column.containers; track $index) {
1519
+ <dotcms-container [container]="container" />
1520
+ }
1521
+ </div>
1522
+ `, 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"] }]
1523
+ }], propDecorators: { column: [{
1524
+ type: Input,
1525
+ args: [{ required: true }]
1526
+ }], customClasses: [{
1527
+ type: HostBinding,
1528
+ args: ['class']
1529
+ }] } });
1530
+
1531
+ /**
1532
+ * @description This component renders a row with all its content using the layout provided by dotCMS Page API.
1533
+ *
1534
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
1535
+ * @category Components
1536
+ * @internal
1537
+ * @class RowComponent
1538
+ */
1539
+ class RowComponent {
1540
+ constructor() {
1541
+ this.customClasses = signal('');
1542
+ }
1543
+ ngOnChanges() {
1544
+ this.customClasses.set(combineClasses([this.row.styleClass || 'dot-row']));
1545
+ }
1546
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1547
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row" }, usesOnChanges: true, ngImport: i0, template: `
1548
+ <div class="dot-row-container">
1549
+ <div [class]="customClasses()" data-dot-object="row" data-testid="dotcms-row">
1550
+ @for (column of row.columns; track $index) {
1551
+ <dotcms-column [column]="column" />
1552
+ }
1553
+ </div>
1554
+ </div>
1555
+ `, isInline: true, styles: [".dot-row{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}\n"], dependencies: [{ kind: "component", type: ColumnComponent, selector: "dotcms-column", inputs: ["column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1556
+ }
1557
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: RowComponent, decorators: [{
1558
+ type: Component,
1559
+ args: [{ selector: 'dotcms-row', standalone: true, imports: [ColumnComponent], template: `
1560
+ <div class="dot-row-container">
1561
+ <div [class]="customClasses()" data-dot-object="row" data-testid="dotcms-row">
1562
+ @for (column of row.columns; track $index) {
1563
+ <dotcms-column [column]="column" />
1564
+ }
1565
+ </div>
1566
+ </div>
1567
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dot-row{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}\n"] }]
1568
+ }], propDecorators: { row: [{
1569
+ type: Input,
1570
+ args: [{ required: true }]
1571
+ }] } });
1572
+
1573
+ /**
1574
+ * @description This component is used to render the layout for a DotCMS page.
1575
+ * @param {DotCMSPageAsset} page - The page to render the layout for
1576
+ * @param {DotCMSPageComponent} components - The components to render the layout for
1577
+ * @param {DotCMSPageRendererMode} mode - The mode to render the layout for
1578
+ *
1579
+ * @example
1580
+ * <dotcms-layout-body [page]="page" [components]="components" [mode]="'development'" />
1581
+ *
1582
+ * @export
1583
+ * @implements {OnChanges}
1584
+ * @class DotCMSLayoutBodyComponent
1585
+ */
1586
+ class DotCMSLayoutBodyComponent {
1587
+ constructor() {
1588
+ this.components = {};
1589
+ this.mode = 'production';
1590
+ this.#dotCMSStore = inject(DotCMSStore);
1591
+ this.$isDevMode = this.#dotCMSStore.$isDevMode;
1592
+ this.$rows = signal([]);
1593
+ this.$isEmpty = signal(false);
1594
+ }
1595
+ #dotCMSStore;
1596
+ ngOnChanges() {
1597
+ this.#dotCMSStore.setStore({
1598
+ page: this.page,
1599
+ components: this.components,
1600
+ mode: this.mode
1601
+ });
1602
+ this.$isEmpty.set(!this.page?.layout?.body);
1603
+ this.$rows.set(this.page?.layout?.body?.rows ?? []);
1604
+ }
1605
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSLayoutBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1606
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSLayoutBodyComponent, isStandalone: true, selector: "dotcms-layout-body", inputs: { page: "page", components: "components", mode: "mode" }, providers: [DotCMSStore], usesOnChanges: true, ngImport: i0, template: `
1607
+ @if ($isEmpty() && $isDevMode()) {
1608
+ <dotcms-page-error-message />
1609
+ } @else {
1610
+ @for (row of $rows(); track row.identifier) {
1611
+ <dotcms-row [row]="row" />
1612
+ }
1613
+ }
1614
+ `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: PageErrorMessageComponent, selector: "dotcms-page-error-message" }, { kind: "component", type: RowComponent, selector: "dotcms-row", inputs: ["row"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1615
+ }
1616
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSLayoutBodyComponent, decorators: [{
1617
+ type: Component,
1618
+ args: [{ selector: 'dotcms-layout-body', standalone: true, imports: [PageErrorMessageComponent, RowComponent], providers: [DotCMSStore], template: `
1619
+ @if ($isEmpty() && $isDevMode()) {
1620
+ <dotcms-page-error-message />
1621
+ } @else {
1622
+ @for (row of $rows(); track row.identifier) {
1623
+ <dotcms-row [row]="row" />
1624
+ }
1625
+ }
1626
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
1627
+ }], propDecorators: { page: [{
1628
+ type: Input,
1629
+ args: [{ required: true }]
1630
+ }], components: [{
1631
+ type: Input,
1632
+ args: [{ required: true }]
1633
+ }], mode: [{
1634
+ type: Input
1635
+ }] } });
1636
+
390
1637
  /**
391
1638
  * Generated bundle index. Do not edit.
392
1639
  */
393
1640
 
394
- export { DotCMSEditableTextComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
1641
+ export { DotCMSBlockEditorRendererComponent, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
395
1642
  //# sourceMappingURL=dotcms-angular-next.mjs.map