@dotcms/angular 1.6.0 → 1.7.0

package/fesm2022/dotcms-angular.mjs

@@ -8,8 +8,9 @@ import { createDotCMSClient } from '@dotcms/client';
 import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { DomSanitizer } from '@angular/platform-browser';
 import { __DOTCMS_UVE_EVENT__, BlockEditorDefaultBlocks } from '@dotcms/types/internal';
-import { __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__, isValidBlocks, PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses, DOT_SECTION_ID_PREFIX, registerStyleEditorSchemas } from '@dotcms/uve/internal';
-import { Subject, of } from 'rxjs';
+import { __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__, isValidBlocks, PRODUCTION_MODE, ANALYTICS_READY_EVENT, isDotAnalyticsActive, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, getAnalyticsContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses, DOT_SECTION_ID_PREFIX, registerStyleEditorSchemas } from '@dotcms/uve/internal';
+import { fromEvent, map, Subject, of } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { finalize } from 'rxjs/operators';
 
 /**
@@ -44,10 +45,10 @@ class DotCMSShowWhenDirective {
             this.#hasView = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSShowWhenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: DotCMSShowWhenDirective, isStandalone: true, selector: "[dotCMSShowWhen]", inputs: { dotCMSShowWhen: "dotCMSShowWhen" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSShowWhenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DotCMSShowWhenDirective, isStandalone: true, selector: "[dotCMSShowWhen]", inputs: { dotCMSShowWhen: "dotCMSShowWhen" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSShowWhenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSShowWhenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dotCMSShowWhen]'
@@ -289,9 +290,13 @@ class DotCMSEditableTextComponent {
         if (name !== __DOTCMS_UVE_EVENT__.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {
             return;
         }
-        const { oldInode, inode } = payload;
+        const { oldInode, inode, fieldName } = payload;
         const currentInode = this.contentlet.inode;
-        if (currentInode === oldInode || currentInode === inode) {
+        const matchesInode = currentInode === oldInode || currentInode === inode;
+        // Match the field too: a contentlet's fields all share one inode, so an
+        // inode-only check focuses every editable field on the contentlet (the
+        // last one wins) instead of the one the user clicked.
+        if (matchesInode && fieldName === this.fieldName) {
             this.editorComponent.editor.focus();
             return;
         }
@@ -404,8 +409,8 @@ class DotCMSEditableTextComponent {
     didContentChange(editedContent) {
         return this.content !== editedContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotCMSEditableTextComponent, isStandalone: true, selector: "dotcms-editable-text", inputs: { mode: "mode", format: "format", contentlet: "contentlet", fieldName: "fieldName" }, host: { listeners: { "window:message": "onMessage($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotCMSEditableTextComponent, isStandalone: true, selector: "dotcms-editable-text", inputs: { mode: "mode", format: "format", contentlet: "contentlet", fieldName: "fieldName" }, host: { listeners: { "window:message": "onMessage($event)" } }, providers: [
             {
                 provide: TINYMCE_SCRIPT_SRC,
                 useFactory: () => {
@@ -415,7 +420,7 @@ class DotCMSEditableTextComponent {
             }
         ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isEditMode) {\n    <editor\n        #tinyEditor\n        [init]=\"init\"\n        [initialValue]=\"content\"\n        (onMouseDown)=\"onMouseDown($event)\"\n        (onFocusOut)=\"onFocusOut()\" />\n}\n", styles: [":host ::ng-deep .mce-content-body:not(.mce-edit-focus){outline:2px solid #006ce7;border-radius:4px}\n"], dependencies: [{ kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSEditableTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSEditableTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-editable-text', imports: [EditorComponent], providers: [
                         {
@@ -443,8 +448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }] } });
 
 class DotCodeBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotCodeBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-code-block", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotCodeBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-code-block", ngImport: i0, template: `
         <pre>
             <code>
                 <ng-content />
@@ -452,7 +457,7 @@ class DotCodeBlock {
         </pre>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCodeBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCodeBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-code-block',
@@ -467,14 +472,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }] });
 class DotBlockQuote {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotBlockQuote, isStandalone: true, selector: "dotcms-block-editor-renderer-block-quote", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.1", ngImport: i0, type: DotBlockQuote, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotBlockQuote, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-block-quote',
@@ -499,8 +504,8 @@ class NoComponentProvided {
             border: '1px solid #ed8936'
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NoComponentProvided, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: NoComponentProvided, isStandalone: true, selector: "dotcms-no-component-provided", inputs: { contentType: "contentType" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NoComponentProvided, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: NoComponentProvided, isStandalone: true, selector: "dotcms-no-component-provided", inputs: { contentType: "contentType" }, ngImport: i0, template: `
         <div data-testid="no-component-provided" [style]="style">
             <strong style="color: #c05621">Dev Warning</strong>
             : No component or custom renderer provided for content type
@@ -519,7 +524,7 @@ class NoComponentProvided {
         </div>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NoComponentProvided, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NoComponentProvided, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-no-component-provided',
@@ -550,7 +555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  */
 class DotContentletBlock {
     constructor() {
-        this.$data = computed(() => this.node?.attrs?.['data'], ...(ngDevMode ? [{ debugName: "$data" }] : []));
+        this.$data = computed(() => this.node?.attrs?.['data'], ...(ngDevMode ? [{ debugName: "$data" }] : /* istanbul ignore next */ []));
         this.DOT_CONTENT_NO_DATA_MESSAGE = '[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.';
         this.DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE = (contentType) => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${contentType}. Provide a custom renderer for this content type to fix this error.`;
     }
@@ -568,8 +573,8 @@ class DotContentletBlock {
             console.warn(this.DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotContentletBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-contentlet", inputs: { customRenderers: "customRenderers", node: "node" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotContentletBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-contentlet", inputs: { customRenderers: "customRenderers", node: "node" }, ngImport: i0, template: `
         @if (contentComponent) {
             <ng-container *ngComponentOutlet="contentComponent | async; inputs: { node: node }" />
         } @else if (isDevMode) {
@@ -577,7 +582,7 @@ class DotContentletBlock {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: NoComponentProvided, selector: "dotcms-no-component-provided", inputs: ["contentType"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotContentletBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotContentletBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-contentlet',
@@ -610,8 +615,8 @@ class DotGridBlock {
             ? rawCols
             : [6, 6];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotGridBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotGridBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-grid-block", inputs: { node: "node", customRenderers: "customRenderers" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotGridBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotGridBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-grid-block", inputs: { node: "node", customRenderers: "customRenderers" }, ngImport: i0, template: `
         <div
             data-type="gridBlock"
             class="grid-block"
@@ -633,7 +638,7 @@ class DotGridBlock {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotGridBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotGridBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-grid-block',
@@ -668,7 +673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class DotImageBlock {
     constructor() {
-        this.$srcURL = computed(() => this.attrs?.['src'], ...(ngDevMode ? [{ debugName: "$srcURL" }] : []));
+        this.$srcURL = computed(() => this.attrs?.['src'], ...(ngDevMode ? [{ debugName: "$srcURL" }] : /* istanbul ignore next */ []));
         this.$wrapperStyle = computed(() => {
             const textWrap = this.attrs?.['textWrap'];
             const textAlign = this.attrs?.['textAlign'];
@@ -682,16 +687,16 @@ class DotImageBlock {
                 return { 'text-align': textAlign };
             }
             return {};
-        }, ...(ngDevMode ? [{ debugName: "$wrapperStyle" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "$wrapperStyle" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotImageBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-image", inputs: { attrs: "attrs" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotImageBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-image", inputs: { attrs: "attrs" }, ngImport: i0, template: `
         <figure [style]="$wrapperStyle()">
             <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
         </figure>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotImageBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotImageBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-image',
@@ -708,14 +713,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }] } });
 
 class DotBulletList {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotBulletList, isStandalone: true, selector: "dotcms-block-editor-renderer-bullet-list", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.1", ngImport: i0, type: DotBulletList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotBulletList, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-bullet-list',
@@ -728,14 +733,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }] });
 class DotOrdererList {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotOrdererList, isStandalone: true, selector: "dotcms-block-editor-renderer-ordered-list", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.1", ngImport: i0, type: DotOrdererList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotOrdererList, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-ordered-list',
@@ -748,14 +753,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }] });
 class DotListItem {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotListItem, isStandalone: true, selector: "dotcms-block-editor-renderer-list-item", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.1", ngImport: i0, type: DotListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotListItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-list-item',
@@ -772,39 +777,45 @@ class DotTableBlock {
     constructor() {
         this.blockEditorItem = DotCMSBlockEditorItemComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 }
-                                    " />
-                            </th>
-                        }
-                    </tr>
-                }
-            </thead>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotTableBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-table", inputs: { content: "content", attrs: "attrs" }, ngImport: i0, template: `
+        <table
+            [attr.aria-label]="attrs?.['ariaLabel'] || null"
+            [attr.aria-labelledby]="attrs?.['ariaLabelledby'] || null">
+            @if (attrs?.['caption']) {
+                <caption>{{ attrs?.['caption'] }}</caption>
+            }
             <tbody>
-                @for (rowNode of content?.slice(1); track rowNode.type) {
+                @for (rowNode of content; track $index) {
                     <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 }
-                                    " />
-                            </td>
+                        @for (cellNode of rowNode.content; track $index) {
+                            <!--
+                                Cell type — not row index — decides th vs td. Matches the
+                                VTL renderer (storyblock/render.vtl) so headless markup
+                                stays consistent with server-rendered pages.
+                            -->
+                            @if (cellNode.type === 'tableHeader') {
+                                <th
+                                    [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                    [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1"
+                                    [attr.scope]="cellNode.attrs?.['scope'] || null">
+                                    <ng-container
+                                        *ngComponentOutlet="
+                                            blockEditorItem;
+                                            inputs: { content: cellNode.content }
+                                        " />
+                                </th>
+                            } @else {
+                                <td
+                                    [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                    [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                    <ng-container
+                                        *ngComponentOutlet="
+                                            blockEditorItem;
+                                            inputs: { content: cellNode.content }
+                                        " />
+                                </td>
+                            }
                         }
                     </tr>
                 }
@@ -812,43 +823,49 @@ class DotTableBlock {
         </table>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotTableBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotTableBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-table',
                     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 }
-                                    " />
-                            </th>
-                        }
-                    </tr>
-                }
-            </thead>
+        <table
+            [attr.aria-label]="attrs?.['ariaLabel'] || null"
+            [attr.aria-labelledby]="attrs?.['ariaLabelledby'] || null">
+            @if (attrs?.['caption']) {
+                <caption>{{ attrs?.['caption'] }}</caption>
+            }
             <tbody>
-                @for (rowNode of content?.slice(1); track rowNode.type) {
+                @for (rowNode of content; track $index) {
                     <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 }
-                                    " />
-                            </td>
+                        @for (cellNode of rowNode.content; track $index) {
+                            <!--
+                                Cell type — not row index — decides th vs td. Matches the
+                                VTL renderer (storyblock/render.vtl) so headless markup
+                                stays consistent with server-rendered pages.
+                            -->
+                            @if (cellNode.type === 'tableHeader') {
+                                <th
+                                    [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                    [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1"
+                                    [attr.scope]="cellNode.attrs?.['scope'] || null">
+                                    <ng-container
+                                        *ngComponentOutlet="
+                                            blockEditorItem;
+                                            inputs: { content: cellNode.content }
+                                        " />
+                                </th>
+                            } @else {
+                                <td
+                                    [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                    [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                    <ng-container
+                                        *ngComponentOutlet="
+                                            blockEditorItem;
+                                            inputs: { content: cellNode.content }
+                                        " />
+                                </td>
+                            }
                         }
                     </tr>
                 }
@@ -858,17 +875,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], propDecorators: { content: [{
                 type: Input
+            }], attrs: [{
+                type: Input
             }] } });
 
 class DotParagraphBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotParagraphBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-paragraph", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.1", ngImport: i0, type: DotParagraphBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotParagraphBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-paragraph',
@@ -882,15 +901,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 class DotHeadingBlock {
     constructor() {
-        this.level = input.required(...(ngDevMode ? [{ debugName: "level" }] : []));
+        this.level = input.required(...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
         this.$normalizedLevel = computed(() => {
             return this.level() != null && typeof this.level() === 'number'
                 ? String(this.level())
                 : (this.level() ?? '1');
-        }, ...(ngDevMode ? [{ debugName: "$normalizedLevel" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "$normalizedLevel" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotHeadingBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-heading", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotHeadingBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-heading", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @switch ($normalizedLevel()) {
             @case ('1') {
                 <h1>
@@ -934,7 +953,7 @@ class DotHeadingBlock {
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotHeadingBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotHeadingBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-heading',
@@ -989,7 +1008,7 @@ class DotTextBlock {
     constructor() {
         this.marks = [];
         this.text = '';
-        this.$remainingMarks = computed(() => this.marks?.slice(1), ...(ngDevMode ? [{ debugName: "$remainingMarks" }] : []));
+        this.$remainingMarks = computed(() => this.marks?.slice(1), ...(ngDevMode ? [{ debugName: "$remainingMarks" }] : /* istanbul ignore next */ []));
         this.$currentAttrs = computed(() => {
             const attrs = { ...(this.marks?.[0]?.attrs || {}) };
             if (attrs['class']) {
@@ -997,10 +1016,10 @@ class DotTextBlock {
                 delete attrs['class'];
             }
             return attrs;
-        }, ...(ngDevMode ? [{ debugName: "$currentAttrs" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "$currentAttrs" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotTextBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-text", inputs: { marks: "marks", text: "text" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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
@@ -1048,7 +1067,7 @@ class DotTextBlock {
         }
     `, 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: "21.2.1", ngImport: i0, type: DotTextBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotTextBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-text',
@@ -1122,8 +1141,8 @@ class DotUnknownBlockComponent {
     get isEditMode() {
         return getUVEState()?.mode === UVE_MODE.EDIT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotUnknownBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotUnknownBlockComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-unknown", inputs: { node: "node" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotUnknownBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotUnknownBlockComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-unknown", inputs: { node: "node" }, ngImport: i0, template: `
         @if (isEditMode) {
             <div [style]="style" data-testid="unknown-block-type">
                 <strong style="color: #c53030">Warning:</strong>
@@ -1141,7 +1160,7 @@ class DotUnknownBlockComponent {
         }
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotUnknownBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotUnknownBlockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-unknown',
@@ -1169,11 +1188,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 
 class DotVideoBlock {
     constructor() {
-        this.$srcURL = computed(() => this.attrs?.['src'], ...(ngDevMode ? [{ debugName: "$srcURL" }] : []));
-        this.$posterURL = computed(() => this.attrs?.['data']?.['thumbnail'], ...(ngDevMode ? [{ debugName: "$posterURL" }] : []));
+        this.$srcURL = computed(() => this.attrs?.['src'], ...(ngDevMode ? [{ debugName: "$srcURL" }] : /* istanbul ignore next */ []));
+        this.$posterURL = computed(() => this.attrs?.['data']?.['thumbnail'], ...(ngDevMode ? [{ debugName: "$posterURL" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: DotVideoBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-video", inputs: { attrs: "attrs" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotVideoBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-video", inputs: { attrs: "attrs" }, ngImport: i0, template: `
         <video
             [controls]="true"
             preload="metadata"
@@ -1188,7 +1207,7 @@ class DotVideoBlock {
         </video>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotVideoBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotVideoBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-video',
@@ -1216,10 +1235,10 @@ class DotCMSBlockEditorItemComponent {
     constructor() {
         this.BLOCKS = BlockEditorDefaultBlocks;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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            \" />\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.GRID_BLOCK) {\n                <dotcms-block-editor-renderer-grid-block\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @default {\n                <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n            }\n        }\n    }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n    <ng-container *ngComponentOutlet=\"customRender | async; inputs: { node: node }\" />\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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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: DotGridBlock, selector: "dotcms-block-editor-renderer-grid-block", inputs: ["node", "customRenderers"] }, { kind: "component", type: DotContentletBlock, selector: "dotcms-block-editor-renderer-contentlet", inputs: ["customRenderers", "node"] }, { kind: "component", type: DotUnknownBlockComponent, selector: "dotcms-block-editor-renderer-unknown", inputs: ["node"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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            \" />\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\" [attrs]=\"node.attrs\" />\n            }\n\n            @case (BLOCKS.GRID_BLOCK) {\n                <dotcms-block-editor-renderer-grid-block\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @default {\n                <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n            }\n        }\n    }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n    <ng-container *ngComponentOutlet=\"customRender | async; inputs: { node: node }\" />\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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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", "attrs"] }, { kind: "component", type: DotGridBlock, selector: "dotcms-block-editor-renderer-grid-block", inputs: ["node", "customRenderers"] }, { kind: "component", type: DotContentletBlock, selector: "dotcms-block-editor-renderer-contentlet", inputs: ["customRenderers", "node"] }, { kind: "component", type: DotUnknownBlockComponent, selector: "dotcms-block-editor-renderer-unknown", inputs: ["node"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-block-editor-renderer-block', imports: [
                         NgTemplateOutlet,
@@ -1239,7 +1258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         DotGridBlock,
                         DotContentletBlock,
                         DotUnknownBlockComponent
-                    ], 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            \" />\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.GRID_BLOCK) {\n                <dotcms-block-editor-renderer-grid-block\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @default {\n                <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n            }\n        }\n    }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n    <ng-container *ngComponentOutlet=\"customRender | async; inputs: { node: node }\" />\n</ng-template>\n" }]
+                    ], 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            \" />\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\" [attrs]=\"node.attrs\" />\n            }\n\n            @case (BLOCKS.GRID_BLOCK) {\n                <dotcms-block-editor-renderer-grid-block\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @default {\n                <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n            }\n        }\n    }\n}\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n    <ng-container *ngComponentOutlet=\"customRender | async; inputs: { node: node }\" />\n</ng-template>\n" }]
         }], propDecorators: { content: [{
                 type: Input
             }], customRenderers: [{
@@ -1261,11 +1280,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  *   [customRenderers]="myCustomRenderers">
  * </dotcms-block-editor-renderer>
  * ```
+ *
+ * @deprecated Use {@link DotCMSBlockEditorRendererNativeComponent}
+ * (`<dotcms-block-editor-renderer-native>`) for accessible, semantic DOM output.
+ * This component wraps every semantic tag in a custom element (e.g. a dispatcher
+ * element sits between `<ul>` and its `<li>` children), which breaks the
+ * `list → listitem` relationship required by the HTML spec and assistive technology.
+ * The native renderer keeps the identical public input API — migration is just
+ * swapping the tag and import. This component is retained for backward compatibility
+ * and will be removed in a future major version.
  */
 class DotCMSBlockEditorRendererComponent {
     constructor() {
-        this.$blockEditorState = signal({ error: null }, ...(ngDevMode ? [{ debugName: "$blockEditorState" }] : []));
-        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT, ...(ngDevMode ? [{ debugName: "$isInEditMode" }] : []));
+        this.$blockEditorState = signal({ error: null }, ...(ngDevMode ? [{ debugName: "$blockEditorState" }] : /* istanbul ignore next */ []));
+        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT, ...(ngDevMode ? [{ debugName: "$isInEditMode" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const state = isValidBlocks(this.blocks);
@@ -1274,10 +1302,10 @@ class DotCMSBlockEditorRendererComponent {
         }
         this.$blockEditorState.set(isValidBlocks(this.blocks));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotCMSBlockEditorRendererComponent, isStandalone: true, selector: "dotcms-block-editor-renderer", inputs: { blocks: "blocks", customRenderers: "customRenderers", class: "class", style: "style" }, 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    <div [class]=\"class\" [style]=\"style\">\n        <dotcms-block-editor-renderer-block\n            [content]=\"blocks.content\"\n            [customRenderers]=\"customRenderers\" />\n    </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotCMSBlockEditorRendererComponent, isStandalone: true, selector: "dotcms-block-editor-renderer", inputs: { blocks: "blocks", customRenderers: "customRenderers", class: "class", style: "style" }, 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    <div [class]=\"class\" [style]=\"style\">\n        <dotcms-block-editor-renderer-block\n            [content]=\"blocks.content\"\n            [customRenderers]=\"customRenderers\" />\n    </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-block-editor-renderer', 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    <div [class]=\"class\" [style]=\"style\">\n        <dotcms-block-editor-renderer-block\n            [content]=\"blocks.content\"\n            [customRenderers]=\"customRenderers\" />\n    </div>\n}\n" }]
         }], propDecorators: { blocks: [{
@@ -1290,6 +1318,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Internal semantic block components for the accessible Block Editor renderer.
+ *
+ * Each component uses an **attribute selector** so the host element *is* the real
+ * semantic tag (`<ul>`, `<ol>`, `<li>`, ...). The template is just `<ng-content />`,
+ * so no extra wrapper element is added to the DOM and the
+ * `list → listitem` relationship required by the HTML spec and assistive
+ * technology is preserved.
+ *
+ * These are not exported from the SDK; they are an implementation detail of
+ * {@link DotCMSBlockEditorRendererNativeComponent}.
+ *
+ * @internal
+ */
+class DotSemanticBulletList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotSemanticBulletList, isStandalone: true, selector: "ul[dotBulletList]", ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticBulletList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ul[dotBulletList]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+class DotSemanticOrderedList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticOrderedList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotSemanticOrderedList, isStandalone: true, selector: "ol[dotOrderedList]", ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticOrderedList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol[dotOrderedList]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+class DotSemanticListItem {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotSemanticListItem, isStandalone: true, selector: "li[dotListItem]", ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticListItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[dotListItem]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+class DotSemanticParagraph {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticParagraph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotSemanticParagraph, isStandalone: true, selector: "p[dotParagraph]", ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticParagraph, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p[dotParagraph]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+class DotSemanticBlockQuote {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotSemanticBlockQuote, isStandalone: true, selector: "blockquote[dotBlockQuote]", ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticBlockQuote, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'blockquote[dotBlockQuote]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+class DotSemanticCodeBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DotSemanticCodeBlock, isStandalone: true, selector: "pre[dotCodeBlock]", ngImport: i0, template: `
+        <code><ng-content /></code>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotSemanticCodeBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pre[dotCodeBlock]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <code><ng-content /></code>
+    `
+                }]
+        }] });
+
+/**
+ * An accessible component that renders content from DotCMS's Block Editor field.
+ *
+ * This is the semantic-DOM successor to {@link DotCMSBlockEditorRendererComponent}.
+ * It emits clean semantic HTML — `<ul><li><p>…</p></li></ul>` — with no custom
+ * wrapper elements between semantic tags, so the `list → listitem` relationship
+ * required by the HTML spec and assistive technology is preserved. The recursive
+ * dispatch is performed with `ng-template` outlets, whose host `<ng-container>`s
+ * render as HTML comment nodes (invisible to the accessibility tree).
+ *
+ * It exposes the **identical public input API** and the same `customRenderers`
+ * contract as the deprecated renderer, so migration is just swapping the tag and
+ * import.
+ *
+ * For more information about Block Editor, see {@link https://dev.dotcms.com/docs/block-editor}
+ *
+ * @example
+ * ```html
+ * <dotcms-block-editor-renderer-native
+ *   [blocks]="myBlockEditorContent"
+ *   [customRenderers]="myCustomRenderers">
+ * </dotcms-block-editor-renderer-native>
+ * ```
+ */
+class DotCMSBlockEditorRendererNativeComponent {
+    constructor() {
+        /** The Block Editor `doc` node to render. */
+        this.blocks = input(...(ngDevMode ? [undefined, { debugName: "blocks" }] : /* istanbul ignore next */ []));
+        /** Map of `node.type` → component to override the built-in render path. */
+        this.customRenderers = input(undefined, ...(ngDevMode ? [{ debugName: "customRenderers" }] : /* istanbul ignore next */ []));
+        /**
+         * CSS class on the wrapper element. Aliased as `class` so consumers can
+         * pass `[class]="…"` like a normal Angular class binding.
+         */
+        this.cssClass = input(undefined, { ...(ngDevMode ? { debugName: "cssClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        /** Inline style on the wrapper element. */
+        this.style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        this.$blockEditorState = signal({ error: null }, ...(ngDevMode ? [{ debugName: "$blockEditorState" }] : /* istanbul ignore next */ []));
+        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT, ...(ngDevMode ? [{ debugName: "$isInEditMode" }] : /* istanbul ignore next */ []));
+        this.BLOCKS = BlockEditorDefaultBlocks;
+    }
+    ngOnInit() {
+        // `isValidBlocks` declares `blocks: BlockEditorNode` but its first guard
+        // handles `undefined` — the cast lines up the types without changing the
+        // published `@dotcms/uve` signature.
+        const state = isValidBlocks(this.blocks());
+        if (state.error) {
+            console.error('Error in dotcms-block-editor-renderer-native: ', state.error);
+        }
+        this.$blockEditorState.set(state);
+    }
+    /**
+     * Normalizes a heading `level` attribute (which may be a number such as `6`
+     * or a string such as `'6'`) to a string for use in the heading `@switch`.
+     * Returns `''` for missing or out-of-range levels so the template falls
+     * through to the safe `@default` case (`<h2>`).
+     */
+    asLevel(level) {
+        const normalized = level != null ? String(level) : '';
+        return /^[1-6]$/.test(normalized) ? normalized : '';
+    }
+    /** The marks after the current (outermost) one — used to recurse inward. */
+    restMarks(marks) {
+        return marks?.slice(1) ?? [];
+    }
+    /** The attributes of the current (outermost) mark. */
+    markAttrs(marks) {
+        return marks?.[0]?.attrs ?? {};
+    }
+    /**
+     * Wrapper style for a `dotImage` `<figure>`, derived from the node's
+     * `textWrap` (float left/right) or `textAlign` attribute.
+     */
+    imageStyle(attrs) {
+        const textWrap = attrs?.['textWrap'];
+        const textAlign = attrs?.['textAlign'];
+        if (textWrap === 'left') {
+            return { float: 'left', width: '50%', margin: '0 1rem 1rem 0' };
+        }
+        if (textWrap === 'right') {
+            return { float: 'right', width: '50%', margin: '0 0 1rem 1rem' };
+        }
+        if (textAlign) {
+            return { 'text-align': textAlign };
+        }
+        return {};
+    }
+    /** Poster URL for a `dotVideo` `<video>` (from `attrs.data.thumbnail`). */
+    videoPoster(attrs) {
+        return attrs?.['data']?.['thumbnail'];
+    }
+    /**
+     * The column span (1–12) for a grid column. Falls back to `6` for malformed
+     * `columns` attrs or for an out-of-range column index, matching the legacy
+     * renderer.
+     */
+    columnSpan(attrs, index) {
+        const rawCols = Array.isArray(attrs?.['columns']) ? attrs['columns'] : [6, 6];
+        const valid = rawCols.length === 2 &&
+            rawCols.every((v) => typeof v === 'number' && Number.isFinite(v));
+        const span = valid ? rawCols[index] : 6;
+        return typeof span === 'number' ? span : 6;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotCMSBlockEditorRendererNativeComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-native", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null }, customRenderers: { classPropertyName: "customRenderers", publicName: "customRenderers", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, 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    <div [class]=\"cssClass()\" [style]=\"style()\">\n        <ng-container *ngTemplateOutlet=\"nodeList; context: { $implicit: blocks()?.content }\" />\n    </div>\n}\n\n<!-- Renders a list of nodes by dispatching each one. -->\n<ng-template #nodeList let-content>\n    @for (node of content; track node) {\n        <ng-container *ngTemplateOutlet=\"dispatch; context: { $implicit: node }\" />\n    }\n</ng-template>\n\n<!--\n    Dispatches a single node to its semantic tag. The host ng-container of each\n    ngTemplateOutlet renders as an HTML comment node, so a list item stays a true\n    DOM child of its list element \u2014 the property that makes this AT-proof.\n-->\n<ng-template #dispatch let-node>\n    @if (customRenderers()?.[node.type]) {\n        <ng-container\n            *ngTemplateOutlet=\"\n                customRender;\n                context: { customRender: customRenderers()?.[node.type], node: node }\n            \" />\n    } @else {\n        @switch (node.type) {\n            @case (BLOCKS.PARAGRAPH) {\n                <p dotParagraph [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </p>\n            }\n\n            @case (BLOCKS.TEXT) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        textRun;\n                        context: { marks: node.marks, text: node.text || '' }\n                    \" />\n            }\n\n            @case (BLOCKS.HEADING) {\n                @switch (asLevel(node.attrs?.['level'])) {\n                    @case ('1') {\n                        <h1 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h1>\n                    }\n                    @case ('2') {\n                        <h2 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h2>\n                    }\n                    @case ('3') {\n                        <h3 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h3>\n                    }\n                    @case ('4') {\n                        <h4 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h4>\n                    }\n                    @case ('5') {\n                        <h5 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h5>\n                    }\n                    @case ('6') {\n                        <h6 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h6>\n                    }\n                    @default {\n                        <!--\n                            Unknown level: fall back to <h2>, not <h1>. An\n                            unexpected <h1> in an article tanks the heading\n                            outline that assistive technology relies on, and\n                            articles typically already have a page <h1>.\n                        -->\n                        <h2 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h2>\n                    }\n                }\n            }\n\n            @case (BLOCKS.BULLET_LIST) {\n                <ul dotBulletList>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </ul>\n            }\n\n            @case (BLOCKS.ORDERED_LIST) {\n                <ol dotOrderedList>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </ol>\n            }\n\n            @case (BLOCKS.LIST_ITEM) {\n                <li dotListItem>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </li>\n            }\n\n            @case (BLOCKS.BLOCK_QUOTE) {\n                <blockquote dotBlockQuote>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </blockquote>\n            }\n\n            @case (BLOCKS.CODE_BLOCK) {\n                <pre dotCodeBlock>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" /></pre>\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                <figure [style]=\"imageStyle(node.attrs)\">\n                    <img\n                        [alt]=\"node.attrs?.['alt']\"\n                        [src]=\"node.attrs?.['src']\"\n                        style=\"max-width: 100%; height: auto\" />\n                </figure>\n            }\n\n            @case (BLOCKS.DOT_VIDEO) {\n                <video\n                    [controls]=\"true\"\n                    preload=\"metadata\"\n                    [poster]=\"videoPoster(node.attrs)\"\n                    [width]=\"node.attrs?.['width']\"\n                    [height]=\"node.attrs?.['height']\">\n                    <track default kind=\"captions\" srclang=\"en\" />\n                    <source [src]=\"node.attrs?.['src']\" [type]=\"node.attrs?.['mimeType']\" />\n                    Your browser does not support the\n                    <code>video</code>\n                    element.\n                </video>\n            }\n\n            @case (BLOCKS.TABLE) {\n                <table>\n                    <thead>\n                        @for (rowNode of node.content?.slice(0, 1); track $index) {\n                            <tr>\n                                @for (cellNode of rowNode.content; track $index) {\n                                    <th\n                                        [attr.colspan]=\"cellNode.attrs?.['colspan'] || 1\"\n                                        [attr.rowspan]=\"cellNode.attrs?.['rowspan'] || 1\">\n                                        <ng-container\n                                            *ngTemplateOutlet=\"\n                                                nodeList;\n                                                context: { $implicit: cellNode.content }\n                                            \" />\n                                    </th>\n                                }\n                            </tr>\n                        }\n                    </thead>\n                    <tbody>\n                        @for (rowNode of node.content?.slice(1); track $index) {\n                            <tr>\n                                @for (cellNode of rowNode.content; track $index) {\n                                    <td\n                                        [attr.colspan]=\"cellNode.attrs?.['colspan'] || 1\"\n                                        [attr.rowspan]=\"cellNode.attrs?.['rowspan'] || 1\">\n                                        <ng-container\n                                            *ngTemplateOutlet=\"\n                                                nodeList;\n                                                context: { $implicit: cellNode.content }\n                                            \" />\n                                    </td>\n                                }\n                            </tr>\n                        }\n                    </tbody>\n                </table>\n            }\n\n            @case (BLOCKS.GRID_BLOCK) {\n                <div\n                    data-type=\"gridBlock\"\n                    class=\"grid-block\"\n                    style=\"display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem\">\n                    @for (column of node.content; track $index) {\n                        <div\n                            data-type=\"gridColumn\"\n                            class=\"grid-block__column\"\n                            [style.grid-column]=\"'span ' + columnSpan(node.attrs, $index)\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: column.content }\n                                \" />\n                        </div>\n                    }\n                </div>\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers()\" />\n            }\n\n            @default {\n                <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n            }\n        }\n    }\n</ng-template>\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n    <ng-container *ngComponentOutlet=\"customRender | async; inputs: { node: node }\" />\n</ng-template>\n\n<!--\n    Renders a text node and its marks as native inline elements (<strong>, <u>,\n    <em>, <a>, ...) with no wrapper element. Recurses through itself (rendered as a\n    comment node) one mark at a time, so stacked marks nest directly:\n    <u><strong>text</strong></u>.\n-->\n<ng-template #textRun let-marks=\"marks\" let-text=\"text\">\n    @switch (marks?.[0]?.type) {\n        @case ('link') {\n            @if (markAttrs(marks)['href']) {\n                <a\n                    [attr.href]=\"markAttrs(marks)['href']\"\n                    [attr.target]=\"markAttrs(marks)['target'] || null\"\n                    [attr.title]=\"markAttrs(marks)['title'] || null\"\n                    [attr.aria-label]=\"markAttrs(marks)['aria-label'] || null\"\n                    [attr.rel]=\"\n                        markAttrs(marks)['rel'] ||\n                        (markAttrs(marks)['target'] === '_blank' ? 'noopener noreferrer' : null)\n                    \"\n                    [class]=\"markAttrs(marks)['class'] || null\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            textRun;\n                            context: { marks: restMarks(marks), text: text }\n                        \" />\n                </a>\n            } @else {\n                <!--\n                    Malformed link mark with no href: a hrefless <a> isn't a\n                    link to assistive tech (no role, not focusable). Skip the\n                    element and recurse \u2014 any remaining marks (bold, etc.)\n                    still render around the text.\n                -->\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            }\n        }\n        @case ('bold') {\n            <strong>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </strong>\n        }\n        @case ('underline') {\n            <u>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </u>\n        }\n        @case ('italic') {\n            <em>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </em>\n        }\n        @case ('strike') {\n            <s>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </s>\n        }\n        @case ('superscript') {\n            <sup>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </sup>\n        }\n        @case ('subscript') {\n            <sub>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </sub>\n        }\n        @default {\n            @if (marks?.length) {\n                <!-- Unknown mark type: skip it but keep rendering any marks beneath. -->\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            } @else {\n                {{ text }}\n            }\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: DotSemanticParagraph, selector: "p[dotParagraph]" }, { kind: "component", type: DotSemanticBulletList, selector: "ul[dotBulletList]" }, { kind: "component", type: DotSemanticOrderedList, selector: "ol[dotOrderedList]" }, { kind: "component", type: DotSemanticListItem, selector: "li[dotListItem]" }, { kind: "component", type: DotSemanticBlockQuote, selector: "blockquote[dotBlockQuote]" }, { kind: "component", type: DotSemanticCodeBlock, selector: "pre[dotCodeBlock]" }, { kind: "component", type: DotContentletBlock, selector: "dotcms-block-editor-renderer-contentlet", inputs: ["customRenderers", "node"] }, { kind: "component", type: DotUnknownBlockComponent, selector: "dotcms-block-editor-renderer-unknown", inputs: ["node"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dotcms-block-editor-renderer-native', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        AsyncPipe,
+                        DotSemanticParagraph,
+                        DotSemanticBulletList,
+                        DotSemanticOrderedList,
+                        DotSemanticListItem,
+                        DotSemanticBlockQuote,
+                        DotSemanticCodeBlock,
+                        DotContentletBlock,
+                        DotUnknownBlockComponent
+                    ], template: "@if ($blockEditorState().error && $isInEditMode()) {\n    <div data-testid=\"invalid-blocks-message\">\n        {{ $blockEditorState().error }}\n    </div>\n} @else if (!$blockEditorState().error) {\n    <div [class]=\"cssClass()\" [style]=\"style()\">\n        <ng-container *ngTemplateOutlet=\"nodeList; context: { $implicit: blocks()?.content }\" />\n    </div>\n}\n\n<!-- Renders a list of nodes by dispatching each one. -->\n<ng-template #nodeList let-content>\n    @for (node of content; track node) {\n        <ng-container *ngTemplateOutlet=\"dispatch; context: { $implicit: node }\" />\n    }\n</ng-template>\n\n<!--\n    Dispatches a single node to its semantic tag. The host ng-container of each\n    ngTemplateOutlet renders as an HTML comment node, so a list item stays a true\n    DOM child of its list element \u2014 the property that makes this AT-proof.\n-->\n<ng-template #dispatch let-node>\n    @if (customRenderers()?.[node.type]) {\n        <ng-container\n            *ngTemplateOutlet=\"\n                customRender;\n                context: { customRender: customRenderers()?.[node.type], node: node }\n            \" />\n    } @else {\n        @switch (node.type) {\n            @case (BLOCKS.PARAGRAPH) {\n                <p dotParagraph [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </p>\n            }\n\n            @case (BLOCKS.TEXT) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        textRun;\n                        context: { marks: node.marks, text: node.text || '' }\n                    \" />\n            }\n\n            @case (BLOCKS.HEADING) {\n                @switch (asLevel(node.attrs?.['level'])) {\n                    @case ('1') {\n                        <h1 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h1>\n                    }\n                    @case ('2') {\n                        <h2 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h2>\n                    }\n                    @case ('3') {\n                        <h3 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h3>\n                    }\n                    @case ('4') {\n                        <h4 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h4>\n                    }\n                    @case ('5') {\n                        <h5 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h5>\n                    }\n                    @case ('6') {\n                        <h6 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h6>\n                    }\n                    @default {\n                        <!--\n                            Unknown level: fall back to <h2>, not <h1>. An\n                            unexpected <h1> in an article tanks the heading\n                            outline that assistive technology relies on, and\n                            articles typically already have a page <h1>.\n                        -->\n                        <h2 [style.text-align]=\"node.attrs?.['textAlign'] || null\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: node.content }\n                                \" />\n                        </h2>\n                    }\n                }\n            }\n\n            @case (BLOCKS.BULLET_LIST) {\n                <ul dotBulletList>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </ul>\n            }\n\n            @case (BLOCKS.ORDERED_LIST) {\n                <ol dotOrderedList>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </ol>\n            }\n\n            @case (BLOCKS.LIST_ITEM) {\n                <li dotListItem>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </li>\n            }\n\n            @case (BLOCKS.BLOCK_QUOTE) {\n                <blockquote dotBlockQuote>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" />\n                </blockquote>\n            }\n\n            @case (BLOCKS.CODE_BLOCK) {\n                <pre dotCodeBlock>\n                    <ng-container\n                        *ngTemplateOutlet=\"nodeList; context: { $implicit: node.content }\" /></pre>\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                <figure [style]=\"imageStyle(node.attrs)\">\n                    <img\n                        [alt]=\"node.attrs?.['alt']\"\n                        [src]=\"node.attrs?.['src']\"\n                        style=\"max-width: 100%; height: auto\" />\n                </figure>\n            }\n\n            @case (BLOCKS.DOT_VIDEO) {\n                <video\n                    [controls]=\"true\"\n                    preload=\"metadata\"\n                    [poster]=\"videoPoster(node.attrs)\"\n                    [width]=\"node.attrs?.['width']\"\n                    [height]=\"node.attrs?.['height']\">\n                    <track default kind=\"captions\" srclang=\"en\" />\n                    <source [src]=\"node.attrs?.['src']\" [type]=\"node.attrs?.['mimeType']\" />\n                    Your browser does not support the\n                    <code>video</code>\n                    element.\n                </video>\n            }\n\n            @case (BLOCKS.TABLE) {\n                <table>\n                    <thead>\n                        @for (rowNode of node.content?.slice(0, 1); track $index) {\n                            <tr>\n                                @for (cellNode of rowNode.content; track $index) {\n                                    <th\n                                        [attr.colspan]=\"cellNode.attrs?.['colspan'] || 1\"\n                                        [attr.rowspan]=\"cellNode.attrs?.['rowspan'] || 1\">\n                                        <ng-container\n                                            *ngTemplateOutlet=\"\n                                                nodeList;\n                                                context: { $implicit: cellNode.content }\n                                            \" />\n                                    </th>\n                                }\n                            </tr>\n                        }\n                    </thead>\n                    <tbody>\n                        @for (rowNode of node.content?.slice(1); track $index) {\n                            <tr>\n                                @for (cellNode of rowNode.content; track $index) {\n                                    <td\n                                        [attr.colspan]=\"cellNode.attrs?.['colspan'] || 1\"\n                                        [attr.rowspan]=\"cellNode.attrs?.['rowspan'] || 1\">\n                                        <ng-container\n                                            *ngTemplateOutlet=\"\n                                                nodeList;\n                                                context: { $implicit: cellNode.content }\n                                            \" />\n                                    </td>\n                                }\n                            </tr>\n                        }\n                    </tbody>\n                </table>\n            }\n\n            @case (BLOCKS.GRID_BLOCK) {\n                <div\n                    data-type=\"gridBlock\"\n                    class=\"grid-block\"\n                    style=\"display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem\">\n                    @for (column of node.content; track $index) {\n                        <div\n                            data-type=\"gridColumn\"\n                            class=\"grid-block__column\"\n                            [style.grid-column]=\"'span ' + columnSpan(node.attrs, $index)\">\n                            <ng-container\n                                *ngTemplateOutlet=\"\n                                    nodeList;\n                                    context: { $implicit: column.content }\n                                \" />\n                        </div>\n                    }\n                </div>\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [node]=\"node\"\n                    [customRenderers]=\"customRenderers()\" />\n            }\n\n            @default {\n                <dotcms-block-editor-renderer-unknown [node]=\"node\" />\n            }\n        }\n    }\n</ng-template>\n\n<ng-template #customRender let-customRender=\"customRender\" let-node=\"node\">\n    <ng-container *ngComponentOutlet=\"customRender | async; inputs: { node: node }\" />\n</ng-template>\n\n<!--\n    Renders a text node and its marks as native inline elements (<strong>, <u>,\n    <em>, <a>, ...) with no wrapper element. Recurses through itself (rendered as a\n    comment node) one mark at a time, so stacked marks nest directly:\n    <u><strong>text</strong></u>.\n-->\n<ng-template #textRun let-marks=\"marks\" let-text=\"text\">\n    @switch (marks?.[0]?.type) {\n        @case ('link') {\n            @if (markAttrs(marks)['href']) {\n                <a\n                    [attr.href]=\"markAttrs(marks)['href']\"\n                    [attr.target]=\"markAttrs(marks)['target'] || null\"\n                    [attr.title]=\"markAttrs(marks)['title'] || null\"\n                    [attr.aria-label]=\"markAttrs(marks)['aria-label'] || null\"\n                    [attr.rel]=\"\n                        markAttrs(marks)['rel'] ||\n                        (markAttrs(marks)['target'] === '_blank' ? 'noopener noreferrer' : null)\n                    \"\n                    [class]=\"markAttrs(marks)['class'] || null\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            textRun;\n                            context: { marks: restMarks(marks), text: text }\n                        \" />\n                </a>\n            } @else {\n                <!--\n                    Malformed link mark with no href: a hrefless <a> isn't a\n                    link to assistive tech (no role, not focusable). Skip the\n                    element and recurse \u2014 any remaining marks (bold, etc.)\n                    still render around the text.\n                -->\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            }\n        }\n        @case ('bold') {\n            <strong>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </strong>\n        }\n        @case ('underline') {\n            <u>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </u>\n        }\n        @case ('italic') {\n            <em>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </em>\n        }\n        @case ('strike') {\n            <s>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </s>\n        }\n        @case ('superscript') {\n            <sup>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </sup>\n        }\n        @case ('subscript') {\n            <sub>\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            </sub>\n        }\n        @default {\n            @if (marks?.length) {\n                <!-- Unknown mark type: skip it but keep rendering any marks beneath. -->\n                <ng-container\n                    *ngTemplateOutlet=\"textRun; context: { marks: restMarks(marks), text: text }\" />\n            } @else {\n                {{ text }}\n            }\n        }\n    }\n</ng-template>\n" }]
+        }], propDecorators: { blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }], customRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRenderers", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
+
 /**
  * @description This component is used to display a message when a page is missing the required `layout.body` property.
  * @internal
@@ -1299,8 +1561,8 @@ class PageErrorMessageComponent {
     ngOnInit() {
         console.warn('Missing required layout.body property in page');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: PageErrorMessageComponent, isStandalone: true, selector: "dotcms-page-error-message", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: PageErrorMessageComponent, isStandalone: true, selector: "dotcms-page-error-message", ngImport: i0, template: `
         <div
             data-testid="error-message"
             style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 4px;">
@@ -1317,7 +1579,7 @@ class PageErrorMessageComponent {
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageErrorMessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-page-error-message',
@@ -1356,7 +1618,23 @@ const EMPTY_DOTCMS_PAGE_STORE = {
  */
 class DotCMSStore {
     constructor() {
-        this.$store = signal(EMPTY_DOTCMS_PAGE_STORE, ...(ngDevMode ? [{ debugName: "$store" }] : []));
+        this.$store = signal(EMPTY_DOTCMS_PAGE_STORE, ...(ngDevMode ? [{ debugName: "$store" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Get whether DotCMS Analytics is active on the page. Used in
+         * live mode to decide if the minimal contentlet attributes Analytics needs
+         * should be kept.
+         *
+         * Analytics may initialize after the page renders, so we track its `ready`
+         * event as a stream and project it into a signal. `fromEvent` registers via
+         * zone-patched `addEventListener`, so change detection is scheduled without
+         * any manual `NgZone` handling.
+         * @readonly
+         * @type {Signal<boolean>}
+         * @memberof DotCMSStore
+         */
+        this.$isAnalyticsActive = typeof window === 'undefined'
+            ? signal(false)
+            : toSignal(fromEvent(window, ANALYTICS_READY_EVENT).pipe(map(() => isDotAnalyticsActive())), { initialValue: isDotAnalyticsActive() });
         /**
          * @description Get if the current context is in development mode
          * @readonly
@@ -1369,7 +1647,7 @@ class DotCMSStore {
                 return uveState?.mode === UVE_MODE.EDIT;
             }
             return this.$store()?.mode === DEVELOPMENT_MODE;
-        }, ...(ngDevMode ? [{ debugName: "$isDevMode" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "$isDevMode" }] : /* istanbul ignore next */ []));
     }
     /**
      * @description Get the store
@@ -1388,10 +1666,10 @@ class DotCMSStore {
     setStore(store) {
         this.$store.set(store);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSStore, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSStore, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1418,8 +1696,8 @@ class ContainerNotFoundComponent {
             console.error(`Container with identifier ${this.identifier} not found`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContainerNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ContainerNotFoundComponent, isStandalone: true, selector: "dotcms-container-not-found", inputs: { identifier: "identifier" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContainerNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContainerNotFoundComponent, isStandalone: true, selector: "dotcms-container-not-found", inputs: { identifier: "identifier" }, ngImport: i0, template: `
         @if ($isDevMode()) {
             <div [attr.data-testid]="'container-not-found'" [ngStyle]="emptyContainerStyle">
                 This container with identifier {{ identifier }} was not found.
@@ -1427,7 +1705,7 @@ class ContainerNotFoundComponent {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContainerNotFoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContainerNotFoundComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-container-not-found',
@@ -1457,8 +1735,8 @@ class EmptyContainerComponent {
         this.$isDevMode = this.#dotCMSStore.$isDevMode;
     }
     #dotCMSStore;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EmptyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EmptyContainerComponent, isStandalone: true, selector: "dotcms-empty-container", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmptyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EmptyContainerComponent, isStandalone: true, selector: "dotcms-empty-container", ngImport: i0, template: `
         @if ($isDevMode()) {
             <div [ngStyle]="emptyContainerStyle" data-testid="empty-container">
                 <span data-testid="empty-container-message" data-dot-object="empty-content">
@@ -1468,7 +1746,7 @@ class EmptyContainerComponent {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EmptyContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmptyContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-empty-container',
@@ -1495,8 +1773,8 @@ class FallbackComponent {
     constructor() {
         this.UserNoComponent = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FallbackComponent, isStandalone: true, selector: "dotcms-fallback-component", inputs: { UserNoComponent: "UserNoComponent", contentlet: "contentlet" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FallbackComponent, isStandalone: true, selector: "dotcms-fallback-component", inputs: { UserNoComponent: "UserNoComponent", contentlet: "contentlet" }, ngImport: i0, template: `
         @if (UserNoComponent) {
             <ng-container *ngComponentOutlet="UserNoComponent | async; inputs: { contentlet }" />
         } @else {
@@ -1506,7 +1784,7 @@ class FallbackComponent {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FallbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FallbackComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-fallback-component',
@@ -1538,43 +1816,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  */
 class ContentletComponent {
     constructor() {
-        this.dotObject = 'contentlet';
         this.#dotCMSStore = inject(DotCMSStore);
-        this.$contentlet = signal(null, ...(ngDevMode ? [{ debugName: "$contentlet" }] : []));
-        this.$UserComponent = signal(null, ...(ngDevMode ? [{ debugName: "$UserComponent" }] : []));
-        this.$UserNoComponent = signal(null, ...(ngDevMode ? [{ debugName: "$UserNoComponent" }] : []));
+        this.$contentlet = signal(null, ...(ngDevMode ? [{ debugName: "$contentlet" }] : /* istanbul ignore next */ []));
+        this.$UserComponent = signal(null, ...(ngDevMode ? [{ debugName: "$UserComponent" }] : /* istanbul ignore next */ []));
+        this.$UserNoComponent = signal(null, ...(ngDevMode ? [{ debugName: "$UserNoComponent" }] : /* istanbul ignore next */ []));
         this.$isDevMode = this.#dotCMSStore.$isDevMode;
-        this.$haveContent = signal(false, ...(ngDevMode ? [{ debugName: "$haveContent" }] : []));
-        this.$style = computed(() => this.$isDevMode() && !this.$haveContent() ? { minHeight: '4rem' } : {}, ...(ngDevMode ? [{ debugName: "$style" }] : []));
+        this.$isAnalyticsActive = this.#dotCMSStore.$isAnalyticsActive;
+        this.$haveContent = signal(false, ...(ngDevMode ? [{ debugName: "$haveContent" }] : /* istanbul ignore next */ []));
+        this.$style = computed(() => this.$isDevMode() && !this.$haveContent() ? { minHeight: '4rem' } : {}, ...(ngDevMode ? [{ debugName: "$style" }] : /* istanbul ignore next */ []));
         this.$dotAttributes = computed(() => {
             const contentlet = this.$contentlet();
-            if (!contentlet || !this.$isDevMode())
+            if (!contentlet)
                 return {};
-            return getDotContentletAttributes(contentlet, this.containerData.identifier);
-        }, ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : []));
-        this.identifier = null;
-        this.basetype = null;
-        this.title = null;
-        this.inode = null;
-        this.type = null;
-        this.containerAttribute = null;
-        this.onNumberOfPages = null;
-        this.styleProperties = null;
-        this.styleAttribute = null;
+            if (this.$isDevMode()) {
+                return getDotContentletAttributes(contentlet, this.containerData.identifier);
+            }
+            if (this.$isAnalyticsActive()) {
+                return getAnalyticsContentletAttributes(contentlet);
+            }
+            return {};
+        }, ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : /* istanbul ignore next */ []));
     }
     #dotCMSStore;
     ngOnChanges() {
         this.$contentlet.set(this.contentlet);
         this.setupComponents();
-        this.identifier = this.$dotAttributes()['data-dot-identifier'];
-        this.basetype = this.$dotAttributes()['data-dot-basetype'];
-        this.title = this.$dotAttributes()['data-dot-title'];
-        this.inode = this.$dotAttributes()['data-dot-inode'];
-        this.type = this.$dotAttributes()['data-dot-type'];
-        this.containerAttribute = JSON.stringify(this.containerData);
-        this.onNumberOfPages = this.$dotAttributes()['data-dot-on-number-of-pages'];
-        this.styleProperties = this.$dotAttributes()['data-dot-style-properties'] || null;
-        this.styleAttribute = this.$style();
+    }
+    /**
+     * Serializes the container data for the `data-dot-container` editor attribute.
+     * Only consumed by the host binding while in edit mode.
+     */
+    getContainerAttribute() {
+        return JSON.stringify(this.containerData);
     }
     ngAfterViewInit() {
         this.checkContent();
@@ -1595,8 +1868,8 @@ class ContentletComponent {
             this.$haveContent.set(hasContent);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet", inputs: { contentlet: "contentlet", containerData: "containerData" }, 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", "attr.data-dot-style-properties": "this.styleProperties", "style": "this.styleAttribute" } }, viewQueries: [{ propertyName: "contentletRef", first: true, predicate: ["contentletRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet", inputs: { contentlet: "contentlet", containerData: "containerData" }, host: { properties: { "attr.data-dot-object": "$isDevMode() ? 'contentlet' : null", "attr.data-dot-identifier": "$dotAttributes()['data-dot-identifier'] ?? null", "attr.data-dot-basetype": "$dotAttributes()['data-dot-basetype'] ?? null", "attr.data-dot-title": "$dotAttributes()['data-dot-title'] ?? null", "attr.data-dot-inode": "$dotAttributes()['data-dot-inode'] ?? null", "attr.data-dot-type": "$dotAttributes()['data-dot-type'] ?? null", "attr.data-dot-container": "$isDevMode() ? getContainerAttribute() : null", "attr.data-dot-on-number-of-pages": "$dotAttributes()['data-dot-on-number-of-pages'] ?? null", "attr.data-dot-style-properties": "$dotAttributes()['data-dot-style-properties'] ?? null", "style": "$style()" } }, viewQueries: [{ propertyName: "contentletRef", first: true, predicate: ["contentletRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         @if ($UserComponent()) {
             <ng-container
                 *ngComponentOutlet="
@@ -1610,7 +1883,7 @@ class ContentletComponent {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: FallbackComponent, selector: "dotcms-fallback-component", inputs: ["UserNoComponent", "contentlet"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContentletComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-contentlet',
@@ -1628,6 +1901,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 [contentlet]="$contentlet() ?? contentlet" />
         }
     `,
+                    // Editor-only metadata (data-dot-object, data-dot-container, etc.) is bound
+                    // only in edit mode. In live mode we keep the minimal set Analytics needs
+                    // via $dotAttributes (empty when Analytics is inactive).
+                    host: {
+                        '[attr.data-dot-object]': "$isDevMode() ? 'contentlet' : null",
+                        '[attr.data-dot-identifier]': "$dotAttributes()['data-dot-identifier'] ?? null",
+                        '[attr.data-dot-basetype]': "$dotAttributes()['data-dot-basetype'] ?? null",
+                        '[attr.data-dot-title]': "$dotAttributes()['data-dot-title'] ?? null",
+                        '[attr.data-dot-inode]': "$dotAttributes()['data-dot-inode'] ?? null",
+                        '[attr.data-dot-type]': "$dotAttributes()['data-dot-type'] ?? null",
+                        '[attr.data-dot-container]': '$isDevMode() ? getContainerAttribute() : null',
+                        '[attr.data-dot-on-number-of-pages]': "$dotAttributes()['data-dot-on-number-of-pages'] ?? null",
+                        '[attr.data-dot-style-properties]': "$dotAttributes()['data-dot-style-properties'] ?? null",
+                        '[style]': '$style()'
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { contentlet: [{
@@ -1639,36 +1927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }], contentletRef: [{
                 type: ViewChild,
                 args: ['contentletRef']
-            }], dotObject: [{
-                type: HostBinding,
-                args: ['attr.data-dot-object']
-            }], identifier: [{
-                type: HostBinding,
-                args: ['attr.data-dot-identifier']
-            }], basetype: [{
-                type: HostBinding,
-                args: ['attr.data-dot-basetype']
-            }], title: [{
-                type: HostBinding,
-                args: ['attr.data-dot-title']
-            }], inode: [{
-                type: HostBinding,
-                args: ['attr.data-dot-inode']
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.data-dot-type']
-            }], containerAttribute: [{
-                type: HostBinding,
-                args: ['attr.data-dot-container']
-            }], onNumberOfPages: [{
-                type: HostBinding,
-                args: ['attr.data-dot-on-number-of-pages']
-            }], styleProperties: [{
-                type: HostBinding,
-                args: ['attr.data-dot-style-properties']
-            }], styleAttribute: [{
-                type: HostBinding,
-                args: ['style']
             }] } });
 
 /**
@@ -1682,21 +1940,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class ContainerComponent {
     constructor() {
         this.#dotCMSStore = inject(DotCMSStore);
-        this.$containerData = signal(null, ...(ngDevMode ? [{ debugName: "$containerData" }] : []));
-        this.$contentlets = signal([], ...(ngDevMode ? [{ debugName: "$contentlets" }] : []));
-        this.$isEmpty = computed(() => this.$contentlets().length === 0, ...(ngDevMode ? [{ debugName: "$isEmpty" }] : []));
+        this.$containerData = signal(null, ...(ngDevMode ? [{ debugName: "$containerData" }] : /* istanbul ignore next */ []));
+        this.$contentlets = signal([], ...(ngDevMode ? [{ debugName: "$contentlets" }] : /* istanbul ignore next */ []));
+        this.$isEmpty = computed(() => this.$contentlets().length === 0, ...(ngDevMode ? [{ debugName: "$isEmpty" }] : /* istanbul ignore next */ []));
+        this.$isDevMode = this.#dotCMSStore.$isDevMode;
         this.$dotAttributes = computed(() => {
             const containerData = this.$containerData();
-            if (!containerData || !this.#dotCMSStore.$isDevMode()) {
+            if (!containerData || !this.$isDevMode()) {
                 return {};
             }
             return getDotContainerAttributes(containerData);
-        }, ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : []));
-        this.dotObject = 'container';
-        this.acceptTypes = null;
-        this.identifier = null;
-        this.maxContentlets = null;
-        this.uuid = null;
+        }, ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : /* istanbul ignore next */ []));
     }
     #dotCMSStore;
     ngOnChanges() {
@@ -1706,13 +1960,9 @@ class ContainerComponent {
         }
         this.$containerData.set(getContainersData(page, this.container));
         this.$contentlets.set(getContentletsInContainer(page, this.container));
-        this.acceptTypes = this.$dotAttributes()['data-dot-accept-types'];
-        this.identifier = this.$dotAttributes()['data-dot-identifier'];
-        this.maxContentlets = this.$dotAttributes()['data-max-contentlets'];
-        this.uuid = this.$dotAttributes()['data-dot-uuid'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ContainerComponent, isStandalone: true, selector: "dotcms-container", inputs: { container: "container" }, host: { properties: { "attr.data-dot-object": "$isDevMode() ? 'container' : null", "attr.data-dot-accept-types": "$dotAttributes()['data-dot-accept-types'] ?? null", "attr.data-dot-identifier": "$dotAttributes()['data-dot-identifier'] ?? null", "attr.data-max-contentlets": "$dotAttributes()['data-max-contentlets'] ?? null", "attr.data-dot-uuid": "$dotAttributes()['data-dot-uuid'] ?? null" } }, usesOnChanges: true, ngImport: i0, template: `
         @if (!$containerData()) {
             <dotcms-container-not-found [identifier]="container.identifier" />
         } @else if ($isEmpty()) {
@@ -1724,7 +1974,7 @@ class ContainerComponent {
         }
     `, 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", "containerData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-container',
@@ -1740,26 +1990,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             }
         }
     `,
+                    // Container metadata is editor-only — bound only in edit mode so it never
+                    // leaks into live output. $dotAttributes is empty outside edit mode.
+                    host: {
+                        '[attr.data-dot-object]': "$isDevMode() ? 'container' : null",
+                        '[attr.data-dot-accept-types]': "$dotAttributes()['data-dot-accept-types'] ?? null",
+                        '[attr.data-dot-identifier]': "$dotAttributes()['data-dot-identifier'] ?? null",
+                        '[attr.data-max-contentlets]': "$dotAttributes()['data-max-contentlets'] ?? null",
+                        '[attr.data-dot-uuid]': "$dotAttributes()['data-dot-uuid'] ?? null"
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { container: [{
                 type: Input,
                 args: [{ required: true }]
-            }], dotObject: [{
-                type: HostBinding,
-                args: ['attr.data-dot-object']
-            }], acceptTypes: [{
-                type: HostBinding,
-                args: ['attr.data-dot-accept-types']
-            }], identifier: [{
-                type: HostBinding,
-                args: ['attr.data-dot-identifier']
-            }], maxContentlets: [{
-                type: HostBinding,
-                args: ['attr.data-max-contentlets']
-            }], uuid: [{
-                type: HostBinding,
-                args: ['attr.data-dot-uuid']
             }] } });
 
 /**
@@ -1777,8 +2021,8 @@ class ColumnComponent {
         const positionClasses = getColumnPositionClasses(this.column);
         this.customClasses = combineClasses([positionClasses.startClass, positionClasses.endClass]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.customClasses" } }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.customClasses" } }, usesOnChanges: true, ngImport: i0, template: `
         <div [class]="column.styleClass" data-testid="dotcms-column">
             @for (container of column.containers; track $index) {
                 <dotcms-container [container]="container" />
@@ -1786,7 +2030,7 @@ class ColumnComponent {
         </div>
     `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-column', imports: [ContainerComponent], template: `
         <div [class]="column.styleClass" data-testid="dotcms-column">
@@ -1813,15 +2057,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  */
 class RowComponent {
     constructor() {
-        this.customClasses = signal('', ...(ngDevMode ? [{ debugName: "customClasses" }] : []));
-        this.sectionId = signal('', ...(ngDevMode ? [{ debugName: "sectionId" }] : []));
+        this.customClasses = signal('', ...(ngDevMode ? [{ debugName: "customClasses" }] : /* istanbul ignore next */ []));
+        this.sectionId = signal('', ...(ngDevMode ? [{ debugName: "sectionId" }] : /* istanbul ignore next */ []));
     }
     ngOnChanges() {
         this.customClasses.set(combineClasses(['dot-row-container', this.row.styleClass ?? '']));
         this.sectionId.set(`${DOT_SECTION_ID_PREFIX}${this.sectionIndex}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row", sectionIndex: "sectionIndex" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row", sectionIndex: "sectionIndex" }, usesOnChanges: true, ngImport: i0, template: `
         <div [id]="sectionId()" [class]="customClasses()">
             <div class="dot-row" data-dot-object="row" data-testid="dotcms-row">
                 @for (column of row.columns; track $index) {
@@ -1831,7 +2075,7 @@ class RowComponent {
         </div>
     `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-row', imports: [ColumnComponent], template: `
         <div [id]="sectionId()" [class]="customClasses()">
@@ -1869,8 +2113,8 @@ class DotCMSLayoutBodyComponent {
         this.mode = 'production';
         this.#dotCMSStore = inject(DotCMSStore);
         this.$isDevMode = this.#dotCMSStore.$isDevMode;
-        this.$rows = signal([], ...(ngDevMode ? [{ debugName: "$rows" }] : []));
-        this.$isEmpty = signal(false, ...(ngDevMode ? [{ debugName: "$isEmpty" }] : []));
+        this.$rows = signal([], ...(ngDevMode ? [{ debugName: "$rows" }] : /* istanbul ignore next */ []));
+        this.$isEmpty = signal(false, ...(ngDevMode ? [{ debugName: "$isEmpty" }] : /* istanbul ignore next */ []));
     }
     #dotCMSStore;
     ngOnChanges() {
@@ -1882,8 +2126,8 @@ class DotCMSLayoutBodyComponent {
         this.$isEmpty.set(!this.page?.layout?.body);
         this.$rows.set(this.page?.layout?.body?.rows ?? []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSLayoutBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DotCMSLayoutBodyComponent, isStandalone: true, selector: "dotcms-layout-body", inputs: { page: "page", components: "components", mode: "mode" }, providers: [DotCMSStore], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSLayoutBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DotCMSLayoutBodyComponent, isStandalone: true, selector: "dotcms-layout-body", inputs: { page: "page", components: "components", mode: "mode" }, providers: [DotCMSStore], usesOnChanges: true, ngImport: i0, template: `
         @if ($isEmpty() && $isDevMode()) {
             <dotcms-page-error-message />
         } @else {
@@ -1893,7 +2137,7 @@ class DotCMSLayoutBodyComponent {
         }
     `, 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", "sectionIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSLayoutBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSLayoutBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-layout-body', imports: [PageErrorMessageComponent, RowComponent], providers: [DotCMSStore], template: `
         @if ($isEmpty() && $isDevMode()) {
@@ -1994,10 +2238,10 @@ class DotCMSEditablePageService {
         });
         return unsubscribe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSEditablePageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSEditablePageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSEditablePageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSEditablePageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DotCMSEditablePageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DotCMSEditablePageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2008,5 +2252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DotCMSBlockEditorRendererComponent, DotCMSClient, DotCMSEditablePageService, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSClient, provideDotCMSImageLoader };
+export { DotCMSBlockEditorRendererComponent, DotCMSBlockEditorRendererNativeComponent, DotCMSClient, DotCMSEditablePageService, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSClient, provideDotCMSImageLoader };
 //# sourceMappingURL=dotcms-angular.mjs.map