@dotcms/angular 1.5.2-next.28 → 1.5.3-next.2118

package/README.md

@@ -17,7 +17,7 @@ The `@dotcms/angular` SDK is the DotCMS official Angular library. It empowers An
 -   [SDK Reference](#sdk-reference)
     -   [DotCMSLayoutBody](#dotcmslayoutbody)
     -   [DotCMSEditableText](#dotcmseditabletext)
-    -   [DotCMSBlockEditorRenderer](#dotcmsblockeditorrenderer)
+    -   [DotCMSBlockEditorRendererNative](#dotcmsblockeditorrenderernative)
     -   [DotCMSShowWhen](#dotcmsshowwhen)
     -   [DotCMSEditablePageService](#dotcmseditablepageservice)
 -   [Troubleshooting](#troubleshooting)
@@ -537,22 +537,28 @@ export class MyBannerComponent {
 -   Detects UVE edit mode and enables inline TinyMCE editing
 -   Triggers a `Save` [workflow action](https://dev.dotcms.com/docs/workflows) on blur without needing full content dialog.
 
-### DotCMSBlockEditorRenderer
+### DotCMSBlockEditorRendererNative
 
-`DotCMSBlockEditorRenderer` is a component for rendering [Block Editor](https://dev.dotcms.com/docs/block-editor) content from dotCMS with support for custom block renderers.
+`DotCMSBlockEditorRendererNative` is the recommended renderer for [Block Editor](https://dev.dotcms.com/docs/block-editor) content. It emits **clean semantic HTML** — `<ul><li><p>…</p></li></ul>` — with no custom wrapper elements between semantic tags.
+
+> The original `DotCMSBlockEditorRenderer` is deprecated and retained for backward compatibility. See the component's TSDoc and [`MIGRATION.md`](./MIGRATION.md#migrating-to-the-semantic-block-editor-renderer) for the migration path — it's a one-line swap.
+
+#### Why it matters
+
+The host element is the real semantic tag (`<ul>`, `<li>`, `<p>`, `<h1>`–`<h6>`, ...) and recursion is done through `ng-template` outlets that render as HTML comment nodes (invisible to the accessibility tree), so `<li>` stays a true DOM child of `<ul>` — the relationship the HTML spec and assistive technology require, and that accessibility scanners flag when broken. This applies inside table cells and grid columns too: `<td><ul><li>…` stays intact.
 
 | Input             | Type                 | Required | Description                                                                                                |
 |-------------------|----------------------|----------|------------------------------------------------------------------------------------------------------------|
-| `blocks`          | `BlockEditorContent` | ✅       | The [Block Editor](https://dev.dotcms.com/docs/block-editor) content to render                             |
-| `customRenderers` | `CustomRenderer`     | ❌       | Custom rendering functions for specific [block types](https://dev.dotcms.com/docs/block-editor#BlockTypes) |
-| `className`       | `string`            | ❌       | CSS class to apply to the container                                                                        |
-| `style`           | `CSSProperties`      | ❌       | Inline styles for the container                                                                            |
+| `blocks`          | `BlockEditorNode`               | ✅       | The [Block Editor](https://dev.dotcms.com/docs/block-editor) content to render                             |
+| `customRenderers` | `CustomRenderer`                | ❌       | Custom rendering functions for specific [block types](https://dev.dotcms.com/docs/block-editor#BlockTypes) |
+| `class`           | `string`                        | ❌       | CSS class to apply to the container                                                                        |
+| `style`           | `string \| Record<string, string>` | ❌   | Inline styles for the container                                                                            |
 
 #### Usage
 
 ```typescript
 import { DotCMSBasicContentlet } from '@dotcms/types';
-import { DotCMSBlockEditorRenderer } from '@dotcms/angular';
+import { DotCMSBlockEditorRendererNativeComponent } from '@dotcms/angular';
 
 const CUSTOM_RENDERERS = {
     customBlock: import('./custom-block.component').then((c) => c.CustomBlockComponent),
@@ -561,9 +567,9 @@ const CUSTOM_RENDERERS = {
 
 @Component({
     selector: 'app-your-component',
-    imports: [DotCMSShowWhen],
+    imports: [DotCMSBlockEditorRendererNativeComponent],
     template: `
-        <dotcms-block-editor-renderer
+        <dotcms-block-editor-renderer-native
             [blocks]="contentlet.myBlockEditorField"
             [customRenderers]="customRenderers()" />
     `
@@ -576,12 +582,8 @@ export class MyBannerComponent {
 
 #### Recommendations
 
--   Should not be used with [`DotCMSEditableText`](#dotcmseditabletext)
+-   Should not be used with [`DotCMSEditableText`](#dotcmseditabletext).
 -   Take into account the CSS cascade can affect the look and feel of your blocks.
--   `DotCMSBlockEditorRenderer` only works with [Block Editor fields](https://dev.dotcms.com/docs/block-editor). For other fields, use [`DotCMSEditableText`](#dotcmseditabletext).
-
-📘 For advanced examples, customization options, and best practices, refer to the [DotCMSBlockEditorRenderer README](https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/angular/src/lib/components/DotCMSBlockEditorRenderer).
-
 
 ### DotCMSShowWhen
 

package/fesm2022/dotcms-angular.mjs

@@ -1261,6 +1261,15 @@ 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() {
@@ -1290,6 +1299,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.1", ngImport: i0, type: DotSemanticBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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.1", 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.1", ngImport: i0, type: DotSemanticOrderedList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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.1", 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.1", ngImport: i0, type: DotSemanticListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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.1", 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.1", ngImport: i0, type: DotSemanticParagraph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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.1", 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.1", ngImport: i0, type: DotSemanticBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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.1", 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.1", ngImport: i0, type: DotSemanticCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", 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.1", 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" }] : []));
+        /** Map of `node.type` → component to override the built-in render path. */
+        this.customRenderers = input(undefined, ...(ngDevMode ? [{ debugName: "customRenderers" }] : []));
+        /**
+         * 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" } : {}), alias: 'class' });
+        /** Inline style on the wrapper element. */
+        this.style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : []));
+        this.$blockEditorState = signal({ error: null }, ...(ngDevMode ? [{ debugName: "$blockEditorState" }] : []));
+        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT, ...(ngDevMode ? [{ debugName: "$isInEditMode" }] : []));
+        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.1", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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.1", 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
@@ -2008,5 +2251,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