@dotcms/angular 0.0.1-beta.15 → 0.0.1-beta.17

package/fesm2022/dotcms-angular-next.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener, ChangeDetectionStrategy, signal, computed, Injectable, HostBinding } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener, ChangeDetectionStrategy, computed, signal, Injectable, HostBinding } from '@angular/core';
 import { getUVEState } from '@dotcms/uve';
 import { UVE_MODE } from '@dotcms/uve/types';
-import { IMAGE_LOADER, NgStyle, AsyncPipe, NgComponentOutlet } from '@angular/common';
+import { IMAGE_LOADER, NgComponentOutlet, AsyncPipe, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NOTIFY_CLIENT, isInsideEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS } from '@dotcms/client';
-import { PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
+import { Blocks, isValidBlocks, PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
 
 /**
  * Directive to show a template when the UVE is in a specific mode.
@@ -388,6 +388,636 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 args: ['window:message', ['$event']]
             }] } });
 
+class DotCodeBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <pre>
+            <code>
+                <ng-content />
+            </code>
+        </pre>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCodeBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-code-block',
+                    standalone: true,
+                    template: `
+        <pre>
+            <code>
+                <ng-content />
+            </code>
+        </pre>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+class DotBlockQuote {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <blockquote>
+            <ng-content />
+        </blockquote>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBlockQuote, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-block-quote',
+                    standalone: true,
+                    template: `
+        <blockquote>
+            <ng-content />
+        </blockquote>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Default component for unknown content type
+ */
+class DotDefaultContentBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotDefaultContentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotDefaultContentBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dot-default-content',
+                    template: '<div>Unknown Content Type: {{ contentlet?.contentType }}</div>',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { contentlet: [{
+                type: Input
+            }] } });
+/**
+ * DotContent component that renders content based on content type
+ */
+class DotContentletBlock {
+    constructor() {
+        this.$data = computed(() => this.attrs?.['data']);
+    }
+    ngOnInit() {
+        if (!this.$data()) {
+            console.error('DotCMSBlockEditorRendererContentlet: No data provided');
+        }
+        this.contentComponent =
+            this.customRenderers?.[this.$data()?.contentType] ??
+                Promise.resolve().then(function () { return contentlet_component; }).then((m) => m.DotDefaultContentBlock);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-contentlet',
+                    standalone: true,
+                    imports: [NgComponentOutlet, AsyncPipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-container *ngComponentOutlet="contentComponent | async; inputs: { contentlet: $data() }"></ng-container>'
+                }]
+        }], propDecorators: { customRenderers: [{
+                type: Input
+            }], attrs: [{
+                type: Input
+            }] } });
+
+var contentlet_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DotContentletBlock: DotContentletBlock,
+    DotDefaultContentBlock: DotDefaultContentBlock
+});
+
+class DotImageBlock {
+    constructor() {
+        this.$srcURL = computed(() => this.attrs?.['src']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotImageBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-image',
+                    standalone: true,
+                    template: `
+        <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { attrs: [{
+                type: Input
+            }] } });
+
+class DotBulletList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <ul>
+            <ng-content />
+        </ul>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBulletList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-bullet-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ul>
+            <ng-content />
+        </ul>
+    `
+                }]
+        }] });
+class DotOrdererList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <ol>
+            <ng-content />
+        </ol>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotOrdererList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-ordered-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ol>
+            <ng-content />
+        </ol>
+    `
+                }]
+        }] });
+class DotListItem {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <li>
+            <ng-content />
+        </li>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotListItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-list-item',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <li>
+            <ng-content />
+        </li>
+    `
+                }]
+        }] });
+
+class DotTableBlock {
+    constructor() {
+        this.blockEditorItem = DotCMSBlockEditorItemComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <table>
+            <thead>
+                @for (rowNode of content?.slice(0, 1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <th
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </th>
+                        }
+                    </tr>
+                }
+            </thead>
+            <tbody>
+                @for (rowNode of content?.slice(1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <td
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTableBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-table',
+                    standalone: true,
+                    imports: [NgComponentOutlet],
+                    template: `
+        <table>
+            <thead>
+                @for (rowNode of content?.slice(0, 1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <th
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </th>
+                        }
+                    </tr>
+                }
+            </thead>
+            <tbody>
+                @for (rowNode of content?.slice(1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <td
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `
+                }]
+        }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class DotParagraphBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <p>
+            <ng-content />
+        </p>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotParagraphBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-paragraph',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <p>
+            <ng-content />
+        </p>
+    `
+                }]
+        }] });
+class DotHeadingBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        @switch (level) {
+            @case ('1') {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+            @case ('2') {
+                <h2>
+                    <ng-content />
+                </h2>
+            }
+            @case ('3') {
+                <h3>
+                    <ng-content />
+                </h3>
+            }
+            @case ('4') {
+                <h4>
+                    <ng-content />
+                </h4>
+            }
+            @case ('5') {
+                <h5>
+                    <ng-content />
+                </h5>
+            }
+            @case ('6') {
+                <h6>
+                    <ng-content />
+                </h6>
+            }
+            @default {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotHeadingBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-heading',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @switch (level) {
+            @case ('1') {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+            @case ('2') {
+                <h2>
+                    <ng-content />
+                </h2>
+            }
+            @case ('3') {
+                <h3>
+                    <ng-content />
+                </h3>
+            }
+            @case ('4') {
+                <h4>
+                    <ng-content />
+                </h4>
+            }
+            @case ('5') {
+                <h5>
+                    <ng-content />
+                </h5>
+            }
+            @case ('6') {
+                <h6>
+                    <ng-content />
+                </h6>
+            }
+            @default {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+        }
+    `
+                }]
+        }], propDecorators: { level: [{
+                type: Input
+            }] } });
+class DotTextBlock {
+    constructor() {
+        this.marks = [];
+        this.text = '';
+        this.$remainingMarks = computed(() => this.marks?.slice(1));
+        this.$currentAttrs = computed(() => {
+            const attrs = { ...(this.marks?.[0]?.attrs || {}) };
+            if (attrs['class']) {
+                attrs['className'] = attrs['class'];
+                delete attrs['class'];
+            }
+            return attrs;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        @switch (marks?.[0]?.type) {
+            @case ('link') {
+                <a
+                    [attr.href]="$currentAttrs()['href'] || ''"
+                    [attr.target]="$currentAttrs()['target'] || ''">
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </a>
+            }
+            @case ('bold') {
+                <strong>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </strong>
+            }
+            @case ('underline') {
+                <u>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </u>
+            }
+            @case ('italic') {
+                <em>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </em>
+            }
+            @case ('strike') {
+                <s>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </s>
+            }
+            @case ('superscript') {
+                <sup>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sup>
+            }
+            @case ('subscript') {
+                <sub>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sub>
+            }
+            @default {
+                {{ text }}
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: DotTextBlock, selector: "dotcms-block-editor-renderer-text", inputs: ["marks", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTextBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-text',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @switch (marks?.[0]?.type) {
+            @case ('link') {
+                <a
+                    [attr.href]="$currentAttrs()['href'] || ''"
+                    [attr.target]="$currentAttrs()['target'] || ''">
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </a>
+            }
+            @case ('bold') {
+                <strong>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </strong>
+            }
+            @case ('underline') {
+                <u>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </u>
+            }
+            @case ('italic') {
+                <em>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </em>
+            }
+            @case ('strike') {
+                <s>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </s>
+            }
+            @case ('superscript') {
+                <sup>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sup>
+            }
+            @case ('subscript') {
+                <sub>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sub>
+            }
+            @default {
+                {{ text }}
+            }
+        }
+    `
+                }]
+        }], propDecorators: { marks: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
+
+class DotVideoBlock {
+    constructor() {
+        this.$srcURL = computed(() => this.attrs?.['src']);
+        this.$posterURL = computed(() => this.attrs?.['data']?.['thumbnail']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+        <video
+            [controls]="true"
+            preload="metadata"
+            [poster]="this.$posterURL()"
+            [width]="attrs?.['width']"
+            [height]="attrs?.['height']">
+            <track default kind="captions" srclang="en" />
+            <source [src]="this.$srcURL()" [type]="attrs?.['mimeType']" />
+            Your browser does not support the
+            <code>video</code>
+            element.
+        </video>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotVideoBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-video',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <video
+            [controls]="true"
+            preload="metadata"
+            [poster]="this.$posterURL()"
+            [width]="attrs?.['width']"
+            [height]="attrs?.['height']">
+            <track default kind="captions" srclang="en" />
+            <source [src]="this.$srcURL()" [type]="attrs?.['mimeType']" />
+            Your browser does not support the
+            <code>video</code>
+            element.
+        </video>
+    `
+                }]
+        }], propDecorators: { attrs: [{
+                type: Input
+            }] } });
+
+class DotCMSBlockEditorItemComponent {
+    constructor() {
+        this.BLOCKS = Blocks;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dotcms-block-editor-renderer-block', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        AsyncPipe,
+                        DotParagraphBlock,
+                        DotTextBlock,
+                        DotHeadingBlock,
+                        DotBulletList,
+                        DotOrdererList,
+                        DotListItem,
+                        DotCodeBlock,
+                        DotBlockQuote,
+                        DotImageBlock,
+                        DotVideoBlock,
+                        DotTableBlock,
+                        DotContentletBlock
+                    ], 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" }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], customRenderers: [{
+                type: Input
+            }] } });
+
+/**
+ * A component that renders content from DotCMS's Block Editor field.
+ *
+ * This component provides an easy way to render Block Editor content in your Angular applications.
+ * It handles the rendering of standard blocks and allows customization through custom renderers.
+ *
+ * For more information about Block Editor, see {@link https://dev.dotcms.com/docs/block-editor}
+ *
+ * @example
+ * ```html
+ * <dotcms-block-editor-renderer
+ *   [blocks]="myBlockEditorContent"
+ *   [customRenderers]="myCustomRenderers">
+ * </dotcms-block-editor-renderer>
+ * ```
+ */
+class DotCMSBlockEditorRendererComponent {
+    constructor() {
+        this.$blockEditorState = signal({ error: null });
+        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT);
+    }
+    ngOnInit() {
+        const state = isValidBlocks(this.blocks);
+        if (state.error) {
+            console.error('Error in dotcms-block-editor-renderer: ', state.error);
+        }
+        this.$blockEditorState.set(isValidBlocks(this.blocks));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], propDecorators: { blocks: [{
+                type: Input
+            }], customRenderers: [{
+                type: Input
+            }] } });
+
 /**
  * @description This component is used to display a message when a page is missing the required `layout.body` property.
  * @internal
@@ -699,7 +1329,7 @@ class ContentletComponent {
                     $UserComponent() | async;
                     inputs: { contentlet: $contentlet() ?? contentlet }
                 " />
-        } @else if ($UserNoComponent() && $isDevMode()) {
+        } @else if ($isDevMode()) {
             <dotcms-fallback-component
                 [UserNoComponent]="$UserNoComponent()"
                 [contentlet]="$contentlet() ?? contentlet" />
@@ -719,7 +1349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                     $UserComponent() | async;
                     inputs: { contentlet: $contentlet() ?? contentlet }
                 " />
-        } @else if ($UserNoComponent() && $isDevMode()) {
+        } @else if ($isDevMode()) {
             <dotcms-fallback-component
                 [UserNoComponent]="$UserNoComponent()"
                 [contentlet]="$contentlet() ?? contentlet" />
@@ -1008,5 +1638,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
+export { DotCMSBlockEditorRendererComponent, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
 //# sourceMappingURL=dotcms-angular-next.mjs.map