@dotcms/angular 26.9.24-1 → 26.9.24-1-next.2779

package/fesm2022/dotcms-angular.mjs

@@ -45,10 +45,10 @@ class DotCMSShowWhenDirective {
             this.#hasView = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSShowWhenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: DotCMSShowWhenDirective, isStandalone: true, selector: "[dotCMSShowWhen]", inputs: { dotCMSShowWhen: "dotCMSShowWhen" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSShowWhenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.24", type: DotCMSShowWhenDirective, isStandalone: true, selector: "[dotCMSShowWhen]", inputs: { dotCMSShowWhen: "dotCMSShowWhen" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSShowWhenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSShowWhenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dotCMSShowWhen]'
@@ -409,8 +409,8 @@ class DotCMSEditableTextComponent {
     didContentChange(editedContent) {
         return this.content !== editedContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotCMSEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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: () => {
@@ -418,9 +418,9 @@ class DotCMSEditableTextComponent {
                     return `${dotCMSHost || ''}${__TINYMCE_PATH_ON_DOTCMS__}`;
                 }
             }
-        ], 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], 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", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "readonly", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSEditableTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSEditableTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-editable-text', imports: [EditorComponent], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         {
@@ -452,8 +452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * but without poster/width/height, which are not meaningful for audio.
  */
 class DotAudioBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotAudioBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotAudioBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-audio", inputs: { attrs: "attrs" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotAudioBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: DotAudioBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-audio", inputs: { attrs: "attrs" }, ngImport: i0, template: `
         <audio [controls]="true" preload="metadata">
             <source [src]="attrs?.['src']" [type]="attrs?.['mimeType']" />
             Your browser does not support the
@@ -462,7 +462,7 @@ class DotAudioBlock {
         </audio>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotAudioBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotAudioBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-audio',
@@ -481,8 +481,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class DotCodeBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: DotCodeBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-code-block", ngImport: i0, template: `
         <pre>
             <code>
                 <ng-content />
@@ -490,7 +490,7 @@ class DotCodeBlock {
         </pre>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCodeBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCodeBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-code-block',
@@ -505,14 +505,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotBlockQuote {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotBlockQuote, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotBlockQuote, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-block-quote',
@@ -537,8 +537,8 @@ class NoComponentProvided {
             border: '1px solid #ed8936'
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NoComponentProvided, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: NoComponentProvided, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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
@@ -557,7 +557,7 @@ class NoComponentProvided {
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NoComponentProvided, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: NoComponentProvided, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-no-component-provided',
@@ -589,8 +589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class DotContentletBlock {
     constructor() {
-        this.$data = computed(() => this.node?.attrs?.['data'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$data" }] : /* istanbul ignore next */ []));
+        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.`;
     }
@@ -608,8 +607,8 @@ class DotContentletBlock {
             console.warn(this.DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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) {
@@ -617,7 +616,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: "22.1.0", ngImport: i0, type: DotContentletBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotContentletBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-contentlet',
@@ -650,8 +649,16 @@ class DotGridBlock {
             ? rawCols
             : [6, 6];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotGridBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DotGridBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-grid-block", inputs: { node: "node", customRenderers: "customRenderers" }, ngImport: i0, template: `
+    /**
+     * Grid span for the column at `index`. The template walks `node.content`, which can hold
+     * more columns than the two in `columnSpans`, so any extra column falls back to 6.
+     */
+    columnSpan(index) {
+        const span = this.columnSpans[index];
+        return span ?? 6;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotGridBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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"
@@ -662,7 +669,7 @@ class DotGridBlock {
                 <div
                     data-type="gridColumn"
                     class="grid-block__column"
-                    [style.grid-column]="'span ' + (columnSpans[$index] ?? 6)">
+                    [style.grid-column]="'span ' + columnSpan($index)">
                     <ng-container
                         *ngComponentOutlet="
                             blockEditorItem;
@@ -673,7 +680,7 @@ class DotGridBlock {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotGridBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotGridBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-grid-block',
@@ -690,7 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 <div
                     data-type="gridColumn"
                     class="grid-block__column"
-                    [style.grid-column]="'span ' + (columnSpans[$index] ?? 6)">
+                    [style.grid-column]="'span ' + columnSpan($index)">
                     <ng-container
                         *ngComponentOutlet="
                             blockEditorItem;
@@ -709,23 +716,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class DotImageBlock {
     constructor() {
-        this.attrs = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "attrs" }] : /* istanbul ignore next */ []));
-        this.$srcURL = computed(() => this.attrs()?.['src'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$srcURL" }] : /* istanbul ignore next */ []));
+        this.attrs = input(...(ngDevMode ? [undefined, { debugName: "attrs" }] : /* istanbul ignore next */ []));
+        this.$srcURL = computed(() => this.attrs()?.['src'], ...(ngDevMode ? [{ debugName: "$srcURL" }] : /* istanbul ignore next */ []));
         /**
          * Link assigned to the image in the Block Editor, stored as `href` on the
          * `dotImage` node. `null` when the image has no link, in which case it
          * renders without an anchor. The truthiness check also covers the
          * transient `''` the editor writes while unsetting a link.
          */
-        this.$href = computed(() => this.attrs()?.['href'] || null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$href" }] : /* istanbul ignore next */ []));
-        this.$target = computed(() => this.attrs()?.['target'] || null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$target" }] : /* istanbul ignore next */ []));
+        this.$href = computed(() => this.attrs()?.['href'] || null, ...(ngDevMode ? [{ debugName: "$href" }] : /* istanbul ignore next */ []));
+        this.$target = computed(() => this.attrs()?.['target'] || null, ...(ngDevMode ? [{ debugName: "$target" }] : /* istanbul ignore next */ []));
         /** Guards against reverse tabnabbing when the link opens in a new tab. */
-        this.$rel = computed(() => this.$target() === '_blank' ? 'noopener noreferrer' : null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$rel" }] : /* istanbul ignore next */ []));
+        this.$rel = computed(() => this.$target() === '_blank' ? 'noopener noreferrer' : null, ...(ngDevMode ? [{ debugName: "$rel" }] : /* istanbul ignore next */ []));
         this.$wrapperStyle = computed(() => {
             const textWrap = this.attrs()?.['textWrap'];
             const textAlign = this.attrs()?.['textAlign'];
@@ -739,11 +741,10 @@ class DotImageBlock {
                 return { 'text-align': textAlign };
             }
             return {};
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$wrapperStyle" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "$wrapperStyle" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DotImageBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-image", inputs: { attrs: { classPropertyName: "attrs", publicName: "attrs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DotImageBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-image", inputs: { attrs: { classPropertyName: "attrs", publicName: "attrs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         <figure [style]="$wrapperStyle()">
             @if ($href(); as href) {
                 <!-- target/rel are attribute bindings so a null value omits the
@@ -761,7 +762,7 @@ class DotImageBlock {
         </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: "22.1.0", ngImport: i0, type: DotImageBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotImageBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-image',
@@ -788,14 +789,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], propDecorators: { attrs: [{ type: i0.Input, args: [{ isSignal: true, alias: "attrs", required: false }] }] } });
 
 class DotBulletList {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotBulletList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotBulletList, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-bullet-list',
@@ -808,14 +809,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotOrdererList {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotOrdererList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotOrdererList, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-ordered-list',
@@ -828,14 +829,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotListItem {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotListItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-list-item',
@@ -852,8 +853,8 @@ class DotTableBlock {
     constructor() {
         this.blockEditorItem = DotCMSBlockEditorItemComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DotTableBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-table", inputs: { content: "content", attrs: "attrs" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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">
@@ -898,7 +899,7 @@ class DotTableBlock {
         </table>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotTableBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotTableBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-table',
@@ -956,14 +957,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class DotParagraphBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotParagraphBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotParagraphBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-paragraph',
@@ -977,17 +978,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }] });
 class DotHeadingBlock {
     constructor() {
-        this.level = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+        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');
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$normalizedLevel" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "$normalizedLevel" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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>
@@ -1031,7 +1030,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: "22.1.0", ngImport: i0, type: DotHeadingBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotHeadingBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-heading',
@@ -1086,8 +1085,7 @@ class DotTextBlock {
     constructor() {
         this.marks = [];
         this.text = '';
-        this.$remainingMarks = computed(() => this.marks?.slice(1), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$remainingMarks" }] : /* istanbul ignore next */ []));
+        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']) {
@@ -1095,11 +1093,10 @@ class DotTextBlock {
                 delete attrs['class'];
             }
             return attrs;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$currentAttrs" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "$currentAttrs" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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
@@ -1147,7 +1144,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: "22.1.0", ngImport: i0, type: DotTextBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotTextBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-text',
@@ -1221,8 +1218,8 @@ class DotUnknownBlockComponent {
     get isEditMode() {
         return getUVEState()?.mode === UVE_MODE.EDIT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotUnknownBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotUnknownBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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>
@@ -1240,7 +1237,7 @@ class DotUnknownBlockComponent {
         }
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotUnknownBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotUnknownBlockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-unknown',
@@ -1269,13 +1266,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class DotVideoBlock {
     constructor() {
-        this.$srcURL = computed(() => this.attrs?.['src'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$srcURL" }] : /* istanbul ignore next */ []));
-        this.$posterURL = computed(() => this.attrs?.['data']?.['thumbnail'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$posterURL" }] : /* istanbul ignore next */ []));
+        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: "22.1.0", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: DotVideoBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-video", inputs: { attrs: "attrs" }, ngImport: i0, template: `
         <video
             [controls]="true"
             preload="metadata"
@@ -1290,7 +1285,7 @@ class DotVideoBlock {
         </video>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotVideoBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotVideoBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-block-editor-renderer-video',
@@ -1318,10 +1313,10 @@ class DotCMSBlockEditorItemComponent {
     constructor() {
         this.BLOCKS = BlockEditorDefaultBlocks;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.DOT_AUDIO) {\n                <dotcms-block-editor-renderer-audio [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: DotAudioBlock, selector: "dotcms-block-editor-renderer-audio", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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.DOT_AUDIO) {\n                <dotcms-block-editor-renderer-audio [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: DotAudioBlock, selector: "dotcms-block-editor-renderer-audio", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-block-editor-renderer-block', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         NgTemplateOutlet,
@@ -1376,10 +1371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class DotCMSBlockEditorRendererComponent {
     constructor() {
-        this.$blockEditorState = signal({ error: null }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$blockEditorState" }] : /* istanbul ignore next */ []));
-        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$isInEditMode" }] : /* 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 */ []));
     }
     ngOnInit() {
         const state = isValidBlocks(this.blocks);
@@ -1388,10 +1381,10 @@ class DotCMSBlockEditorRendererComponent {
         }
         this.$blockEditorState.set(isValidBlocks(this.blocks));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-block-editor-renderer', changeDetection: ChangeDetectionStrategy.Eager, 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: [{
@@ -1419,12 +1412,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * @internal
  */
 class DotSemanticBulletList {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotSemanticBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotSemanticBulletList, isStandalone: true, selector: "ul[dotBulletList]", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotSemanticBulletList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticBulletList, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[dotBulletList]',
@@ -1435,12 +1428,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotSemanticOrderedList {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotSemanticOrderedList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotSemanticOrderedList, isStandalone: true, selector: "ol[dotOrderedList]", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticOrderedList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotSemanticOrderedList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticOrderedList, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol[dotOrderedList]',
@@ -1451,12 +1444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotSemanticListItem {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotSemanticListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotSemanticListItem, isStandalone: true, selector: "li[dotListItem]", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotSemanticListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticListItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[dotListItem]',
@@ -1467,12 +1460,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotSemanticParagraph {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotSemanticParagraph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotSemanticParagraph, isStandalone: true, selector: "p[dotParagraph]", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticParagraph, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotSemanticParagraph, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticParagraph, decorators: [{
             type: Component,
             args: [{
                     selector: 'p[dotParagraph]',
@@ -1483,12 +1476,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotSemanticBlockQuote {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotSemanticBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotSemanticBlockQuote, isStandalone: true, selector: "blockquote[dotBlockQuote]", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotSemanticBlockQuote, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticBlockQuote, decorators: [{
             type: Component,
             args: [{
                     selector: 'blockquote[dotBlockQuote]',
@@ -1499,12 +1492,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 class DotSemanticCodeBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotSemanticCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DotSemanticCodeBlock, isStandalone: true, selector: "pre[dotCodeBlock]", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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: "22.1.0", ngImport: i0, type: DotSemanticCodeBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotSemanticCodeBlock, decorators: [{
             type: Component,
             args: [{
                     selector: 'pre[dotCodeBlock]',
@@ -1542,23 +1535,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class DotCMSBlockEditorRendererNativeComponent {
     constructor() {
         /** The Block Editor `doc` node to render. */
-        this.blocks = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "blocks" }] : /* istanbul ignore next */ []));
+        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, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "customRenderers" }] : /* istanbul ignore next */ []));
+        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, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-        this.$blockEditorState = signal({ error: null }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$blockEditorState" }] : /* istanbul ignore next */ []));
-        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$isInEditMode" }] : /* istanbul ignore next */ []));
+        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() {
@@ -1639,10 +1627,10 @@ class DotCMSBlockEditorRendererNativeComponent {
         const span = valid ? rawCols[index] : 6;
         return typeof span === 'number' ? span : 6;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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                    @if (imageLink(node.attrs); as link) {\n                        <!-- target/rel are attribute bindings so a null value omits the\n                             attribute instead of rendering the string \"null\". -->\n                        <a [href]=\"link.href\" [attr.target]=\"link.target\" [attr.rel]=\"link.rel\">\n                            <ng-container *ngTemplateOutlet=\"dotImageEl\" />\n                        </a>\n                    } @else {\n                        <ng-container *ngTemplateOutlet=\"dotImageEl\" />\n                    }\n                </figure>\n\n                <ng-template #dotImageEl>\n                    <img\n                        [alt]=\"node.attrs?.['alt']\"\n                        [src]=\"node.attrs?.['src']\"\n                        style=\"max-width: 100%; height: auto\" />\n                </ng-template>\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.DOT_AUDIO) {\n                <audio [controls]=\"true\" preload=\"metadata\">\n                    <source [src]=\"node.attrs?.['src']\" [type]=\"node.attrs?.['mimeType']\" />\n                    Your browser does not support the\n                    <code>audio</code>\n                    element.\n                </audio>\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                <ng-container>{{ text }}</ng-container>\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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                    @if (imageLink(node.attrs); as link) {\n                        <!-- target/rel are attribute bindings so a null value omits the\n                             attribute instead of rendering the string \"null\". -->\n                        <a [href]=\"link.href\" [attr.target]=\"link.target\" [attr.rel]=\"link.rel\">\n                            <ng-container *ngTemplateOutlet=\"dotImageEl\" />\n                        </a>\n                    } @else {\n                        <ng-container *ngTemplateOutlet=\"dotImageEl\" />\n                    }\n                </figure>\n\n                <ng-template #dotImageEl>\n                    <img\n                        [alt]=\"node.attrs?.['alt']\"\n                        [src]=\"node.attrs?.['src']\"\n                        style=\"max-width: 100%; height: auto\" />\n                </ng-template>\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.DOT_AUDIO) {\n                <audio [controls]=\"true\" preload=\"metadata\">\n                    <source [src]=\"node.attrs?.['src']\" [type]=\"node.attrs?.['mimeType']\" />\n                    Your browser does not support the\n                    <code>audio</code>\n                    element.\n                </audio>\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                <ng-container>{{ text }}</ng-container>\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: "22.1.0", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSBlockEditorRendererNativeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-block-editor-renderer-native', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -1668,8 +1656,8 @@ class PageErrorMessageComponent {
     ngOnInit() {
         console.warn('Missing required layout.body property in page');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PageErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: PageErrorMessageComponent, isStandalone: true, selector: "dotcms-page-error-message", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PageErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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;">
@@ -1686,7 +1674,7 @@ class PageErrorMessageComponent {
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PageErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PageErrorMessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-page-error-message',
@@ -1725,8 +1713,7 @@ const EMPTY_DOTCMS_PAGE_STORE = {
  */
 class DotCMSStore {
     constructor() {
-        this.$store = signal(EMPTY_DOTCMS_PAGE_STORE, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$store" }] : /* istanbul ignore next */ []));
+        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
@@ -1755,8 +1742,7 @@ class DotCMSStore {
                 return uveState?.mode === UVE_MODE.EDIT;
             }
             return this.$store()?.mode === DEVELOPMENT_MODE;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$isDevMode" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "$isDevMode" }] : /* istanbul ignore next */ []));
     }
     /**
      * @description Get the store
@@ -1775,10 +1761,10 @@ class DotCMSStore {
     setStore(store) {
         this.$store.set(store);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSStore, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSStore, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1805,8 +1791,8 @@ class ContainerNotFoundComponent {
             console.error(`Container with identifier ${this.identifier} not found`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContainerNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: ContainerNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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.
@@ -1814,7 +1800,7 @@ class ContainerNotFoundComponent {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContainerNotFoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ContainerNotFoundComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-container-not-found',
@@ -1845,8 +1831,8 @@ class EmptyContainerComponent {
         this.$isDevMode = this.#dotCMSStore.$isDevMode;
     }
     #dotCMSStore;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EmptyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EmptyContainerComponent, isStandalone: true, selector: "dotcms-empty-container", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EmptyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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">
@@ -1856,7 +1842,7 @@ class EmptyContainerComponent {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EmptyContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EmptyContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-empty-container',
@@ -1884,8 +1870,8 @@ class FallbackComponent {
     constructor() {
         this.UserNoComponent = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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 {
@@ -1895,7 +1881,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: "22.1.0", ngImport: i0, type: FallbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FallbackComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-fallback-component',
@@ -1928,18 +1914,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class ContentletComponent {
     constructor() {
         this.#dotCMSStore = inject(DotCMSStore);
-        this.$contentlet = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$contentlet" }] : /* istanbul ignore next */ []));
-        this.$UserComponent = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$UserComponent" }] : /* istanbul ignore next */ []));
-        this.$UserNoComponent = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$UserNoComponent" }] : /* istanbul ignore next */ []));
+        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.$isAnalyticsActive = this.#dotCMSStore.$isAnalyticsActive;
-        this.$haveContent = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$haveContent" }] : /* istanbul ignore next */ []));
-        this.$style = computed(() => this.$isDevMode() && !this.$haveContent() ? { minHeight: '4rem' } : {}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$style" }] : /* istanbul ignore next */ []));
+        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)
@@ -1951,8 +1932,7 @@ class ContentletComponent {
                 return getAnalyticsContentletAttributes(contentlet);
             }
             return {};
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : /* istanbul ignore next */ []));
     }
     #dotCMSStore;
     ngOnChanges() {
@@ -1985,8 +1965,8 @@ class ContentletComponent {
             this.$haveContent.set(hasContent);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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-can-edit": "$dotAttributes()['data-dot-can-edit'] ?? 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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-can-edit": "$dotAttributes()['data-dot-can-edit'] ?? 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="
@@ -2000,7 +1980,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: "22.1.0", ngImport: i0, type: ContentletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ContentletComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-contentlet',
@@ -2058,12 +2038,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class ContainerComponent {
     constructor() {
         this.#dotCMSStore = inject(DotCMSStore);
-        this.$containerData = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$containerData" }] : /* istanbul ignore next */ []));
-        this.$contentlets = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$contentlets" }] : /* istanbul ignore next */ []));
-        this.$isEmpty = computed(() => this.$contentlets().length === 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$isEmpty" }] : /* istanbul ignore next */ []));
+        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();
@@ -2071,8 +2048,7 @@ class ContainerComponent {
                 return {};
             }
             return getDotContainerAttributes(containerData);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "$dotAttributes" }] : /* istanbul ignore next */ []));
     }
     #dotCMSStore;
     ngOnChanges() {
@@ -2083,8 +2059,8 @@ class ContainerComponent {
         this.$containerData.set(getContainersData(page, this.container));
         this.$contentlets.set(getContentletsInContainer(page, this.container));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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()) {
@@ -2096,7 +2072,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: "22.1.0", ngImport: i0, type: ContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-container',
@@ -2143,8 +2119,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: "22.1.0", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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" />
@@ -2152,7 +2128,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: "22.1.0", ngImport: i0, type: ColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-column', imports: [ContainerComponent], template: `
         <div [class]="column.styleClass" data-testid="dotcms-column">
@@ -2179,17 +2155,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class RowComponent {
     constructor() {
-        this.customClasses = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "customClasses" }] : /* istanbul ignore next */ []));
-        this.sectionId = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "sectionId" }] : /* istanbul ignore next */ []));
+        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: "22.1.0", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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) {
@@ -2199,7 +2173,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: "22.1.0", ngImport: i0, type: RowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-row', imports: [ColumnComponent], template: `
         <div [id]="sectionId()" [class]="customClasses()">
@@ -2237,10 +2211,8 @@ class DotCMSLayoutBodyComponent {
         this.mode = 'production';
         this.#dotCMSStore = inject(DotCMSStore);
         this.$isDevMode = this.#dotCMSStore.$isDevMode;
-        this.$rows = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$rows" }] : /* istanbul ignore next */ []));
-        this.$isEmpty = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "$isEmpty" }] : /* istanbul ignore next */ []));
+        this.$rows = signal([], ...(ngDevMode ? [{ debugName: "$rows" }] : /* istanbul ignore next */ []));
+        this.$isEmpty = signal(false, ...(ngDevMode ? [{ debugName: "$isEmpty" }] : /* istanbul ignore next */ []));
     }
     #dotCMSStore;
     ngOnChanges() {
@@ -2252,8 +2224,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: "22.1.0", ngImport: i0, type: DotCMSLayoutBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.24", ngImport: i0, type: DotCMSLayoutBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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 {
@@ -2263,7 +2235,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: "22.1.0", ngImport: i0, type: DotCMSLayoutBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSLayoutBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-layout-body', imports: [PageErrorMessageComponent, RowComponent], providers: [DotCMSStore], template: `
         @if ($isEmpty() && $isDevMode()) {
@@ -2364,10 +2336,10 @@ class DotCMSEditablePageService {
         });
         return unsubscribe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSEditablePageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSEditablePageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSEditablePageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSEditablePageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DotCMSEditablePageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DotCMSEditablePageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'