@dotcms/angular 0.0.1-beta.9 → 1.0.0

package/fesm2022/dotcms-angular.mjs

@@ -1,55 +1,200 @@
-import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
 import * as i0 from '@angular/core';
-import { inject, Renderer2, ElementRef, SecurityContext, Component, ViewChild, Input, HostListener, Injectable, ChangeDetectionStrategy, HostBinding, signal, computed, DestroyRef } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Input, Directive, makeEnvironmentProviders, Renderer2, ElementRef, SecurityContext, HostListener, ViewChild, Component, ChangeDetectionStrategy, computed, signal, Injectable, HostBinding } from '@angular/core';
+import { UVE_MODE, DotCMSUVEAction, UVEEventType } from '@dotcms/types';
+import { getUVEState, sendMessageToUVE, initUVE, updateNavigation, createUVESubscription } from '@dotcms/uve';
+import { IMAGE_LOADER, NgComponentOutlet, AsyncPipe, NgTemplateOutlet, NgStyle } from '@angular/common';
+import { createDotCMSClient } from '@dotcms/client';
+import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NOTIFY_CLIENT, isInsideEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS, initEditor, updateNavigation } from '@dotcms/client';
-import { AsyncPipe, NgComponentOutlet, IMAGE_LOADER } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ActivatedRoute } from '@angular/router';
-import { createUVESubscription } from '@dotcms/uve';
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { __DOTCMS_UVE_EVENT__, BlockEditorDefaultBlocks } from '@dotcms/types/internal';
+import { __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__, isValidBlocks, PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
+import { Subject, of } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+
+/**
+ * Directive to show a template when the UVE is in a specific mode.
+ *
+ * @example
+ * <div *dotCMSShowWhen="UVE_MODE.EDIT">
+ *     This will be shown when the UVE is in edit mode.
+ * </div>
+ *
+ * @export
+ * @class DotCMSShowWhenDirective
+ */
+class DotCMSShowWhenDirective {
+    #when = UVE_MODE.EDIT;
+    #hasView = false;
+    set dotCMSShowWhen(value) {
+        this.#when = value;
+        this.updateViewContainer();
+    }
+    #viewContainerRef = inject(ViewContainerRef);
+    #templateRef = inject(TemplateRef);
+    updateViewContainer() {
+        const state = getUVEState();
+        const shouldShow = state?.mode === this.#when;
+        if (shouldShow && !this.#hasView) {
+            this.#viewContainerRef.createEmbeddedView(this.#templateRef);
+            this.#hasView = true;
+        }
+        else if (!shouldShow && this.#hasView) {
+            this.#viewContainerRef.clear();
+            this.#hasView = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSShowWhenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: DotCMSShowWhenDirective, isStandalone: true, selector: "[dotCMSShowWhen]", inputs: { dotCMSShowWhen: "dotCMSShowWhen" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSShowWhenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dotCMSShowWhen]',
+                    standalone: true
+                }]
+        }], propDecorators: { dotCMSShowWhen: [{
+                type: Input
+            }] } });
+
+/**
+ * Validates if a given path is a valid URL string
+ *
+ * @param path - The path to validate
+ * @returns boolean indicating if the path is valid
+ */
+function isValidPath(path) {
+    if (typeof path !== 'string' || path.trim() === '') {
+        return false;
+    }
+    try {
+        new URL(path);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Provides a DotCMS image loader configuration for the Angular Image directive
+ *
+ * @param path - The base URL path to the DotCMS instance, or empty to use current site
+ * @returns An array of providers for the IMAGE_LOADER token
+ * @throws Error if the provided path is invalid
+ * @example
+ * ```typescript
+ * // In your app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideDotCMSImageLoader('https://demo.dotcms.com')
+ *     // Or use current site:
+ *     // provideDotCMSImageLoader()
+ *   ]
+ * };
+ * ```
+ */
+function provideDotCMSImageLoader(path) {
+    // If path is provided, validate it
+    if (path && !isValidPath(path)) {
+        throw new Error(`Image loader has detected an invalid path (\`${path}\`). ` +
+            `To fix this, supply either the full URL to the dotCMS site, or leave it empty to use the current site.`);
+    }
+    return [
+        {
+            provide: IMAGE_LOADER,
+            useValue: (config) => createDotCMSURL(config, path)
+        }
+    ];
+}
+/**
+ * Creates a DotCMS-compatible URL for image loading
+ *
+ * @param config - The image loader configuration
+ * @param path - The base URL path to the DotCMS instance
+ * @returns A fully qualified URL for the image
+ * @internal
+ */
+function createDotCMSURL(config, path) {
+    const { loaderParams, src, width } = config;
+    const params = loaderParams;
+    if (params?.isOutsideSRC) {
+        return src;
+    }
+    // Use empty string as fallback to support using current site
+    const dotcmsHost = path ? new URL(path).origin : '';
+    const imageSRC = src.includes('/dA/') ? src : `/dA/${src}`;
+    const languageId = params?.languageId ?? '1';
+    if (width) {
+        return `${dotcmsHost}${imageSRC}/${width}w?language_id=${languageId}`;
+    }
+    return `${dotcmsHost}${imageSRC}?language_id=${languageId}`;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+class DotCMSClient {
+    constructor(client) {
+        return client;
+    }
+}
+/**
+ * Creates environment providers for the DotCMS client to be used in Angular applications.
+ * This function configures the DI container to provide a DotCMSClient instance
+ * throughout the application using the specified configuration.
+ *
+ * The provider should be registered at the application level (typically in main.ts)
+ * to ensure a single instance is shared across the entire application.
+ *
+ * @param options - Configuration object for the DotCMS client
+ * @param options.apiUrl - The base URL for the DotCMS API
+ * @param options.authToken - Authentication token for API requests (optional)
+ * @param options.siteId - The site identifier (optional)
+ * @returns Environment providers array that can be used with bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { AppComponent } from './app/app.component';
+ * import { provideDotCMSClient } from '@dotcms/angular';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideDotCMSClient({
+ *       apiUrl: 'https://demo.dotcms.com',
+ *       authToken: 'your-auth-token',
+ *       siteId: 'your-site-id'
+ *     }),
+ *     // other providers...
+ *   ]
+ * });
+ * ```
+ *
+ */
+function provideDotCMSClient(options) {
+    const dotCMSClient = createDotCMSClient(options);
+    return makeEnvironmentProviders([
+        {
+            provide: DotCMSClient,
+            useFactory: () => new DotCMSClient(dotCMSClient)
+        }
+    ]);
+}
 
 const DEFAULT_TINYMCE_CONFIG = {
-    menubar: false,
-    inline: true,
-    valid_styles: {
-        '*': 'font-size,font-family,color,text-decoration,text-align'
-    },
-    powerpaste_word_import: 'clean',
-    powerpaste_html_import: 'clean',
-    suffix: '.min', // Suffix to use when loading resources
-    license_key: 'gpl'
+    ...__DEFAULT_TINYMCE_CONFIG__,
+    license_key: 'gpl' // Using self-hosted license key
 };
 const TINYMCE_CONFIG = {
     minimal: {
         ...DEFAULT_TINYMCE_CONFIG,
-        plugins: 'link autolink',
-        toolbar: 'bold italic underline | link',
-        valid_elements: 'strong,em,span[style],a[href]'
+        ...__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.minimal
     },
     full: {
         ...DEFAULT_TINYMCE_CONFIG,
-        plugins: 'link lists autolink charmap',
-        style_formats: [
-            { title: 'Paragraph', format: 'p' },
-            { title: 'Header 1', format: 'h1' },
-            { title: 'Header 2', format: 'h2' },
-            { title: 'Header 3', format: 'h3' },
-            { title: 'Header 4', format: 'h4' },
-            { title: 'Header 5', format: 'h5' },
-            { title: 'Header 6', format: 'h6' },
-            { title: 'Pre', format: 'pre' },
-            { title: 'Code', format: 'code' }
-        ],
-        toolbar: [
-            'styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'
-        ]
+        ...__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.full
     },
     plain: {
         ...DEFAULT_TINYMCE_CONFIG,
-        plugins: '',
-        toolbar: ''
+        ...__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.plain
     }
 };
 
@@ -58,43 +203,39 @@ const TINYMCE_CONFIG = {
  * This component is responsible to render a text field that can be edited inline.
  *
  * @export
- * @class DotEditableTextComponent
+ * @class DotCMSEditableTextComponent
  * @implements {OnInit}
  * @implements {OnChanges}
  */
-class DotEditableTextComponent {
+class DotCMSEditableTextComponent {
     constructor() {
         /**
          * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
          *
          * @type {DOT_EDITABLE_TEXT_MODE}
-         * @memberof DotEditableTextComponent
+         * @memberof DotCMSEditableTextComponent
          */
         this.mode = 'plain';
         /**
          * Represents the format of the editor which can be `text` or `html`
          *
          * @type {DOT_EDITABLE_TEXT_FORMAT}
-         * @memberof DotEditableTextComponent
+         * @memberof DotCMSEditableTextComponent
          */
         this.format = 'text';
-        /**
-         * Represents the field name of the `contentlet` that can be edited
-         *
-         * @memberof DotEditableTextComponent
-         */
-        this.fieldName = '';
         /**
          * Represents the content of the `contentlet` that can be edited
          *
          * @protected
-         * @memberof DotEditableTextComponent
+         * @memberof DotCMSEditableTextComponent
          */
         this.content = '';
+        this.#NotDotCMSHostMessage = 'The `dotCMSHost` parameter is not defined. Check that the UVE is sending the correct parameters.';
         this.#sanitizer = inject(DomSanitizer);
         this.#renderer = inject(Renderer2);
         this.#elementRef = inject(ElementRef);
     }
+    #NotDotCMSHostMessage;
     #sanitizer;
     #renderer;
     #elementRef;
@@ -102,16 +243,27 @@ class DotEditableTextComponent {
      * The TinyMCE editor
      *
      * @readonly
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     get editor() {
         return this.editorComponent?.editor;
     }
+    /**
+     * Represents if the component is inside the editor
+     *
+     * @protected
+     * @type {boolean}
+     * @memberof DotCMSEditableTextComponent
+     */
+    get isEditMode() {
+        const { mode, dotCMSHost } = getUVEState() || {};
+        return mode === UVE_MODE.EDIT && dotCMSHost;
+    }
     /**
      * Returns the number of pages the contentlet is on
      *
      * @readonly
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     get onNumberOfPages() {
         return this.contentlet['onNumberOfPages'] || 1;
@@ -121,11 +273,11 @@ class DotEditableTextComponent {
      *
      * @param {MessageEvent} { data }
      * @return {*}
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     onMessage({ data }) {
         const { name, payload } = data;
-        if (name !== NOTIFY_CLIENT.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {
+        if (name !== __DOTCMS_UVE_EVENT__.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {
             return;
         }
         const { oldInode, inode } = payload;
@@ -136,14 +288,17 @@ class DotEditableTextComponent {
         }
     }
     ngOnInit() {
-        this.isInsideEditor = isInsideEditor();
-        if (!this.isInsideEditor) {
+        const { dotCMSHost } = getUVEState() || {};
+        if (!this.isEditMode) {
             this.innerHTMLToElement();
+            if (!dotCMSHost) {
+                console.warn(this.#NotDotCMSHostMessage);
+            }
             return;
         }
         this.init = {
             ...TINYMCE_CONFIG[this.mode],
-            base_url: `${DotCmsClient.dotcmsUrl}/ext/tinymcev7`
+            base_url: `${dotCMSHost}/ext/tinymcev7`
         };
     }
     ngOnChanges() {
@@ -157,18 +312,18 @@ class DotEditableTextComponent {
      *
      * @param {EventObj<MouseEvent>} { event }
      * @return {*}
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     onMouseDown({ event }) {
-        if (this.onNumberOfPages <= 1 || this.editorComponent.editor.hasFocus()) {
+        if (Number(this.onNumberOfPages) <= 1 || this.editorComponent.editor.hasFocus()) {
             return;
         }
         const { inode, languageId: language } = this.contentlet;
         event.stopPropagation();
         event.preventDefault();
         try {
-            postMessageToEditor({
-                action: CLIENT_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
+            sendMessageToUVE({
+                action: DotCMSUVEAction.COPY_CONTENTLET_INLINE_EDITING,
                 payload: {
                     dataset: {
                         inode,
@@ -186,7 +341,7 @@ class DotEditableTextComponent {
      * Handle focus out event
      *
      * @return {*}
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     onFocusOut() {
         const content = this.editor.getContent({ format: this.format });
@@ -195,8 +350,8 @@ class DotEditableTextComponent {
         }
         const { inode, languageId: langId } = this.contentlet;
         try {
-            postMessageToEditor({
-                action: CLIENT_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,
+            sendMessageToUVE({
+                action: DotCMSUVEAction.UPDATE_CONTENTLET_INLINE_EDITING,
                 payload: {
                     content,
                     dataset: {
@@ -217,7 +372,7 @@ class DotEditableTextComponent {
      * @private
      * @param {string} editedContent
      * @return {*}
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     innerHTMLToElement() {
         const element = this.#elementRef.nativeElement;
@@ -231,31 +386,33 @@ class DotEditableTextComponent {
      * @private
      * @param {string} editedContent
      * @return {*}
-     * @memberof DotEditableTextComponent
+     * @memberof DotCMSEditableTextComponent
      */
     didContentChange(editedContent) {
         return this.content !== editedContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotEditableTextComponent, isStandalone: true, selector: "dot-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: "18.2.3", ngImport: i0, type: DotCMSEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", 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: () => {
-                    return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
+                    const { dotCMSHost } = getUVEState() || {};
+                    return `${dotCMSHost || ''}${__TINYMCE_PATH_ON_DOTCMS__}`;
                 }
             }
-        ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isInsideEditor) {\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):hover{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"] }] }); }
+        ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isEditMode) {\n    <editor\n        #tinyEditor\n        [init]=\"init\"\n        [initialValue]=\"content\"\n        (onMouseDown)=\"onMouseDown($event)\"\n        (onFocusOut)=\"onFocusOut()\" />\n}\n", styles: [":host ::ng-deep .mce-content-body:not(.mce-edit-focus){outline:2px solid #006ce7;border-radius:4px}\n"], dependencies: [{ kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "disabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotEditableTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditableTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dot-editable-text', standalone: true, imports: [EditorComponent], providers: [
+            args: [{ selector: 'dotcms-editable-text', standalone: true, imports: [EditorComponent], providers: [
                         {
                             provide: TINYMCE_SCRIPT_SRC,
                             useFactory: () => {
-                                return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
+                                const { dotCMSHost } = getUVEState() || {};
+                                return `${dotCMSHost || ''}${__TINYMCE_PATH_ON_DOTCMS__}`;
                             }
                         }
-                    ], template: "@if (isInsideEditor) {\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):hover{outline:2px solid #006ce7;border-radius:4px}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { editorComponent: [{
                 type: ViewChild,
                 args: [EditorComponent]
@@ -272,404 +429,1225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 args: ['window:message', ['$event']]
             }] } });
 
-/**
- * @author dotCMS
- * @description This service is responsible for managing the page context.
- * @export
- * @class PageContextService
- */
-class PageContextService {
-    constructor() {
-        this.context$ = new BehaviorSubject(null);
-    }
-    /**
-     * @description Get the context
-     * @readonly
-     * @type {DotCMSPageContext}
-     * @memberof PageContextService
-     */
-    get context() {
-        return this.context$.getValue();
-    }
-    /**
-     * @description Get the context as an observable
-     * @readonly
-     * @memberof PageContextService
-     */
-    get contextObs$() {
-        return this.context$.asObservable();
-    }
-    /**
-     * @description Get the current page asset
-     * @readonly
-     * @type {(Observable<DotCMSPageAsset | null>)}
-     * @memberof PageContextService
-     */
-    get currentPage$() {
-        return this.contextObs$.pipe(map((context) => context?.pageAsset || null));
-    }
-    /**
-     *
-     * @description Set the context
-     * @param {DotCMSPageAsset} value
-     * @memberof DotcmsContextService
-     */
-    setContext(pageAsset, components) {
-        this.context$.next({
-            pageAsset,
-            components,
-            isInsideEditor: isInsideEditor()
-        });
-    }
-    /**
-     * @description Set the page asset in the context
-     * @param {DotCMSPageAsset} pageAsset
-     * @memberof PageContextService
-     */
-    setPageAsset(pageAsset) {
-        this.context$.next({
-            ...this.context,
-            pageAsset
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageContextService, providedIn: 'root' }); }
+class DotCodeBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotCodeBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-code-block", ngImport: i0, template: `
+        <pre>
+            <code>
+                <ng-content />
+            </code>
+        </pre>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageContextService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCodeBlock, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: 'dotcms-block-editor-renderer-code-block',
+                    standalone: true,
+                    template: `
+        <pre>
+            <code>
+                <ng-content />
+            </code>
+        </pre>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+class DotBlockQuote {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBlockQuote, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotBlockQuote, isStandalone: true, selector: "dotcms-block-editor-renderer-block-quote", ngImport: i0, template: `
+        <blockquote>
+            <ng-content />
+        </blockquote>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBlockQuote, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-block-quote',
+                    standalone: true,
+                    template: `
+        <blockquote>
+            <ng-content />
+        </blockquote>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
-//Changed the type, to avoid SQ issue.
-//This should be put inside a lib
-/**
- * Represents a mapping of numbers to corresponding CSS class names for column end values.
- * @typedef {Record<number, string | null>} EndClassMap
- */
-const endClassMap = {
-    1: 'col-end-1',
-    2: 'col-end-2',
-    3: 'col-end-3',
-    4: 'col-end-4',
-    5: 'col-end-5',
-    6: 'col-end-6',
-    7: 'col-end-7',
-    8: 'col-end-8',
-    9: 'col-end-9',
-    10: 'col-end-10',
-    11: 'col-end-11',
-    12: 'col-end-12',
-    13: 'col-end-13'
-};
-//Changed the type, to avoid SQ issue.
-//This should be put inside a lib
-/**
- * Represents a mapping of numbers to CSS class names for starting columns.
- * @typedef {Record<number, string | null>} StartClassMap
- */
-const startClassMap = {
-    1: 'col-start-1',
-    2: 'col-start-2',
-    3: 'col-start-3',
-    4: 'col-start-4',
-    5: 'col-start-5',
-    6: 'col-start-6',
-    7: 'col-start-7',
-    8: 'col-start-8',
-    9: 'col-start-9',
-    10: 'col-start-10',
-    11: 'col-start-11',
-    12: 'col-start-12'
-};
-/**
- * Retrieves the data for a set of containers.
- *
- * @param containers - The DotCMSPageAssetContainer object containing the containers.
- * @param containerRef - The DotCMSContainer object representing the container reference.
- * @returns An object containing the container data, accept types, contentlets, and variant ID.
- */
-const getContainersData = (containers, containerRef) => {
-    const { identifier, uuid } = containerRef;
-    const { containerStructures, container } = containers[identifier];
-    const { variantId } = container?.parentPermissionable || {};
-    const acceptTypes = containerStructures
-        .map((structure) => structure.contentTypeVar)
-        .join(',');
-    // Get the contentlets for "this" container
-    const contentlets = containers[identifier].contentlets[`uuid-${uuid}`] ??
-        containers[identifier].contentlets[`uuid-dotParser_${uuid}`];
-    if (!contentlets) {
-        console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
-    }
-    return {
-        ...containers[identifier].container,
-        acceptTypes,
-        contentlets: contentlets ?? [],
-        variantId
-    };
-};
-/**
- * Returns the position style classes based on the start and end values.
- * Used to set the grid column start and end values.
- * @param start - The start value.
- * @param end - The end value.
- * @returns An object containing the startClass and endClass.
- */
-const getPositionStyleClasses = (start, end) => {
-    const startClass = startClassMap[start];
-    const endClass = endClassMap[end];
-    return {
-        startClass,
-        endClass
-    };
-};
-
-/**
- * This component is responsible to display a message when there is no component for a contentlet.
- *
- * @export
- * @class NoComponent
- */
-class NoComponent {
+class NoComponentProvided {
     constructor() {
-        /**
-         * The data-testid attribute used for identifying the component during testing.
-         */
-        this.testId = 'no-component';
+        this.style = {
+            backgroundColor: '#fffaf0',
+            color: '#333',
+            padding: '1rem',
+            borderRadius: '0.5rem',
+            marginBottom: '1rem',
+            marginTop: '1rem',
+            border: '1px solid #ed8936'
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NoComponent, isStandalone: true, selector: "dotcms-no-component", inputs: { contentlet: "contentlet" }, host: { properties: { "attr.data-testid": "this.testId" } }, ngImport: i0, template: `
-        No Component for {{ contentlet.contentType }}
-    `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponentProvided, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", 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
+            <strong style="color: #c05621">{{ contentType || 'Unknown' }}</strong>
+            .
+            <br />
+            Please refer to the
+            <a
+                href="https://dev.dotcms.com/docs/block-editor"
+                target="_blank"
+                rel="noopener noreferrer"
+                style="color: #c05621">
+                Block Editor Custom Renderers Documentation
+            </a>
+            for guidance.
+        </div>
+    `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponentProvided, decorators: [{
             type: Component,
-            args: [{ selector: 'dotcms-no-component', standalone: true, template: `
-        No Component for {{ contentlet.contentType }}
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { contentlet: [{
+            args: [{
+                    selector: 'dotcms-no-component-provided',
+                    standalone: true,
+                    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
+            <strong style="color: #c05621">{{ contentType || 'Unknown' }}</strong>
+            .
+            <br />
+            Please refer to the
+            <a
+                href="https://dev.dotcms.com/docs/block-editor"
+                target="_blank"
+                rel="noopener noreferrer"
+                style="color: #c05621">
+                Block Editor Custom Renderers Documentation
+            </a>
+            for guidance.
+        </div>
+    `
+                }]
+        }], propDecorators: { contentType: [{
                 type: Input
-            }], testId: [{
-                type: HostBinding,
-                args: ['attr.data-testid']
             }] } });
-
 /**
- * This component is responsible to display a contentlet.
- *
- * @export
- * @class ContentletComponent
- * @implements {OnChanges}
+ * DotContent component that renders content based on content type
  */
-class ContentletComponent {
+class DotContentletBlock {
     constructor() {
-        /**
-         * The identifier of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.identifier = null;
-        /**
-         * The base type of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.baseType = null;
-        /**
-         * The title of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.title = null;
-        /**
-         * The inode of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.inode = null;
-        /**
-         * The type of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.dotType = null;
-        /**
-         * The container of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.dotContainer = null;
-        /**
-         * The number of pages where the contentlet appears
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.numberOfPages = null;
-        /**
-         * The content of contentlet component.
-         *
-         * @type {(string | null)}
-         * @memberof ContentletComponent
-         */
-        this.dotContent = null;
+        this.$data = computed(() => this.attrs?.['data']);
+        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.`;
     }
-    ngOnChanges() {
-        this.identifier = this.contentlet.identifier;
-        this.baseType = this.contentlet.baseType;
-        this.title = this.contentlet.title;
-        this.inode = this.contentlet.inode;
-        this.dotType = this.contentlet.contentType;
-        this.dotContainer = this.container;
-        this.numberOfPages = this.contentlet['onNumberOfPages'];
-        this.dotContent = 'contentlet';
+    get isDevMode() {
+        return getUVEState()?.mode === UVE_MODE.EDIT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet-wrapper", inputs: { contentlet: "contentlet", container: "container" }, host: { properties: { "attr.data-dot-identifier": "this.identifier", "attr.data-dot-basetype": "this.baseType", "attr.data-dot-title": "this.title", "attr.data-dot-inode": "this.inode", "attr.data-dot-type": "this.dotType", "attr.data-dot-container": "this.dotContainer", "attr.data-dot-on-number-of-pages": "this.numberOfPages", "attr.data-dot-object": "this.dotContent" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    ngOnInit() {
+        if (!this.$data()) {
+            console.error(this.DOT_CONTENT_NO_DATA_MESSAGE);
+            return;
+        }
+        const contentType = this.$data()?.contentType || '';
+        this.contentComponent = this.customRenderers?.[contentType];
+        if (!this.contentComponent) {
+            console.warn(this.DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotContentletBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-contentlet", inputs: { customRenderers: "customRenderers", attrs: "attrs" }, ngImport: i0, template: `
+        @if (contentComponent) {
+            <ng-container
+                *ngComponentOutlet="
+                    contentComponent | async;
+                    inputs: { contentlet: $data() }
+                "></ng-container>
+        } @else if (isDevMode) {
+            <dotcms-no-component-provided [contentType]="$data()?.contentType" />
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: NoComponentProvided, selector: "dotcms-no-component-provided", inputs: ["contentType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotContentletBlock, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dotcms-contentlet-wrapper',
+                    selector: 'dotcms-block-editor-renderer-contentlet',
                     standalone: true,
-                    template: '<ng-content></ng-content>',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [NgComponentOutlet, AsyncPipe, NoComponentProvided],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @if (contentComponent) {
+            <ng-container
+                *ngComponentOutlet="
+                    contentComponent | async;
+                    inputs: { contentlet: $data() }
+                "></ng-container>
+        } @else if (isDevMode) {
+            <dotcms-no-component-provided [contentType]="$data()?.contentType" />
+        }
+    `
                 }]
-        }], propDecorators: { contentlet: [{
-                type: Input,
-                args: [{ required: true }]
-            }], container: [{
+        }], propDecorators: { customRenderers: [{
+                type: Input
+            }], attrs: [{
                 type: Input
-            }], identifier: [{
-                type: HostBinding,
-                args: ['attr.data-dot-identifier']
-            }], baseType: [{
-                type: HostBinding,
-                args: ['attr.data-dot-basetype']
-            }], title: [{
-                type: HostBinding,
-                args: ['attr.data-dot-title']
-            }], inode: [{
-                type: HostBinding,
-                args: ['attr.data-dot-inode']
-            }], dotType: [{
-                type: HostBinding,
-                args: ['attr.data-dot-type']
-            }], dotContainer: [{
-                type: HostBinding,
-                args: ['attr.data-dot-container']
-            }], numberOfPages: [{
-                type: HostBinding,
-                args: ['attr.data-dot-on-number-of-pages']
-            }], dotContent: [{
-                type: HostBinding,
-                args: ['attr.data-dot-object']
             }] } });
 
-/**
- * This component is responsible to display a container with contentlets.
- *
- * @export
- * @class ContainerComponent
- * @implements {OnChanges}
- */
-class ContainerComponent {
+class DotImageBlock {
     constructor() {
-        this.pageContextService = inject(PageContextService);
-        this.NoComponent = NoComponent;
-        this.$isInsideEditor = signal(false);
-        this.$contentlets = signal([]);
-        this.$dotContainer = signal(null);
-        this.$dotContainerAsString = computed(() => JSON.stringify(this.$dotContainer()));
+        this.$srcURL = computed(() => this.attrs?.['src']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotImageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotImageBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-image", inputs: { attrs: "attrs" }, ngImport: i0, template: `
+        <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotImageBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-image',
+                    standalone: true,
+                    template: `
+        <img [alt]="attrs?.['alt']" [src]="$srcURL()" />
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { attrs: [{
+                type: Input
+            }] } });
+
+class DotBulletList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBulletList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotBulletList, isStandalone: true, selector: "dotcms-block-editor-renderer-bullet-list", ngImport: i0, template: `
+        <ul>
+            <ng-content />
+        </ul>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotBulletList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-bullet-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ul>
+            <ng-content />
+        </ul>
+    `
+                }]
+        }] });
+class DotOrdererList {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotOrdererList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotOrdererList, isStandalone: true, selector: "dotcms-block-editor-renderer-ordered-list", ngImport: i0, template: `
+        <ol>
+            <ng-content />
+        </ol>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotOrdererList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-ordered-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <ol>
+            <ng-content />
+        </ol>
+    `
+                }]
+        }] });
+class DotListItem {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotListItem, isStandalone: true, selector: "dotcms-block-editor-renderer-list-item", ngImport: i0, template: `
+        <li>
+            <ng-content />
+        </li>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotListItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-list-item',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <li>
+            <ng-content />
+        </li>
+    `
+                }]
+        }] });
+
+class DotTableBlock {
+    constructor() {
+        this.blockEditorItem = DotCMSBlockEditorItemComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTableBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotTableBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-table", inputs: { content: "content" }, ngImport: i0, template: `
+        <table>
+            <thead>
+                @for (rowNode of content?.slice(0, 1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <th
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </th>
+                        }
+                    </tr>
+                }
+            </thead>
+            <tbody>
+                @for (rowNode of content?.slice(1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <td
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTableBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-table',
+                    standalone: true,
+                    imports: [NgComponentOutlet],
+                    template: `
+        <table>
+            <thead>
+                @for (rowNode of content?.slice(0, 1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <th
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </th>
+                        }
+                    </tr>
+                }
+            </thead>
+            <tbody>
+                @for (rowNode of content?.slice(1); track rowNode.type) {
+                    <tr>
+                        @for (cellNode of rowNode.content; track cellNode.type) {
+                            <td
+                                [attr.colspan]="cellNode.attrs?.['colspan'] || 1"
+                                [attr.rowspan]="cellNode.attrs?.['rowspan'] || 1">
+                                <ng-container
+                                    *ngComponentOutlet="
+                                        blockEditorItem;
+                                        inputs: { content: cellNode.content }
+                                    "></ng-container>
+                            </td>
+                        }
+                    </tr>
+                }
+            </tbody>
+        </table>
+    `
+                }]
+        }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class DotParagraphBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotParagraphBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotParagraphBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-paragraph", ngImport: i0, template: `
+        <p>
+            <ng-content />
+        </p>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotParagraphBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-paragraph',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <p>
+            <ng-content />
+        </p>
+    `
+                }]
+        }] });
+class DotHeadingBlock {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotHeadingBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotHeadingBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-heading", inputs: { level: "level" }, ngImport: i0, template: `
+        @switch (level) {
+            @case ('1') {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+            @case ('2') {
+                <h2>
+                    <ng-content />
+                </h2>
+            }
+            @case ('3') {
+                <h3>
+                    <ng-content />
+                </h3>
+            }
+            @case ('4') {
+                <h4>
+                    <ng-content />
+                </h4>
+            }
+            @case ('5') {
+                <h5>
+                    <ng-content />
+                </h5>
+            }
+            @case ('6') {
+                <h6>
+                    <ng-content />
+                </h6>
+            }
+            @default {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotHeadingBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-heading',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @switch (level) {
+            @case ('1') {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+            @case ('2') {
+                <h2>
+                    <ng-content />
+                </h2>
+            }
+            @case ('3') {
+                <h3>
+                    <ng-content />
+                </h3>
+            }
+            @case ('4') {
+                <h4>
+                    <ng-content />
+                </h4>
+            }
+            @case ('5') {
+                <h5>
+                    <ng-content />
+                </h5>
+            }
+            @case ('6') {
+                <h6>
+                    <ng-content />
+                </h6>
+            }
+            @default {
+                <h1>
+                    <ng-content />
+                </h1>
+            }
+        }
+    `
+                }]
+        }], propDecorators: { level: [{
+                type: Input
+            }] } });
+class DotTextBlock {
+    constructor() {
+        this.marks = [];
+        this.text = '';
+        this.$remainingMarks = computed(() => this.marks?.slice(1));
+        this.$currentAttrs = computed(() => {
+            const attrs = { ...(this.marks?.[0]?.attrs || {}) };
+            if (attrs['class']) {
+                attrs['className'] = attrs['class'];
+                delete attrs['class'];
+            }
+            return attrs;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTextBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotTextBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-text", inputs: { marks: "marks", text: "text" }, ngImport: i0, template: `
+        @switch (marks?.[0]?.type) {
+            @case ('link') {
+                <a
+                    [attr.href]="$currentAttrs()['href'] || ''"
+                    [attr.target]="$currentAttrs()['target'] || ''">
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </a>
+            }
+            @case ('bold') {
+                <strong>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </strong>
+            }
+            @case ('underline') {
+                <u>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </u>
+            }
+            @case ('italic') {
+                <em>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </em>
+            }
+            @case ('strike') {
+                <s>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </s>
+            }
+            @case ('superscript') {
+                <sup>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sup>
+            }
+            @case ('subscript') {
+                <sub>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sub>
+            }
+            @default {
+                {{ text }}
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: DotTextBlock, selector: "dotcms-block-editor-renderer-text", inputs: ["marks", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotTextBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-text',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        @switch (marks?.[0]?.type) {
+            @case ('link') {
+                <a
+                    [attr.href]="$currentAttrs()['href'] || ''"
+                    [attr.target]="$currentAttrs()['target'] || ''">
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </a>
+            }
+            @case ('bold') {
+                <strong>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </strong>
+            }
+            @case ('underline') {
+                <u>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </u>
+            }
+            @case ('italic') {
+                <em>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </em>
+            }
+            @case ('strike') {
+                <s>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </s>
+            }
+            @case ('superscript') {
+                <sup>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sup>
+            }
+            @case ('subscript') {
+                <sub>
+                    <dotcms-block-editor-renderer-text [marks]="$remainingMarks()" [text]="text" />
+                </sub>
+            }
+            @default {
+                {{ text }}
+            }
+        }
+    `
+                }]
+        }], propDecorators: { marks: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
+
+class DotUnknownBlockComponent {
+    constructor() {
+        this.style = {
+            backgroundColor: '#fff5f5',
+            color: '#333',
+            padding: '1rem',
+            borderRadius: '0.5rem',
+            marginBottom: '1rem',
+            marginTop: '1rem',
+            border: '1px solid #fc8181'
+        };
+    }
+    get isEditMode() {
+        return getUVEState()?.mode === UVE_MODE.EDIT;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotUnknownBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", 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>
+                The block type
+                <strong>{{ node.type }}</strong>
+                is not recognized. Please check your
+                <a
+                    href="https://dev.dotcms.com/docs/block-editor"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    configuration
+                </a>
+                or contact support for assistance.
+            </div>
+        }
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotUnknownBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-unknown',
+                    standalone: true,
+                    template: `
+        @if (isEditMode) {
+            <div [style]="style" data-testid="unknown-block-type">
+                <strong style="color: #c53030">Warning:</strong>
+                The block type
+                <strong>{{ node.type }}</strong>
+                is not recognized. Please check your
+                <a
+                    href="https://dev.dotcms.com/docs/block-editor"
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    configuration
+                </a>
+                or contact support for assistance.
+            </div>
+        }
+    `
+                }]
+        }], propDecorators: { node: [{
+                type: Input
+            }] } });
+
+class DotVideoBlock {
+    constructor() {
+        this.$srcURL = computed(() => this.attrs?.['src']);
+        this.$posterURL = computed(() => this.attrs?.['data']?.['thumbnail']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotVideoBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DotVideoBlock, isStandalone: true, selector: "dotcms-block-editor-renderer-video", inputs: { attrs: "attrs" }, ngImport: i0, template: `
+        <video
+            [controls]="true"
+            preload="metadata"
+            [poster]="this.$posterURL()"
+            [width]="attrs?.['width']"
+            [height]="attrs?.['height']">
+            <track default kind="captions" srclang="en" />
+            <source [src]="this.$srcURL()" [type]="attrs?.['mimeType']" />
+            Your browser does not support the
+            <code>video</code>
+            element.
+        </video>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotVideoBlock, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-block-editor-renderer-video',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <video
+            [controls]="true"
+            preload="metadata"
+            [poster]="this.$posterURL()"
+            [width]="attrs?.['width']"
+            [height]="attrs?.['height']">
+            <track default kind="captions" srclang="en" />
+            <source [src]="this.$srcURL()" [type]="attrs?.['mimeType']" />
+            Your browser does not support the
+            <code>video</code>
+            element.
+        </video>
+    `
+                }]
+        }], propDecorators: { attrs: [{
+                type: Input
+            }] } });
+
+class DotCMSBlockEditorItemComponent {
+    constructor() {
+        this.BLOCKS = BlockEditorDefaultBlocks;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorItemComponent, isStandalone: true, selector: "dotcms-block-editor-renderer-block", inputs: { content: "content", customRenderers: "customRenderers" }, ngImport: i0, template: "@for (node of content; track node) {\n    @if (customRenderers?.[node.type]) {\n        <ng-container\n            *ngTemplateOutlet=\"\n                customRender;\n                context: { customRender: customRenderers?.[node.type], node: node }\n            \"></ng-container>\n    } @else {\n        @switch (node.type) {\n            @case (BLOCKS.PARAGRAPH) {\n                <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-paragraph>\n            }\n\n            @case (BLOCKS.TEXT) {\n                <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n            }\n\n            @case (BLOCKS.HEADING) {\n                <dotcms-block-editor-renderer-heading\n                    [style]=\"node.attrs || {}\"\n                    [level]=\"node.attrs?.['level'] || '1'\">\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-heading>\n            }\n\n            @case (BLOCKS.BULLET_LIST) {\n                <dotcms-block-editor-renderer-bullet-list>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-bullet-list>\n            }\n\n            @case (BLOCKS.ORDERED_LIST) {\n                <dotcms-block-editor-renderer-ordered-list>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-ordered-list>\n            }\n\n            @case (BLOCKS.LIST_ITEM) {\n                <dotcms-block-editor-renderer-list-item>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-list-item>\n            }\n\n            @case (BLOCKS.BLOCK_QUOTE) {\n                <dotcms-block-editor-renderer-block-quote>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-block-quote>\n            }\n\n            @case (BLOCKS.CODE_BLOCK) {\n                <dotcms-block-editor-renderer-code-block>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-code-block>\n            }\n\n            @case (BLOCKS.HARDBREAK) {\n                <br />\n            }\n\n            @case (BLOCKS.HORIZONTAL_RULE) {\n                <hr />\n            }\n\n            @case (BLOCKS.DOT_IMAGE) {\n                <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n            }\n\n            @case (BLOCKS.DOT_VIDEO) {\n                <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n            }\n\n            @case (BLOCKS.TABLE) {\n                <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [attrs]=\"node.attrs || {}\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @default {\n                <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\n        *ngComponentOutlet=\"customRender | async; inputs: { content: node }\"></ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DotParagraphBlock, selector: "dotcms-block-editor-renderer-paragraph" }, { kind: "component", type: DotTextBlock, selector: "dotcms-block-editor-renderer-text", inputs: ["marks", "text"] }, { kind: "component", type: DotHeadingBlock, selector: "dotcms-block-editor-renderer-heading", inputs: ["level"] }, { kind: "component", type: DotBulletList, selector: "dotcms-block-editor-renderer-bullet-list" }, { kind: "component", type: DotOrdererList, selector: "dotcms-block-editor-renderer-ordered-list" }, { kind: "component", type: DotListItem, selector: "dotcms-block-editor-renderer-list-item" }, { kind: "component", type: DotCodeBlock, selector: "dotcms-block-editor-renderer-code-block" }, { kind: "component", type: DotBlockQuote, selector: "dotcms-block-editor-renderer-block-quote" }, { kind: "component", type: DotImageBlock, selector: "dotcms-block-editor-renderer-image", inputs: ["attrs"] }, { kind: "component", type: DotVideoBlock, selector: "dotcms-block-editor-renderer-video", inputs: ["attrs"] }, { kind: "component", type: DotTableBlock, selector: "dotcms-block-editor-renderer-table", inputs: ["content"] }, { kind: "component", type: DotContentletBlock, selector: "dotcms-block-editor-renderer-contentlet", inputs: ["customRenderers", "attrs"] }, { kind: "component", type: DotUnknownBlockComponent, selector: "dotcms-block-editor-renderer-unknown", inputs: ["node"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dotcms-block-editor-renderer-block', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        AsyncPipe,
+                        DotParagraphBlock,
+                        DotTextBlock,
+                        DotHeadingBlock,
+                        DotBulletList,
+                        DotOrdererList,
+                        DotListItem,
+                        DotCodeBlock,
+                        DotBlockQuote,
+                        DotImageBlock,
+                        DotVideoBlock,
+                        DotTableBlock,
+                        DotContentletBlock,
+                        DotUnknownBlockComponent
+                    ], template: "@for (node of content; track node) {\n    @if (customRenderers?.[node.type]) {\n        <ng-container\n            *ngTemplateOutlet=\"\n                customRender;\n                context: { customRender: customRenderers?.[node.type], node: node }\n            \"></ng-container>\n    } @else {\n        @switch (node.type) {\n            @case (BLOCKS.PARAGRAPH) {\n                <dotcms-block-editor-renderer-paragraph [style]=\"node.attrs\">\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-paragraph>\n            }\n\n            @case (BLOCKS.TEXT) {\n                <dotcms-block-editor-renderer-text [marks]=\"node.marks\" [text]=\"node.text || ''\" />\n            }\n\n            @case (BLOCKS.HEADING) {\n                <dotcms-block-editor-renderer-heading\n                    [style]=\"node.attrs || {}\"\n                    [level]=\"node.attrs?.['level'] || '1'\">\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-heading>\n            }\n\n            @case (BLOCKS.BULLET_LIST) {\n                <dotcms-block-editor-renderer-bullet-list>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-bullet-list>\n            }\n\n            @case (BLOCKS.ORDERED_LIST) {\n                <dotcms-block-editor-renderer-ordered-list>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-ordered-list>\n            }\n\n            @case (BLOCKS.LIST_ITEM) {\n                <dotcms-block-editor-renderer-list-item>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-list-item>\n            }\n\n            @case (BLOCKS.BLOCK_QUOTE) {\n                <dotcms-block-editor-renderer-block-quote>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-block-quote>\n            }\n\n            @case (BLOCKS.CODE_BLOCK) {\n                <dotcms-block-editor-renderer-code-block>\n                    <dotcms-block-editor-renderer-block\n                        [content]=\"node.content\"\n                        [customRenderers]=\"customRenderers\" />\n                </dotcms-block-editor-renderer-code-block>\n            }\n\n            @case (BLOCKS.HARDBREAK) {\n                <br />\n            }\n\n            @case (BLOCKS.HORIZONTAL_RULE) {\n                <hr />\n            }\n\n            @case (BLOCKS.DOT_IMAGE) {\n                <dotcms-block-editor-renderer-image [attrs]=\"node.attrs || {}\" />\n            }\n\n            @case (BLOCKS.DOT_VIDEO) {\n                <dotcms-block-editor-renderer-video [attrs]=\"node.attrs || {}\" />\n            }\n\n            @case (BLOCKS.TABLE) {\n                <dotcms-block-editor-renderer-table [content]=\"node.content\" />\n            }\n\n            @case (BLOCKS.DOT_CONTENT) {\n                <dotcms-block-editor-renderer-contentlet\n                    [attrs]=\"node.attrs || {}\"\n                    [customRenderers]=\"customRenderers\" />\n            }\n\n            @default {\n                <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\n        *ngComponentOutlet=\"customRender | async; inputs: { content: node }\"></ng-container>\n</ng-template>\n" }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], customRenderers: [{
+                type: Input
+            }] } });
+
+/**
+ * A component that renders content from DotCMS's Block Editor field.
+ *
+ * This component provides an easy way to render Block Editor content in your Angular applications.
+ * It handles the rendering of standard blocks and allows customization through custom renderers.
+ *
+ * For more information about Block Editor, see {@link https://dev.dotcms.com/docs/block-editor}
+ *
+ * @example
+ * ```html
+ * <dotcms-block-editor-renderer
+ *   [blocks]="myBlockEditorContent"
+ *   [customRenderers]="myCustomRenderers">
+ * </dotcms-block-editor-renderer>
+ * ```
+ */
+class DotCMSBlockEditorRendererComponent {
+    constructor() {
+        this.$blockEditorState = signal({ error: null });
+        this.$isInEditMode = signal(getUVEState()?.mode === UVE_MODE.EDIT);
+    }
+    ngOnInit() {
+        const state = isValidBlocks(this.blocks);
+        if (state.error) {
+            console.error('Error in dotcms-block-editor-renderer: ', state.error);
+        }
+        this.$blockEditorState.set(isValidBlocks(this.blocks));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSBlockEditorRendererComponent, isStandalone: true, selector: "dotcms-block-editor-renderer", inputs: { blocks: "blocks", customRenderers: "customRenderers", class: "class", style: "style" }, ngImport: i0, template: "@if ($blockEditorState().error && $isInEditMode()) {\n    <div data-testid=\"invalid-blocks-message\">\n        {{ $blockEditorState().error }}\n    </div>\n} @else if (!$blockEditorState().error) {\n    <div [class]=\"class\" [style]=\"style\">\n        <dotcms-block-editor-renderer-block\n            [content]=\"blocks.content\"\n            [customRenderers]=\"customRenderers\" />\n    </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DotCMSBlockEditorItemComponent, selector: "dotcms-block-editor-renderer-block", inputs: ["content", "customRenderers"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSBlockEditorRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dotcms-block-editor-renderer', standalone: true, imports: [DotCMSBlockEditorItemComponent], template: "@if ($blockEditorState().error && $isInEditMode()) {\n    <div data-testid=\"invalid-blocks-message\">\n        {{ $blockEditorState().error }}\n    </div>\n} @else if (!$blockEditorState().error) {\n    <div [class]=\"class\" [style]=\"style\">\n        <dotcms-block-editor-renderer-block\n            [content]=\"blocks.content\"\n            [customRenderers]=\"customRenderers\" />\n    </div>\n}\n" }]
+        }], propDecorators: { blocks: [{
+                type: Input
+            }], customRenderers: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }] } });
+
+/**
+ * @description This component is used to display a message when a page is missing the required `layout.body` property.
+ * @internal
+ * @class PageErrorMessageComponent
+ */
+class PageErrorMessageComponent {
+    ngOnInit() {
+        console.warn('Missing required layout.body property in page');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: PageErrorMessageComponent, isStandalone: true, selector: "dotcms-page-error-message", ngImport: i0, template: `
+        <div
+            data-testid="error-message"
+            style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 4px;">
+            <p style="margin: 0 0 0.5rem; color: #666;">
+                The
+                <code>page</code>
+                is missing the required
+                <code>layout.body</code>
+                property.
+            </p>
+            <p style="margin: 0; color: #666;">
+                Make sure the page asset is properly loaded and includes a layout configuration.
+            </p>
+        </div>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageErrorMessageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-page-error-message',
+                    standalone: true,
+                    imports: [],
+                    template: `
+        <div
+            data-testid="error-message"
+            style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 4px;">
+            <p style="margin: 0 0 0.5rem; color: #666;">
+                The
+                <code>page</code>
+                is missing the required
+                <code>layout.body</code>
+                property.
+            </p>
+            <p style="margin: 0; color: #666;">
+                Make sure the page asset is properly loaded and includes a layout configuration.
+            </p>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+const EMPTY_DOTCMS_PAGE_STORE = {
+    page: {},
+    components: {},
+    mode: PRODUCTION_MODE
+};
+/**
+ * @description This service is responsible for managing the page context.
+ * @internal
+ * @author dotCMS
+ * @export
+ * @class DotCMSStore
+ */
+class DotCMSStore {
+    constructor() {
+        this.$store = signal(EMPTY_DOTCMS_PAGE_STORE);
         /**
-         * The accept types for the container component.
-         *
-         * @type {(string | null)}
-         * @memberof ContainerComponent
+         * @description Get if the current context is in development mode
+         * @readonly
+         * @type {boolean}
+         * @memberof DotCMSStore
          */
+        this.$isDevMode = computed(() => {
+            const uveState = getUVEState();
+            if (uveState?.mode) {
+                return uveState?.mode === UVE_MODE.EDIT;
+            }
+            return this.$store()?.mode === DEVELOPMENT_MODE;
+        });
+    }
+    /**
+     * @description Get the store
+     * @readonly
+     * @type {DotCMSPageStore}
+     * @memberof DotCMSStore
+     */
+    get store() {
+        return this.$store();
+    }
+    /**
+     * @description Set the store
+     * @param {DotCMSPageStore} value
+     * @memberof DotCMSStore
+     */
+    setStore(store) {
+        this.$store.set(store);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSStore, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * @description This component is used to display a message when a container is not found.
+ * @export
+ * @internal
+ * @class ContainerNotFoundComponent
+ * @implements {OnInit}
+ */
+class ContainerNotFoundComponent {
+    constructor() {
+        this.identifier = 'unknown';
+        this.#dotcmsContextService = inject(DotCMSStore);
+        this.$isDevMode = this.#dotcmsContextService.$isDevMode;
+        this.emptyContainerStyle = EMPTY_CONTAINER_STYLE_ANGULAR;
+    }
+    #dotcmsContextService;
+    ngOnInit() {
+        if (this.$isDevMode()) {
+            console.error(`Container with identifier ${this.identifier} not found`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContainerNotFoundComponent, isStandalone: true, selector: "dotcms-container-not-found", inputs: { identifier: "identifier" }, ngImport: i0, template: `
+        @if ($isDevMode()) {
+            <div [attr.data-testid]="'container-not-found'" [ngStyle]="emptyContainerStyle">
+                This container with identifier {{ identifier }} was not found.
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerNotFoundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-container-not-found',
+                    standalone: true,
+                    imports: [NgStyle],
+                    template: `
+        @if ($isDevMode()) {
+            <div [attr.data-testid]="'container-not-found'" [ngStyle]="emptyContainerStyle">
+                This container with identifier {{ identifier }} was not found.
+            </div>
+        }
+    `
+                }]
+        }], propDecorators: { identifier: [{
+                type: Input
+            }] } });
+
+/**
+ * @description This component is used to display a message when a container is empty.
+ * @export
+ * @internal
+ * @class EmptyContainerComponent
+ */
+class EmptyContainerComponent {
+    constructor() {
+        this.emptyContainerStyle = EMPTY_CONTAINER_STYLE_ANGULAR;
+        this.#dotCMSStore = inject(DotCMSStore);
+        this.$isDevMode = this.#dotCMSStore.$isDevMode;
+    }
+    #dotCMSStore;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: EmptyContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", 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">
+                    This container is empty.
+                </span>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: EmptyContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-empty-container',
+                    standalone: true,
+                    imports: [NgStyle],
+                    template: `
+        @if ($isDevMode()) {
+            <div [ngStyle]="emptyContainerStyle" data-testid="empty-container">
+                <span data-testid="empty-container-message" data-dot-object="empty-content">
+                    This container is empty.
+                </span>
+            </div>
+        }
+    `
+                }]
+        }] });
+
+/**
+ * @description Fallback component that renders when no custom component is found for a contentlet
+ * @category Components
+ * @internal
+ * @class FallbackComponent
+ */
+class FallbackComponent {
+    constructor() {
+        this.UserNoComponent = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: FallbackComponent, isStandalone: true, selector: "dotcms-fallback-component", inputs: { UserNoComponent: "UserNoComponent", contentlet: "contentlet" }, ngImport: i0, template: `
+        @if (UserNoComponent) {
+            <ng-container *ngComponentOutlet="UserNoComponent | async; inputs: { contentlet }" />
+        } @else {
+            <div data-testid="dotcms-fallback-component">
+                <p>No component found for content type: {{ contentlet.contentType }}</p>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FallbackComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-fallback-component',
+                    standalone: true,
+                    imports: [AsyncPipe, NgComponentOutlet],
+                    template: `
+        @if (UserNoComponent) {
+            <ng-container *ngComponentOutlet="UserNoComponent | async; inputs: { contentlet }" />
+        } @else {
+            <div data-testid="dotcms-fallback-component">
+                <p>No component found for content type: {{ contentlet.contentType }}</p>
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { UserNoComponent: [{
+                type: Input
+            }], contentlet: [{
+                type: Input
+            }] } });
+
+/**
+ * @description Contentlet component that renders DotCMS content with development mode support
+ *
+ * @component
+ * @param {DotCMSContentlet} contentlet - The contentlet to be rendered
+ * @param {string} container - The container identifier
+ * @class ContentletComponent
+ */
+class ContentletComponent {
+    constructor() {
+        this.dotObject = 'contentlet';
+        this.#dotCMSStore = inject(DotCMSStore);
+        this.$contentlet = signal(null);
+        this.$UserComponent = signal(null);
+        this.$UserNoComponent = signal(null);
+        this.$isDevMode = this.#dotCMSStore.$isDevMode;
+        this.$haveContent = signal(false);
+        this.$style = computed(() => this.$isDevMode() && !this.$haveContent() ? { minHeight: '4rem' } : {});
+        this.$dotAttributes = computed(() => {
+            const contentlet = this.$contentlet();
+            if (!contentlet || !this.$isDevMode())
+                return {};
+            return getDotContentletAttributes(contentlet, this.containerData.identifier);
+        });
+        this.identifier = null;
+        this.basetype = null;
+        this.title = null;
+        this.inode = null;
+        this.type = null;
+        this.containerAttribute = null;
+        this.onNumberOfPages = null;
+        this.styleAttribute = null;
+    }
+    #dotCMSStore;
+    ngOnChanges() {
+        this.$contentlet.set(this.contentlet);
+        this.setupComponents();
+        this.identifier = this.$dotAttributes()['data-dot-identifier'];
+        this.basetype = this.$dotAttributes()['data-dot-basetype'];
+        this.title = this.$dotAttributes()['data-dot-title'];
+        this.inode = this.$dotAttributes()['data-dot-inode'];
+        this.type = this.$dotAttributes()['data-dot-type'];
+        this.containerAttribute = JSON.stringify(this.containerData);
+        this.onNumberOfPages = this.$dotAttributes()['data-dot-on-number-of-pages'];
+        this.styleAttribute = this.$style();
+    }
+    ngAfterViewInit() {
+        this.checkContent();
+    }
+    setupComponents() {
+        const store = this.#dotCMSStore.store;
+        if (!store)
+            return;
+        if (!store?.components)
+            return;
+        this.$UserComponent.set(store.components[this.contentlet?.contentType]);
+        this.$UserNoComponent.set(store.components[CUSTOM_NO_COMPONENT]);
+    }
+    checkContent() {
+        const element = this.contentletRef?.nativeElement;
+        if (element) {
+            const hasContent = element.getBoundingClientRect().height > 0;
+            this.$haveContent.set(hasContent);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContentletComponent, isStandalone: true, selector: "dotcms-contentlet", inputs: { contentlet: "contentlet", containerData: "containerData" }, host: { properties: { "attr.data-dot-object": "this.dotObject", "attr.data-dot-identifier": "this.identifier", "attr.data-dot-basetype": "this.basetype", "attr.data-dot-title": "this.title", "attr.data-dot-inode": "this.inode", "attr.data-dot-type": "this.type", "attr.data-dot-container": "this.containerAttribute", "attr.data-dot-on-number-of-pages": "this.onNumberOfPages", "style": "this.styleAttribute" } }, viewQueries: [{ propertyName: "contentletRef", first: true, predicate: ["contentletRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        @if ($UserComponent()) {
+            <ng-container
+                *ngComponentOutlet="
+                    $UserComponent() | async;
+                    inputs: { contentlet: $contentlet() ?? contentlet }
+                " />
+        } @else if ($isDevMode()) {
+            <dotcms-fallback-component
+                [UserNoComponent]="$UserNoComponent()"
+                [contentlet]="$contentlet() ?? contentlet" />
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: FallbackComponent, selector: "dotcms-fallback-component", inputs: ["UserNoComponent", "contentlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dotcms-contentlet',
+                    standalone: true,
+                    imports: [FallbackComponent, AsyncPipe, NgComponentOutlet],
+                    template: `
+        @if ($UserComponent()) {
+            <ng-container
+                *ngComponentOutlet="
+                    $UserComponent() | async;
+                    inputs: { contentlet: $contentlet() ?? contentlet }
+                " />
+        } @else if ($isDevMode()) {
+            <dotcms-fallback-component
+                [UserNoComponent]="$UserNoComponent()"
+                [contentlet]="$contentlet() ?? contentlet" />
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { contentlet: [{
+                type: Input,
+                args: [{ required: true }]
+            }], containerData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], contentletRef: [{
+                type: ViewChild,
+                args: ['contentletRef']
+            }], dotObject: [{
+                type: HostBinding,
+                args: ['attr.data-dot-object']
+            }], identifier: [{
+                type: HostBinding,
+                args: ['attr.data-dot-identifier']
+            }], basetype: [{
+                type: HostBinding,
+                args: ['attr.data-dot-basetype']
+            }], title: [{
+                type: HostBinding,
+                args: ['attr.data-dot-title']
+            }], inode: [{
+                type: HostBinding,
+                args: ['attr.data-dot-inode']
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.data-dot-type']
+            }], containerAttribute: [{
+                type: HostBinding,
+                args: ['attr.data-dot-container']
+            }], onNumberOfPages: [{
+                type: HostBinding,
+                args: ['attr.data-dot-on-number-of-pages']
+            }], styleAttribute: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+/**
+ * @description This component renders a container with all its content using the layout provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @category Components
+ * @internal
+ * @class ContainerComponent
+ */
+class ContainerComponent {
+    constructor() {
+        this.#dotCMSStore = inject(DotCMSStore);
+        this.$containerData = signal(null);
+        this.$contentlets = signal([]);
+        this.$isEmpty = computed(() => this.$contentlets().length === 0);
+        this.$dotAttributes = computed(() => {
+            const containerData = this.$containerData();
+            if (!containerData || !this.#dotCMSStore.$isDevMode()) {
+                return {};
+            }
+            return getDotContainerAttributes(containerData);
+        });
+        this.dotObject = 'container';
         this.acceptTypes = null;
-        /**
-         * The identifier for the container component.
-         *
-         * @type {(string | null)}
-         * @memberof ContainerComponent
-         */
         this.identifier = null;
-        /**
-         * The max contentlets for the container component.
-         *
-         * @type {(number | null)}
-         * @memberof ContainerComponent
-         */
         this.maxContentlets = null;
-        /**
-         * The uuid for the container component.
-         *
-         * @type {(string | null)}
-         * @memberof ContainerComponent
-         */
         this.uuid = null;
-        /**
-         * The class for the container component.
-         *
-         * @type {(string | null)}
-         * @memberof ContainerComponent
-         */
-        this.class = null;
-        /**
-         * The dot object for the container component.
-         *
-         * @type {(string | null)}
-         * @memberof ContainerComponent
-         */
-        this.dotObject = null;
-        /**
-         * The data-testid attribute used for identifying the component during testing.
-         *
-         * @memberof ContainerComponent
-         */
-        this.testId = 'dot-container';
     }
+    #dotCMSStore;
     ngOnChanges() {
-        const { pageAsset, components, isInsideEditor } = this.pageContextService.context;
-        const { acceptTypes, maxContentlets, variantId, path, contentlets } = getContainersData(pageAsset.containers, this.container);
-        const { identifier, uuid } = this.container;
-        this.componentsMap = components;
-        this.$isInsideEditor.set(isInsideEditor);
-        this.$contentlets.set(contentlets);
-        this.$dotContainer.set({
-            identifier: path ?? identifier,
-            acceptTypes,
-            maxContentlets,
-            variantId,
-            uuid
-        });
-        if (this.$isInsideEditor()) {
-            this.acceptTypes = acceptTypes;
-            this.identifier = identifier;
-            this.maxContentlets = maxContentlets;
-            this.uuid = uuid;
-            this.class = this.$contentlets().length ? null : 'empty-container';
-            this.dotObject = 'container';
+        const { page } = this.#dotCMSStore.store ?? {};
+        if (!page) {
+            return;
         }
+        this.$containerData.set(getContainersData(page, this.container));
+        this.$contentlets.set(getContentletsInContainer(page, this.container));
+        this.acceptTypes = this.$dotAttributes()['data-dot-accept-types'];
+        this.identifier = this.$dotAttributes()['data-dot-identifier'];
+        this.maxContentlets = this.$dotAttributes()['data-max-contentlets'];
+        this.uuid = this.$dotAttributes()['data-dot-uuid'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContainerComponent, isStandalone: true, selector: "dotcms-container", inputs: { container: "container" }, host: { properties: { "attr.data-dot-accept-types": "this.acceptTypes", "attr.data-dot-identifier": "this.identifier", "attr.data-max-contentlets": "this.maxContentlets", "attr.data-dot-uuid": "this.uuid", "class": "this.class", "attr.data-dot-object": "this.dotObject", "attr.data-testid": "this.testId" } }, usesOnChanges: true, ngImport: i0, template: "@if ($isInsideEditor()) {\n    @if ($contentlets().length) {\n        @for (contentlet of $contentlets(); track $index) {\n            <dotcms-contentlet-wrapper\n                [contentlet]=\"contentlet\"\n                [container]=\"$dotContainerAsString()\">\n                <ng-container\n                    *ngComponentOutlet=\"\n                        (componentsMap[contentlet.contentType] || componentsMap['CustomNoComponent']\n                            | async) || NoComponent;\n                        inputs: { contentlet }\n                    \" />\n            </dotcms-contentlet-wrapper>\n        }\n    } @else {\n        This container is empty.\n    }\n} @else {\n    @for (contentlet of $contentlets(); track $index) {\n        <ng-container\n            *ngComponentOutlet=\"\n                componentsMap[contentlet.contentType] | async;\n                inputs: { contentlet }\n            \" />\n    }\n}\n", styles: [":host.empty-container{width:100%;background-color:#ecf0fd;display:flex;justify-content:center;align-items:center;color:#030e32;height:10rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ContentletComponent, selector: "dotcms-contentlet-wrapper", inputs: ["contentlet", "container"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ContainerComponent, isStandalone: true, selector: "dotcms-container", inputs: { container: "container" }, host: { properties: { "attr.data-dot-object": "this.dotObject", "attr.data-dot-accept-types": "this.acceptTypes", "attr.data-dot-identifier": "this.identifier", "attr.data-max-contentlets": "this.maxContentlets", "attr.data-dot-uuid": "this.uuid" } }, usesOnChanges: true, ngImport: i0, template: `
+        @if (!$containerData()) {
+            <dotcms-container-not-found [identifier]="container.identifier" />
+        } @else if ($isEmpty()) {
+            <dotcms-empty-container />
+        } @else {
+            @for (contentlet of $contentlets(); track contentlet.identifier) {
+                <dotcms-contentlet [contentlet]="contentlet" [containerData]="$containerData()!" />
+            }
+        }
+    `, 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: "18.2.3", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dotcms-container', standalone: true, imports: [AsyncPipe, NgComponentOutlet, NoComponent, ContentletComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ($isInsideEditor()) {\n    @if ($contentlets().length) {\n        @for (contentlet of $contentlets(); track $index) {\n            <dotcms-contentlet-wrapper\n                [contentlet]=\"contentlet\"\n                [container]=\"$dotContainerAsString()\">\n                <ng-container\n                    *ngComponentOutlet=\"\n                        (componentsMap[contentlet.contentType] || componentsMap['CustomNoComponent']\n                            | async) || NoComponent;\n                        inputs: { contentlet }\n                    \" />\n            </dotcms-contentlet-wrapper>\n        }\n    } @else {\n        This container is empty.\n    }\n} @else {\n    @for (contentlet of $contentlets(); track $index) {\n        <ng-container\n            *ngComponentOutlet=\"\n                componentsMap[contentlet.contentType] | async;\n                inputs: { contentlet }\n            \" />\n    }\n}\n", styles: [":host.empty-container{width:100%;background-color:#ecf0fd;display:flex;justify-content:center;align-items:center;color:#030e32;height:10rem}\n"] }]
+            args: [{
+                    selector: 'dotcms-container',
+                    standalone: true,
+                    imports: [ContainerNotFoundComponent, EmptyContainerComponent, ContentletComponent],
+                    template: `
+        @if (!$containerData()) {
+            <dotcms-container-not-found [identifier]="container.identifier" />
+        } @else if ($isEmpty()) {
+            <dotcms-empty-container />
+        } @else {
+            @for (contentlet of $contentlets(); track contentlet.identifier) {
+                <dotcms-contentlet [contentlet]="contentlet" [containerData]="$containerData()!" />
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
         }], propDecorators: { container: [{
                 type: Input,
                 args: [{ required: true }]
+            }], dotObject: [{
+                type: HostBinding,
+                args: ['attr.data-dot-object']
             }], acceptTypes: [{
                 type: HostBinding,
                 args: ['attr.data-dot-accept-types']
@@ -682,257 +1660,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }], uuid: [{
                 type: HostBinding,
                 args: ['attr.data-dot-uuid']
-            }], class: [{
-                type: HostBinding,
-                args: ['class']
-            }], dotObject: [{
-                type: HostBinding,
-                args: ['attr.data-dot-object']
-            }], testId: [{
-                type: HostBinding,
-                args: ['attr.data-testid']
             }] } });
 
 /**
- * This component is responsible to display a column with containers.
+ * This component renders a column with all its content using the layout provided by dotCMS Page API.
  *
- * @export
- * @class ColumnComponent
- * @implements {OnInit}
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @category Components
+ * @internal
  */
 class ColumnComponent {
     constructor() {
-        /**
-         * The data-testid attribute used for identifying the component during testing.
-         *
-         * @memberof ColumnComponent
-         */
-        this.containerClasses = '';
+        this.customClasses = '';
     }
-    ngOnInit() {
-        const { startClass, endClass } = getPositionStyleClasses(this.column.leftOffset, this.column.width + this.column.leftOffset);
-        this.containerClasses = `${startClass} ${endClass}`;
+    ngOnChanges() {
+        const positionClasses = getColumnPositionClasses(this.column);
+        this.customClasses = combineClasses([positionClasses.startClass, positionClasses.endClass]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.containerClasses" } }, ngImport: i0, template: `
-        @for (container of column.containers; track $index) {
-            <dotcms-container [container]="container" />
-        }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.customClasses" } }, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="column.styleClass" data-testid="dotcms-column">
+            @for (container of column.containers; track $index) {
+                <dotcms-container [container]="container" />
+            }
+        </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: "18.2.3", ngImport: i0, type: ColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-column', standalone: true, imports: [ContainerComponent], template: `
-        @for (container of column.containers; track $index) {
-            <dotcms-container [container]="container" />
-        }
+        <div [class]="column.styleClass" data-testid="dotcms-column">
+            @for (container of column.containers; track $index) {
+                <dotcms-container [container]="container" />
+            }
+        </div>
     `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.col-start-1{grid-column-start:1}:host.col-start-2{grid-column-start:2}:host.col-start-3{grid-column-start:3}:host.col-start-4{grid-column-start:4}:host.col-start-5{grid-column-start:5}:host.col-start-6{grid-column-start:6}:host.col-start-7{grid-column-start:7}:host.col-start-8{grid-column-start:8}:host.col-start-9{grid-column-start:9}:host.col-start-10{grid-column-start:10}:host.col-start-11{grid-column-start:11}:host.col-start-12{grid-column-start:12}:host.col-end-1{grid-column-end:1}:host.col-end-2{grid-column-end:2}:host.col-end-3{grid-column-end:3}:host.col-end-4{grid-column-end:4}:host.col-end-5{grid-column-end:5}:host.col-end-6{grid-column-end:6}:host.col-end-7{grid-column-end:7}:host.col-end-8{grid-column-end:8}:host.col-end-9{grid-column-end:9}:host.col-end-10{grid-column-end:10}:host.col-end-11{grid-column-end:11}:host.col-end-12{grid-column-end:12}:host.col-end-13{grid-column-end:13}\n"] }]
         }], propDecorators: { column: [{
-                type: Input
-            }], containerClasses: [{
+                type: Input,
+                args: [{ required: true }]
+            }], customClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 /**
- * This component is responsible to display a row with columns.
+ * @description This component renders a row with all its content using the layout provided by dotCMS Page API.
  *
- * @export
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @category Components
+ * @internal
  * @class RowComponent
  */
 class RowComponent {
+    constructor() {
+        this.customClasses = signal('');
+    }
+    ngOnChanges() {
+        this.customClasses.set(combineClasses([this.row.styleClass || 'dot-row']));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row" }, ngImport: i0, template: `
-        @for (column of row.columns; track $index) {
-            <dotcms-column [column]="column" />
-        }
-    `, isInline: true, styles: [":host{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;row-gap:1rem}\n"], dependencies: [{ kind: "component", type: ColumnComponent, selector: "dotcms-column", inputs: ["column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row" }, usesOnChanges: true, ngImport: i0, template: `
+        <div class="dot-row-container">
+            <div [class]="customClasses()" data-dot-object="row" data-testid="dotcms-row">
+                @for (column of row.columns; track $index) {
+                    <dotcms-column [column]="column" />
+                }
+            </div>
+        </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: "18.2.3", ngImport: i0, type: RowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-row', standalone: true, imports: [ColumnComponent], template: `
-        @for (column of row.columns; track $index) {
-            <dotcms-column [column]="column" />
-        }
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;row-gap:1rem}\n"] }]
+        <div class="dot-row-container">
+            <div [class]="customClasses()" data-dot-object="row" data-testid="dotcms-row">
+                @for (column of row.columns; track $index) {
+                    <dotcms-column [column]="column" />
+                }
+            </div>
+        </div>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dot-row{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}\n"] }]
         }], propDecorators: { row: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
 /**
- * `DotcmsLayoutComponent` is a class that represents the layout for a DotCMS page.
- *  It includes a `pageAsset` property that represents the DotCMS page asset and a `components` property that represents the dynamic components for the page.
+ * @description This component is used to render the layout for a DotCMS page.
+ * @param {DotCMSPageAsset} page - The page to render the layout for
+ * @param {DotCMSPageComponent} components - The components to render the layout for
+ * @param {DotCMSPageRendererMode} mode - The mode to render the layout for
+ *
+ * @example
+ * <dotcms-layout-body [page]="page" [components]="components" [mode]="'development'" />
  *
  * @export
- * @class DotcmsLayoutComponent
+ * @implements {OnChanges}
+ * @class DotCMSLayoutBodyComponent
  */
-class DotcmsLayoutComponent {
+class DotCMSLayoutBodyComponent {
     constructor() {
-        this.route = inject(ActivatedRoute);
-        this.pageContextService = inject(PageContextService);
-        this.destroyRef$ = inject(DestroyRef);
-        this.pageAsset$ = this.pageContextService.currentPage$;
-    }
-    /**
-     * Represents the DotCMS page asset.
-     *
-     * @type {DotCMSPageAsset}
-     * @memberof DotcmsLayoutComponent
-     */
-    set pageAsset(value) {
-        this._pageAsset = value;
-        if (!value.layout) {
-            console.warn('Warning: pageAsset does not have a `layout` property. Might be using an advaced template or your dotCMS instance not have a enterprise license.');
-        }
-    }
-    /**
-     * Returns the DotCMS page asset.
-     *
-     * @readonly
-     * @type {DotCMSPageAsset}
-     * @memberof DotcmsLayoutComponent
-     */
-    get pageAsset() {
-        return this._pageAsset;
+        this.components = {};
+        this.mode = 'production';
+        this.#dotCMSStore = inject(DotCMSStore);
+        this.$isDevMode = this.#dotCMSStore.$isDevMode;
+        this.$rows = signal([]);
+        this.$isEmpty = signal(false);
     }
-    ngOnInit() {
-        this.pageContextService.setContext(this.pageAsset, this.components);
-        if (!isInsideEditor()) {
-            return;
-        }
-        this.client = DotCmsClient.instance;
-        this.route.url.pipe(takeUntilDestroyed(this.destroyRef$)).subscribe((urlSegments) => {
-            const pathname = '/' + urlSegments.join('/');
-            initEditor({ pathname });
-            updateNavigation(pathname || '/');
-        });
-        this.uveSubscription = createUVESubscription('changes', (data) => {
-            if (this.onReload) {
-                this.onReload();
-                return;
-            }
-            this.pageContextService.setPageAsset(data);
+    #dotCMSStore;
+    ngOnChanges() {
+        this.#dotCMSStore.setStore({
+            page: this.page,
+            components: this.components,
+            mode: this.mode
         });
-        postMessageToEditor({ action: CLIENT_ACTIONS.CLIENT_READY, payload: this.editor });
-    }
-    ngOnDestroy() {
-        if (!isInsideEditor()) {
-            return;
-        }
-        this.uveSubscription?.unsubscribe();
+        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: "18.2.3", ngImport: i0, type: DotcmsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotcmsLayoutComponent, isStandalone: true, selector: "dotcms-layout", inputs: { pageAsset: "pageAsset", components: "components", onReload: "onReload", editor: "editor" }, ngImport: i0, template: `
-        @if (pageAsset$ | async; as page) {
-            @for (row of page?.layout?.body?.rows; track $index) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSLayoutBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: DotCMSLayoutBodyComponent, isStandalone: true, selector: "dotcms-layout-body", inputs: { page: "page", components: "components", mode: "mode" }, providers: [DotCMSStore], usesOnChanges: true, ngImport: i0, template: `
+        @if ($isEmpty() && $isDevMode()) {
+            <dotcms-page-error-message />
+        } @else {
+            @for (row of $rows(); track row.identifier) {
                 <dotcms-row [row]="row" />
             }
         }
-    `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: RowComponent, selector: "dotcms-row", inputs: ["row"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: PageErrorMessageComponent, selector: "dotcms-page-error-message" }, { kind: "component", type: RowComponent, selector: "dotcms-row", inputs: ["row"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotcmsLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSLayoutBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dotcms-layout', standalone: true, imports: [RowComponent, AsyncPipe], template: `
-        @if (pageAsset$ | async; as page) {
-            @for (row of page?.layout?.body?.rows; track $index) {
+            args: [{ selector: 'dotcms-layout-body', standalone: true, imports: [PageErrorMessageComponent, RowComponent], providers: [DotCMSStore], template: `
+        @if ($isEmpty() && $isDevMode()) {
+            <dotcms-page-error-message />
+        } @else {
+            @for (row of $rows(); track row.identifier) {
                 <dotcms-row [row]="row" />
             }
         }
     `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { pageAsset: [{
+        }], propDecorators: { page: [{
                 type: Input,
                 args: [{ required: true }]
             }], components: [{
                 type: Input,
                 args: [{ required: true }]
-            }], onReload: [{
-                type: Input
-            }], editor: [{
+            }], mode: [{
                 type: Input
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/**
- * Validates if a given path is a valid URL string
- *
- * @param path - The path to validate
- * @returns boolean indicating if the path is valid
- */
-function isValidPath(path) {
-    if (typeof path !== 'string' || path.trim() === '') {
-        return false;
-    }
-    try {
-        new URL(path);
-        return true;
-    }
-    catch {
-        return false;
-    }
-}
-/**
- * Provides a DotCMS image loader configuration for the Angular Image directive
- *
- * @param path - The base URL path to the DotCMS instance, or empty to use current site
- * @returns An array of providers for the IMAGE_LOADER token
- * @throws Error if the provided path is invalid
- * @example
- * ```typescript
- * // In your app.config.ts
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideDotCMSImageLoader('https://demo.dotcms.com')
- *     // Or use current site:
- *     // provideDotCMSImageLoader()
- *   ]
- * };
- * ```
- */
-function provideDotCMSImageLoader(path) {
-    // If path is provided, validate it
-    if (path && !isValidPath(path)) {
-        throw new Error(`Image loader has detected an invalid path (\`${path}\`). ` +
-            `To fix this, supply either the full URL to the dotCMS site, or leave it empty to use the current site.`);
-    }
-    return [
-        {
-            provide: IMAGE_LOADER,
-            useValue: (config) => createDotCMSUrl(config, path)
+class DotCMSEditablePageService {
+    /**
+     * Subject that emits the current editable page asset or null.
+     * Used internally to track changes to the page data.
+     *
+     * @private
+     * @type {Subject<DotCMSPageResponse | undefined>}
+     */
+    #responseSubject = new Subject();
+    /**
+     * Observable stream of the page asset changes.
+     * Exposes the pageAssetSubject as an Observable for subscribers.
+     *
+     * @private
+     * @type {Observable<DotCMSPageResponse | undefined>}
+     */
+    #response$ = this.#responseSubject.asObservable();
+    /**
+     * Listens for changes to an editable page and returns an Observable that emits the updated page data.
+     * This method initializes the UVE (Universal Visual Editor) and sets up subscriptions to track content changes.
+     *
+     * @example
+     * ```ts
+     * // Import the service
+     * import { DotCMSEditablePageService } from '@dotcms/angular';
+     *
+     * // Inject the service
+     * constructor(private editablePageService: DotCMSEditablePageService) {}
+     *
+     * // Get the page data from your API call
+     * const page = await client.page.get('/');
+     *
+     * // Listen for changes
+     * const subscription = this.editablePageService.listen(page).subscribe(updatedPage => {
+     *   if (updatedPage) {
+     *     // Handle updated page data
+     *     console.log('Page updated:', updatedPage);
+     *   }
+     * });
+     *
+     * // When done listening, unsubscribe
+     * subscription.unsubscribe();
+     * ```
+     *
+     * @param response Optional initial page data
+     * @returns Observable that emits the updated page data or undefined
+     */
+    listen(response) {
+        if (!getUVEState()) {
+            return of(response);
         }
-    ];
-}
-/**
- * Creates a DotCMS-compatible URL for image loading
- *
- * @param config - The image loader configuration
- * @param path - The base URL path to the DotCMS instance
- * @returns A fully qualified URL for the image
- * @internal
- */
-function createDotCMSUrl(config, path) {
-    // console.log('createDotCMSUrl', config, path);
-    const { loaderParams, src, width } = config;
-    const params = loaderParams;
-    if (params?.isOutsideSRC) {
-        return src;
+        const pageURI = response?.pageAsset?.page?.pageURI;
+        initUVE(response);
+        // Update the navigation to the pageURI, when we have a pageURI
+        // Sometimes the page is null due to permissions, so we don't want to update the navigation
+        // And wait for the UVE to resolve the page
+        if (pageURI) {
+            updateNavigation(pageURI);
+        }
+        const unsubscribeUVEChanges = this.#listenUVEChanges();
+        return this.#response$.pipe(finalize(() => {
+            unsubscribeUVEChanges();
+        }));
     }
-    // Use empty string as fallback to support using current site
-    const dotcmsHost = path ? new URL(path).origin : '';
-    const imageSRC = src.includes('/dA/') ? src : `/dA/${src}`;
-    const languageId = params?.languageId ?? '1';
-    if (width) {
-        return `${dotcmsHost}${imageSRC}/${width}w?language_id=${languageId}`;
+    /**
+     * Sets up a subscription to listen for UVE content changes and updates the page asset subject.
+     * This is an internal method used by listenEditablePage() to handle UVE events.
+     *
+     * @returns {UVEUnsubscribeFunction} Function to unsubscribe from the UVE content changes
+     * @private
+     */
+    #listenUVEChanges() {
+        const { unsubscribe } = createUVESubscription(UVEEventType.CONTENT_CHANGES, (payload) => {
+            this.#responseSubject.next(payload);
+        });
+        return unsubscribe;
     }
-    return `${dotcmsHost}${imageSRC}?language_id=${languageId}`;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditablePageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditablePageService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotCMSEditablePageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DotEditableTextComponent, DotcmsLayoutComponent, PageContextService, provideDotCMSImageLoader };
+export { DotCMSBlockEditorRendererComponent, DotCMSClient, DotCMSEditablePageService, DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSClient, provideDotCMSImageLoader };
 //# sourceMappingURL=dotcms-angular.mjs.map