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

package/fesm2022/dotcms-angular-next.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Directive, Input, Renderer2, ElementRef, SecurityContext, Component, ViewChild, HostListener, ChangeDetectionStrategy, signal, computed, Injectable, HostBinding } from '@angular/core';
 import { getUVEState } from '@dotcms/uve';
 import { UVE_MODE } from '@dotcms/uve/types';
-import { IMAGE_LOADER } from '@angular/common';
+import { IMAGE_LOADER, NgStyle, AsyncPipe, NgComponentOutlet } from '@angular/common';
 import { TINYMCE_SCRIPT_SRC, EditorComponent } from '@tinymce/tinymce-angular';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NOTIFY_CLIENT, isInsideEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS } from '@dotcms/client';
+import { PRODUCTION_MODE, DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_ANGULAR, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getDotContainerAttributes, getContainersData, getContentletsInContainer, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
 
 /**
  * Directive to show a template when the UVE is in a specific mode.
@@ -387,9 +388,625 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 args: ['window:message', ['$event']]
             }] } });
 
+/**
+ * @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);
+        /**
+         * @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">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">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.container);
+        });
+        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 = this.$dotAttributes()['data-dot-container'];
+        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", container: "container" }, 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 ($UserNoComponent() && $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 ($UserNoComponent() && $isDevMode()) {
+            <dotcms-fallback-component
+                [UserNoComponent]="$UserNoComponent()"
+                [contentlet]="$contentlet() ?? contentlet" />
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { contentlet: [{
+                type: Input,
+                args: [{ required: true }]
+            }], container: [{
+                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;
+        this.identifier = null;
+        this.maxContentlets = null;
+        this.uuid = null;
+    }
+    #dotCMSStore;
+    ngOnChanges() {
+        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-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" [container]="container.identifier" />
+            }
+        }
+    `, 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", "container"] }], 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: [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" [container]="container.identifier" />
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { container: [{
+                type: Input,
+                args: [{ required: true }]
+            }], dotObject: [{
+                type: HostBinding,
+                args: ['attr.data-dot-object']
+            }], acceptTypes: [{
+                type: HostBinding,
+                args: ['attr.data-dot-accept-types']
+            }], identifier: [{
+                type: HostBinding,
+                args: ['attr.data-dot-identifier']
+            }], maxContentlets: [{
+                type: HostBinding,
+                args: ['attr.data-max-contentlets']
+            }], uuid: [{
+                type: HostBinding,
+                args: ['attr.data-dot-uuid']
+            }] } });
+
+/**
+ * This component renders a column 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 ColumnComponent {
+    constructor() {
+        this.customClasses = '';
+    }
+    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.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: `
+        <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,
+                args: [{ required: true }]
+            }], customClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * @description This component renders a row 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 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" }, 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: `
+        <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 }]
+            }] } });
+
+/**
+ * @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
+ * @implements {OnChanges}
+ * @class DotCMSLayoutBodyComponent
+ */
+class DotCMSLayoutBodyComponent {
+    constructor() {
+        this.components = {};
+        this.mode = 'production';
+        this.#dotCMSStore = inject(DotCMSStore);
+        this.$isDevMode = this.#dotCMSStore.$isDevMode;
+        this.$rows = signal([]);
+        this.$isEmpty = signal(false);
+    }
+    #dotCMSStore;
+    ngOnChanges() {
+        this.#dotCMSStore.setStore({
+            page: this.page,
+            components: this.components,
+            mode: this.mode
+        });
+        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: 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: 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: DotCMSLayoutBodyComponent, decorators: [{
+            type: Component,
+            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: { page: [{
+                type: Input,
+                args: [{ required: true }]
+            }], components: [{
+                type: Input,
+                args: [{ required: true }]
+            }], mode: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DotCMSEditableTextComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
+export { DotCMSEditableTextComponent, DotCMSLayoutBodyComponent, DotCMSShowWhenDirective, provideDotCMSImageLoader };
 //# sourceMappingURL=dotcms-angular-next.mjs.map