@dotcms/angular 0.0.1-alpha.36 → 0.0.1-alpha.38

package/fesm2022/dotcms-angular.mjs

@@ -235,8 +235,8 @@ class DotEditableTextComponent {
     didContentChange(editedContent) {
         return this.content !== editedContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotEditableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", 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: 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: [
             {
                 provide: TINYMCE_SCRIPT_SRC,
                 useFactory: () => {
@@ -245,7 +245,7 @@ class DotEditableTextComponent {
             }
         ], 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotEditableTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotEditableTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dot-editable-text', standalone: true, imports: [EditorComponent], providers: [
                         {
@@ -331,10 +331,10 @@ class PageContextService {
             pageAsset
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: PageContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: PageContextService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: PageContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: PageContextService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -343,6 +343,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
 
 //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',
@@ -360,6 +364,10 @@ const endClassMap = {
 };
 //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',
@@ -374,6 +382,13 @@ const startClassMap = {
     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];
@@ -389,6 +404,13 @@ const getContainersData = (containers, containerRef) => {
         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];
@@ -399,19 +421,24 @@ const getPositionStyleClasses = (start, end) => {
 };
 
 /**
- * This is part of the Angular SDK.
- * This is a component for the `NoComponentComponent` component.
+ * This component is responsible to display a message when there is no component for a contentlet.
+ *
+ * @export
+ * @class NoComponent
  */
 class NoComponent {
     constructor() {
+        /**
+         * The data-testid attribute used for identifying the component during testing.
+         */
         this.testId = 'no-component';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: NoComponent, isStandalone: true, selector: "dotcms-no-component", inputs: { contentlet: "contentlet" }, host: { properties: { "attr.data-testid": "this.testId" } }, ngImport: i0, template: `
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: NoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-no-component', standalone: true, template: `
         No Component for {{ contentlet.contentType }}
@@ -423,15 +450,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: ['attr.data-testid']
             }] } });
 
+/**
+ * This component is responsible to display a contentlet.
+ *
+ * @export
+ * @class ContentletComponent
+ * @implements {OnChanges}
+ */
 class ContentletComponent {
     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;
     }
     ngOnChanges() {
@@ -444,10 +526,10 @@ class ContentletComponent {
         this.numberOfPages = this.contentlet['onNumberOfPages'];
         this.dotContent = 'contentlet';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContentletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContentletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ContentletComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dotcms-contentlet-wrapper',
@@ -486,6 +568,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: ['attr.data-dot-object']
             }] } });
 
+/**
+ * This component is responsible to display a container with contentlets.
+ *
+ * @export
+ * @class ContainerComponent
+ * @implements {OnChanges}
+ */
 class ContainerComponent {
     constructor() {
         this.pageContextService = inject(PageContextService);
@@ -494,12 +583,53 @@ class ContainerComponent {
         this.$contentlets = signal([]);
         this.$dotContainer = signal(null);
         this.$dotContainerAsString = computed(() => JSON.stringify(this.$dotContainer()));
+        /**
+         * The accept types for the container component.
+         *
+         * @type {(string | null)}
+         * @memberof ContainerComponent
+         */
         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';
     }
     ngOnChanges() {
@@ -525,10 +655,10 @@ class ContainerComponent {
             this.dotObject = 'container';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ContainerComponent, decorators: [{
+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"] }]
         }], propDecorators: { container: [{
@@ -557,22 +687,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: ['attr.data-testid']
             }] } });
 
+/**
+ * This component is responsible to display a column with containers.
+ *
+ * @export
+ * @class ColumnComponent
+ * @implements {OnInit}
+ */
 class ColumnComponent {
     constructor() {
+        /**
+         * The data-testid attribute used for identifying the component during testing.
+         *
+         * @memberof ColumnComponent
+         */
         this.containerClasses = '';
     }
     ngOnInit() {
         const { startClass, endClass } = getPositionStyleClasses(this.column.leftOffset, this.column.width + this.column.leftOffset);
         this.containerClasses = `${startClass} ${endClass}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: ColumnComponent, isStandalone: true, selector: "dotcms-column", inputs: { column: "column" }, host: { properties: { "class": "this.containerClasses" } }, ngImport: i0, template: `
+    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" />
         }
     `, 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: "17.3.9", ngImport: i0, type: ColumnComponent, decorators: [{
+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) {
@@ -586,15 +728,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * This component is responsible to display a row with columns.
+ *
+ * @export
+ * @class RowComponent
+ */
 class RowComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: RowComponent, isStandalone: true, selector: "dotcms-row", inputs: { row: "row" }, ngImport: i0, template: `
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: RowComponent, decorators: [{
+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) {
@@ -620,12 +768,25 @@ class DotcmsLayoutComponent {
         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;
     }
@@ -655,8 +816,8 @@ class DotcmsLayoutComponent {
         }
         this.client.editor.off('changes');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotcmsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: DotcmsLayoutComponent, isStandalone: true, selector: "dotcms-layout", inputs: { pageAsset: "pageAsset", components: "components", onReload: "onReload", editor: "editor" }, ngImport: i0, template: `
+    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 this.page?.layout?.body?.rows; track $index) {
                 <dotcms-row [row]="row" />
@@ -664,7 +825,7 @@ class DotcmsLayoutComponent {
         }
     `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DotcmsLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: DotcmsLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dotcms-layout', standalone: true, imports: [RowComponent, AsyncPipe], template: `
         @if (pageAsset$ | async; as page) {